19 为你的项目打造Workflow（下） 任务配置的更多参数以及任务结果的分析功能

Command相关属性和特殊处理

args属性

{
"label": "echo",
"type": "shell",
"command": "echo",
"args": [
"hello world"
]
}

 

"args": [
    {
        "value": "Hello World",
        "quoting": "escape"
    }
]

quoting 则决定了该如何处理这段字符串。默认情况下是使用escape转义，也就是说任务系统会根据我们所使用的 shell 的要求，对这段字符串进行转义。

quoting 另外两个值 “strong”，那么在 bash里， 我们将会使用单引号包裹这段字符串“weak”，在 bash 里我们则会使用双引号来包裹这段字符串。

结果分析

任务运行的结果是由 tasks.json 里“problemMatcher”属性来控制。

VS Code 现在已经自带了以下几种问题分析器：

  1. $tsc，用于分析 TypeScript 编译的结果，$tsc-watch 则是用于分析运行在观察模式下的 TypeScript 编译器的结果；
  2. $jshint用于分析 JSHint 的结果，$jshint-stylish 用于分析JSHint Stylish的运行结果；
  3. $eslint-compact 和 $eslint-stylish 分别用于分析 ESLint Compact 和 ESLint Stylish；
  4. $go 是 Go 编译器的分析器；
  5. $mscompile 用于分析 CSharp 和 VB 的编译结果；
  6. $lessc 是用于分析 Lessc 的运行结果的；
  7. $node-sass 用于分析 Node Sass 编译结果。

市场上的问题分析器相关的插件Search results - problem matcher | Visual Studio Code , Visual Studio Marketplace，或者看看你使用的语言插件是否已经支持了相对应的结果分析。

自定义问题分析器

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "echo",
            "type": "shell",
            "command": "echo",
            "args": [
                {
                    "value": "index.js:5:3: warning: unused variable",
                    "quoting": "escape"
                }
            ],
            "problemMatcher": {
                "owner": "echo",
                "fileLocation": ["relative", "${workspaceFolder}"],
                "pattern": {
                    "regexp": "^(.*):(\\d+):(\\d+):\\s+(warning|error):\\s+(.*)$",
                    "file": 1,
                    "line": 2,
                    "column": 3,
                    "severity": 4,
                    "message": 5
                }
            }
        }
    ]
}
View Code

正则表达式去匹配下面的字符串时  index.js:5:3: warning: unused variable

配置文件定义了各个属性和正则表达式捕获组的对应关系 （文件地址：1，行号：2，列号：3，错误的重要级别：4，错误信息：5）

还需要 fileLocation 文件位置来告诉 VS Code，如何在当前文件夹下定位这个错误文件。

最后，当我们运行了这个任务，我们就能够在问题面板里看到这个错误信息，而当我们点击这个错误时，则能够在编辑器里打开 index.js 这个文件并跳转到第五行。

 

 

 

多任务

我们的项目并不只包含一种语言、一个框架，这导致我们需要同时使用多种不同的构建或者测试工具，并需要额外写一些脚本把它们同时运行起来。不过不用担心，VS Code 的任务系统也为这种情况提供了便捷的任务定制方案。比如说我们的项目里有前端和后端两种代码，然后我们希望同时把它们运行起来，这时我们就要首先为前、后端分别定义好各自的任务，这里我们将它们称为 “frontend”“backend”。我们可以新建一个任务，内容如下：

{
    "taskName": "compile",
    "dependsOn": [
     "frontend",
     "backend"
    ],
    "group": {
     "kind": "build",
     "isDefault": true
    }
   }

属性 “dependsOn” 。它指定了“compile”这个任务依赖于 “frontend” 和 “backend” 这两个脚本，而这个任务本身并没有制定任何的命令 （command），同时我们还制定了这个任务为默认的生成任务（build），所以当我们按下 Cmd + Shift + B，我们就能够看到“frontend” 和 “backend” 这两个任务都被触发执行了。

 

小结

VS Code 的任务系统，精髓全在这个 tasks.json 的书写，也就是说一个 JSON 对象，控制了任务的方方面面。

  • VS Code 和一些语言相关的插件，能够自动检测我们本地已经有的任务脚本配置，这样我们就能够直接使用任务系统去直接执行它们了。你不妨看看，你的项目里正在使用的任务脚本，是否能够被 VS Code 检测出来？如果不能，那有没有插件能够做到这点呢？

  • 我们可以将自动检测出来的任务，以 tasks.json 的形式储存在 .vscode 文件夹中，成为项目的一部分。同时，我们也可以在 tasks.json 中，对它们进行修改定制。

  • 除了自动检测，我们还能够自己书写自定义的任务，在书写自定义任务配置时，有以下几个要点：

    • 在处理脚本或者文件地址的时候，我们要非常小心。比如说在指定 command 的时候，我们使用了绝对地址，那这个地址在其他同事的机器上就不一定存在了；而如果我们使用了当前文件夹下的相对地址，或者说使用预定义变量 ${workspaceFolder}，就能很好地避免了这样的问题。
    • 我们要考虑不同操作系统可能对格式有不同的要求。如果遇到了类似的问题，我们可以为某个特定的操作系统指定配置。
    • 我们可以指定默认的 Build 或者 Test 任务，以及使用多任务，争取做到一键执行。

  • 任务结果的分析也很重要，虽然我们能够去阅读任务脚本的全部输出结果，自己去查找错误，但是如果我们使用了合适的错误分析器，就能够将错误和警告自动放入到问题面板中。

对一个个体而言，任务系统的优势可能还不明显。但是如果你通过设置任务系统、添加错误分析器，把工作流程针对 VS Code 进行一次优化，这样你的同事在使用 VS Code 的时候，也就可以直接使用 VS Code 的任务系统和问题面板了，而无需为命令行脚本工具而烦恼了。

任务系统的配置支持预定义参数 （https://code.visualstudio.com/docs/editor/tasks#_variable-substitution），后续介绍代码片段里会涉及到。

 

posted @ 2020-04-13 17:17  vvf  阅读(283)  评论(0)    收藏  举报