通过在 Visual Studio Code 中自动执行任务来提高工作效率

# Web 开发# 生产率# VSCode

介绍

Visual Studio Code（VSCode）有一个功能可以让我们提高工作效率并专注于编程。

设置开发环境时，您可以创建按顺序运行多个任务的自定义命令。例如，您可以定义一个命令，当您在 VSCode 中打开项目时自动启动项目的服务器。类似地，您可以创建一个命令，运行测试，生成部署包，并一步将其推送到生产环境。

使用

本教程将指导您了解基础知识并帮助您深入研究官方文档。

准备

  • 我们用 VSCode 打开我们的项目。
  • 在项目的根目录中，我们寻找（隐藏的）.vscode 目录（如果不存在，我们就创建它）。
  • 在其中我们创建（如果不存在）一个名为tasks.json的文件

    • 任务类型

    有两种类型的任务：

  • 简单任务：仅执行单个操作，例如：启动服务器
  • 复合任务：执行多个动作，例如：启动测试、执行构建和部署。

    • 结构

    {
  "version": "2.0.0",
  "tasks": [
    {
    "label": "nombre de la tarea",
    "type": "shell","typescript"
    "command": "comando a ejecutar",
    "args": ["argumento1", "argumento2"], 
    "group": {
        "kind": "build",
        "isDefault": true 
    },
    "problemMatcher": [], 
    "detail": "Descripción de la tarea",
    "presentation": {
        "echo": true, // opcional
        "reveal": "always", 
        "focus": false, 
        "panel": "shared" 
    },
    "runOptions": {
        "runOn": "folderOpen" 
    }
    }
  ]
}
  • 标签：任务的名称。
  • 类型：任务类型（shell、process、npm、gulp、grunt、typescript）。
  • 命令：要执行的命令。
  • args：命令的参数（可选）。
  • group：任务分组（可选）。
  • kind：组类型（构建、测试、无）。
  • isDefault：这是否是该组的默认任务（可选）。
  • problemMatcher：配置以检测命令输出中的问题（可选）。
  • 详细信息：任务描述（可选）。
  • presentation：任务呈现设置（可选）。
  • echo：是否在输出中显示命令（可选）。
  • 显示：何时显示输出（总是、静默、从不）。
  • focus：是否聚焦输出（可选）。
  • 面板： 共享面板（共享、专用、新）。
  • runOptions：任务执行选项（可选）。
  • runOn：何时运行任务（folderOpen，默认）。

    • 示例

    简单任务

    {
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Ionic serve",
      "type": "shell",
      "command": "ionic serve --external",
      "group": {
        "kind": "test",
        "isDefault": true
      },
      "problemMatcher": [],
      "detail": "Tarea para iniciar el servidor de desarrollo de Ionic",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared"
      },
      "runOptions": {
        "runOn": "folderOpen"
      }
    }
  ]
}

    上面的例子启动了一个 Ionic 项目的服务器。

    复合任务

    {
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Run Tests",
      "type": "shell",
      "command": "npm run test",
      "problemMatcher": [],
      "detail": "Tarea para ejecutar los tests de la aplicación"
    },
    {
      "label": "Build App",
      "type": "shell",
      "command": "npm run build",
      "problemMatcher": [],
      "detail": "Tarea para construir la aplicación"
    },
    {
      "label": "Deploy via SSH",
      "type": "shell",
      "command": "scp -r ./dist/* user@remote:/path/to/deploy",
      "problemMatcher": [],
      "detail": "Tarea para mandar los archivos por SSH"
    },
    {
      "label": "Full Deploy",
      "dependsOn": ["Run Tests", "Build App", "Deploy via SSH"],
      "problemMatcher": [],
      "detail": "Tarea para ejecutar tests, construir y desplegar la aplicación"
    }
  ]
}

    这将允许您运行测试、构建并最终使用“Full Deploy”进行部署。

    执行

    简单任务

  • 我们启动命令面板（Ctrl+Shift+P）
  • 我们进入Run Task
  • 我们选择我们喜欢的任务（标签中指定的名称）

    • 使用

    由于简单任务示例中的 `runOn` 属性具有分配的值 `folderOpen`，因此不需要使用命令面板来运行它，因为定义此属性表示它应该在项目启动时立即运行。

    复合任务

    如果仔细观察，您会发现简单和复合任务示例在结构上有几个相似之处，但以下情况除外：

    {
      "label": "Full Deploy",
      "dependsOn": ["Run Tests", "Build App", "Deploy via SSH"],
      "problemMatcher": [],
      "detail": "Tarea para ejecutar tests, construir y desplegar la aplicación"
    }

    此片段允许我们使用在标签（“Full Deploy”）中定义的名称下的单个命令执行多个任务，这是通过“dependsOn”属性完成的，其中要执行的任务的名称作为参数传递。如果需要，可以使用标签中定义的名称单独运行任务，在本例中为：“运行测试”、“构建应用程序”、“通过 SSH 部署”。

    使用

    如果一个任务失败，除非我们在“sequence”或“parallel”中指定“dependsOrder”属性，否则下一个任务将不会执行

    执行复合任务的方式与执行简单任务的方式相同

  • 我们打开命令面板（Ctrl+Shift+P）
  • 我们进入Run Task
  • 我们选择我们喜欢的任务（在本例中为完全部署）

    • 概括

    让我们快速回顾一下

  • 我们在 .vscode 中创建一个 task.json`
  • 我们定义在项目中使用的任务
  • 我们执行 Ctrl+Shift+P 并在命令面板中输入 Run Task。
  • 我们选择所需的任务。

    • 文章原文：https://dowar.xyz/blog/post/55