要在VS Code中運(yùn)行外部工具，使用tasks.json配置任務(wù)。1. 創(chuàng)建或編輯.tasks.json文件，通過命令面板選擇“配置任務(wù)”生成默認(rèn)模板；2. 定義任務(wù)屬性，如label（任務(wù)名稱）、type（類型，通常為shell）、command（執(zhí)行命令）；3. 運(yùn)行任務(wù)可通過命令面板選擇“運(yùn)行任務(wù)”并選中對(duì)應(yīng)標(biāo)簽；4. 可集成ESLint或Prettier等工具，使用npx命令調(diào)用本地安裝的工具，并可設(shè)置自動(dòng)運(yùn)行、錯(cuò)誤匹配等功能；5. 支持傳遞參數(shù)及使用變量，如${file}表示當(dāng)前文件；6. 可設(shè)置任務(wù)自動(dòng)觸發(fā)，如調(diào)試前執(zhí)行任務(wù)或監(jiān)視文件變化自動(dòng)重跑任務(wù)；7. 需注意路徑、環(huán)境設(shè)置及終端兼容性問題。掌握這些核心配置后，能顯著提升開發(fā)效率。

If you're looking to streamline your workflow by running external tools directly from VS Code, using tasks is the way to go. It's not complicated once you understand how tasks.json works and how to structure basic commands.

Setting Up a Basic Task

The first step is to create or edit the tasks.json file in your .vscode folder. You can generate a default one by opening the Command Palette (Ctrl Shift P) and selecting "Tasks: Configure Task." This will often give you a starting point with a simple echo command.

Here’s what a minimal task looks like:

{
  "label": "Echo something",
  "type": "shell",
  "command": "echo Hello World"
}

• label: What shows up in the task list.
• type: Usually shell for most commands.
• command: The actual shell command you want to run.

Once saved, you can run this task via the Command Palette by choosing "Run Task" and selecting your label.

Running Tools Like ESLint or Prettier

Most developers want to integrate linters, formatters, or build tools. For example, if you're using ESLint installed locally in your project, a common setup would be:

{
  "label": "Run ESLint",
  "type": "shell",
  "command": "npx eslint ."
}

You might also want it to run automatically before saving or committing files. To do that, add these options:

"runOptions": {
  "reevaluateOnRerun": true
},
"problemMatcher": ["$eslint-stylish"],
"group": {
  "kind": "build",
  "isDefault": true
},
"detail": "Lints entire project"

This makes the task part of the default build group and adds error parsing so issues show up in the Problems tab.

Some things to note:

• Use npx for local tooling (npx eslint, npx prettier)
• Make sure your tool outputs are compatible with VS Code's problem matcher or they won’t show errors properly
• If you're on Windows and use PowerShell, sometimes switching "options": { "shell": { "executable": "cmd.exe", "args": ["/c"] } } helps avoid compatibility issues

Passing Arguments and Using Variables

Sometimes you need to pass dynamic values. VS Code supports built-in variables like ${file} (current open file), ${workspaceFolder}, and more.

Say you only want to format the current file with Prettier:

{
  "label": "Format Current File",
  "type": "shell",
  "command": "npx prettier --write ${file}"
}

Or maybe you want to pass an argument manually each time:

{
  "label": "Run Script with Arg",
  "type": "shell",
  "command": "node script.js customArgHere"
}

You can even prompt for input using ${input:variableName} and define inputs in the inputs section at the bottom of tasks.json.

Triggering Tasks Automatically

If you find yourself running certain tools every time you save or debug, consider hooking them into other actions.

To run a task before launching a debugger, open launch.json and add:

"preLaunchTask": "Run ESLint"

Or set up a watcher to re-run a task when files change:

"watch": true

Keep in mind:

• Watched tasks keep running in the background
• You may want to limit watched tasks to fast-running ones like linting
• Not all terminals support watch mode cleanly — some might hang unless configured correctly

基本上就這些。It takes a bit of trial and error, especially with paths and environment settings, but once you get a few core tasks working, it really boosts productivity.

以上是如何使用任務(wù)將外部工具集成到VS代碼中？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！