如何使用 VSCode 任务优化您的日常工作流程

配置任务

配置 Shell 任务

结论

你试过使用 VSCode Tasks 吗？如果没有，这篇文章将教你如何npm在 VSCode 中快速运行脚本，以及如何使用快捷键。

我参与过的所有 JavaScript 项目都有一套预定义的脚本，你可以执行这些脚本来运行应用程序。通常，这些脚本是用于代码检查、测试、构建或部署的命令。我合作过的大多数开发者都使用他们选择的命令行工具来运行这些命令。你要么必须牢记项目脚本，要么你的命令行工具可能具有自动补全功能，要么就像我以前那样，只能查看历史记录来找到你过去运行过的命令：

history | grep 'npm run'

或者，您可以使用任务来运行脚本。首先打开命令面板，Cmd + Shift + P然后选择“任务：运行任务”。VSCode 会提供它支持的多种任务类型。选择“npm”。编辑器会快速扫描您的配置package.json，并提供您定义的任务：

选择你的脚本之一，就完成了！一个新的内置终端窗口会打开，你可以看到脚本的输出，并从上次中断的地方继续工作。

好吧，这看起来很酷。但你可能会想：“嘿，我的项目没那么简单，我的任务有参数，有不同的选项，而且我可能还需要先打开子文件夹！ ”

当然可以！

配置任务

假设你想对某个特定的测试文件运行单元测试。你的测试命令可能如下所示：

npm test 'my-component.js' --auto-watch --no-single-run

我的通常工作流程如下：我想在监视模式下运行我正在编写的单元测试。通常，你需要将文件名插入测试命令中，但 VSCode 可以自动完成这项工作。为此，我们可以使用一些提供的替换变量。例如：${fileBasename}。完整的可用变量列表可以在官方文档中找到（链接在此）。

现在再次打开命令面板，选择“任务：运行任务”，然后选择“未配置任务。配置任务...”，并选择要配置的任务。这将.vscode/tasks.json在您的项目中创建并打开一个新文件。您可以将此文件添加到项目.gitignore或提交，以便您的团队也能使用这些任务。

添加替换变量后，配置应如下所示：

{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "npm",
            "script": "test ${fileBasename} --auto-watch --no-single-run",
            "problemMatcher": [],
            "label": "npm: test opened file",
            "detail": "npm test"
        }
    ]
}

瞧！你的自定义任务现在已添加到命令面板的运行列表中。现在打开你想运行的测试文件，例如my-component-test.js，点击“运行Cmd + Shift + P”->“任务：运行任务”，你应该能看到新配置的任务：“npm: test opened file”。选中它，它应该会npm test my-component-test.js --auto-watch --no-single-run在终端中运行。你还可以自定义脚本结果的显示方式。例如，如果我想为这类命令打开一个新的终端，只需提供一个额外的“显示”配置即可。

{
    ...
    "presentation": {
        "panel": "dedicated",
    }
}

现在您可以看到多个已打开的终端窗口，您可以在它们之间切换。

配置 Shell 任务

npm如果您想执行其他 shell 命令，VSCode 也支持。现在，我们可以用 `.`代替`type` shell。例如：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Run Cypress",
      "type": "shell",
      "command": "cd tests/e2e/cypress/ && npm run cypress",
    }
}

结论

根据上面的示例，您可以在几分钟内配置自定义开发工作流程，并享受在编辑器中直接运行脚本和查看其结果的完全集成体验。

如果这篇文章对您的开发工作流程有所帮助，或者您有任何疑问，请留言！祝您使用愉快！