如何在打开项目时在 VS Code 中自动运行命令

有时候，我打开 JavaScript 项目时会忘记运行 webpack，结果搞砸了！我的默认设置是让 webpack 监听修改并自动触发打包。

通常都是早上我昏昏沉沉的时候，我以为输出会有什么变化，结果什么也没发生。我花了一分钟才回过神来，然后就出现了“ doh！”的瞬间，然后才意识到我还没启动 webpack。🤦‍♂️

所以，为了避免再次蒙受这样的耻辱，最好是在打开一个使用 webpack 的 JavaScript 项目时就自动启动 webpack。VS Code 内置了专门用于此的任务。您可以查看任务用户指南来了解完整内容。我只会向您展示如何解决我的用例。

我想从我的 执行一个 npm 脚本package.json。在命令行中，我会运行npm run webpack。您可以运行任何您想要的命令。

 {
   // ...other stuff

   "scripts": {
    "webpack": "webpack --mode development --watch",
   }
 }

TLDR

将此任务添加到工作区tasks.json：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Run npm webpack on startup",
      "type": "shell",
      "command": "npm run webpack",
      "windows": {
        "command": "npm run webpack"
      },
      "presentation": {
        "reveal": "always",
        "panel": "new"
      },
      "runOptions": { "runOn": "folderOpen" }
    }
  ]
}

通过运行命令任务：允许文件夹中的自动任务来启用自动任务。

如何创建任务文件

您的项目特定的任务存储在 中<project folder>/.vscode/tasks.json。您可以自己创建该文件，也可以运行“任务：配置任务”命令来为您构建模板文件。

该命令在创建文件之前会询问您几个问题。

1. 选择要配置的任务：您可以跳过这一步并点击Enter。
2. 选择任务模板：选择“其他”选项。

这是您获得的骨架tasks.json 。

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "echo",
            "type": "shell",
            "command": "echo Hello"
        }
    ]
}

如何创建任务

因此，我们要添加一个新的任务对象。Intellisense 支持可以帮助您，您可以点击Ctrl+Space获取属性列表。

以下是最重要的任务属性的列表：

• label：用户界面中使用的标签。
• type：对于自定义任务，可以是shell或process。如果shell指定了 ，则该命令将被解释为 shell 命令，例如bash、cmd。如果process指定了 ，则该命令将被解释为要执行的进程。我们希望选择shell。
• command：实际要执行的命令。我们想要执行npm run webpack。
• windows：Windows 特定属性。在 Windows 操作系统上执行命令时，将使用此属性代替默认属性。它也有一个command属性，如果您是 Windows 用户，我不知道是否需要在此处再次指定您的命令。我想这取决于您的具体命令。无论如何，我还是添加了它。
• presentation：定义如何在终端中处理任务输出。它提供以下属性：
  • reveal：控制是否将集成终端面板置于最前面。有效值为：
    • always - 面板始终置于最前面。这是默认设置。我更喜欢在启动时看到命令运行，所以这个选项正是我想要的！
    • 从不- 用户必须明确地亲自将终端面板带到前面。
    • 静默- 仅当未扫描输出中的错误和警告时，终端面板才会出现在前面。
  • panel：控制终端实例是否在任务运行之间共享。可能的值包括：
    • shared：终端共享，其他任务运行的输出添加到同一个终端。
    • dedicated：终端专用于特定任务。如果再次执行该任务，则终端将被重用。
    • new：该任务每次执行都会使用一个新的干净终端。最好使用干净的面板。检查一下！
• runOptions：定义任务何时以及如何运行。它具有以下属性：
  • runOn：指定任务何时运行。
    • default：只有通过运行任务命令执行时，该任务才会运行。
    • folderOpen：打开包含文件夹时，该任务将会运行。这正是我们想要的！

我的任务

这对我来说是一个诀窍：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Run npm webpack on startup",
      "type": "shell",
      "command": "npm run webpack",
      "windows": {
        "command": "npm run webpack"
      },
      "presentation": {
        "reveal": "always",
        "panel": "new"
      },
      "runOptions": { "runOn": "folderOpen" }
    }
  ]
}

首次打开包含通过“folderOpen”运行的任务的项目时，应该会弹出一个提示，询问您是否允许该文件夹中的任务自动运行。我没看到这个提示！

您可以通过运行命令任务：允许文件夹中的自动任务来自行启用自动任务。

结果

下次打开项目时，您将看到任务自动运行，如下所示：

太棒了！又少操心一件事情了！😅

感谢您的阅读！欢迎订阅我的RSS 源，并在社交媒体上与他人分享这篇文章。💌 🙂