vs code配置任務運行器和自動化腳本的核心在于通過tasks.json文件定義任務以實現命令的自動執(zhí)行，從而提升開發(fā)效率。1. 打開命令面板選擇“tasks: configure task”并創(chuàng)建tasks.json文件；2. 根據需求選擇預設模板或自定義任務；3. 編輯tasks.json配置任務參數如label、command、args等；4. 使用內置變量（如${file}、${workspacefolder}）增強任務靈活性；5. 配置problemmatcher解析錯誤信息；6. 通過快捷鍵或擴展實現任務自動運行，例如保存時格式化代碼或運行測試。
VS Code配置任務運行器，本質上是為了讓你能在編輯器里直接運行各種腳本，省去切換到終端的麻煩。自動化腳本設置則是更進一步，讓這些任務按照你的需求自動執(zhí)行。
配置任務運行器，其實就是告訴VS Code，你想運行什么命令，以及怎么運行。而自動化腳本，則是讓這個運行過程更加智能。
解決方案
-
打開任務配置文件： 在VS Code中，按下 Ctrl+Shift+P (windows/linux) 或 Cmd+Shift+P (Mac) 打開命令面板，輸入 “Tasks: Configure Task”，然后選擇 “Create tasks.json from template”。
-
選擇任務模板： VS Code會提供一些預設的模板，例如 “npm”、”tsc”、”gulp” 等。如果你的任務屬于這些類型，直接選擇對應的模板即可。如果沒有合適的，選擇 “Others” 創(chuàng)建一個自定義任務。
-
編輯 tasks.json 文件： tasks.json 文件是配置任務的核心。以下是一個簡單的示例，用于運行一個 python 腳本：
{ "version": "2.0.0", "tasks": [ { "label": "Run Python Script", "type": "shell", "command": "python", "args": [ "${file}" ], "group": { "kind": "build", "isDefault": true }, "problemMatcher": [] } ] }- label: 任務的名稱，會在 VS Code 的任務列表中顯示。
- type: 任務的類型，常用的有 “shell” (執(zhí)行 shell 命令) 和 “process” (直接運行一個程序)。
- command: 要執(zhí)行的命令。
- args: 命令的參數。 ${file} 表示當前打開的文件。
- group: 將任務分組，可以設置為 “build”、”test” 等。 isDefault: true 表示這個任務是默認的構建任務。
- problemMatcher: 用于解析命令輸出中的錯誤和警告信息。
-
運行任務： 配置完成后，按下 Ctrl+Shift+B (Windows/Linux) 或 Cmd+Shift+B (Mac) 運行默認的構建任務，或者按下 Ctrl+Shift+P / Cmd+Shift+P，輸入 “Tasks: Run Task”，然后選擇你要運行的任務。
如何配置任務來自動格式化代碼？
自動化代碼格式化能省不少事。例如，使用 prettier 來格式化 JavaScript 代碼。
-
安裝 Prettier: 首先，確保你的項目安裝了 prettier。如果沒有，使用 npm install –save-dev prettier 或 yarn add –dev prettier 安裝。
-
配置任務: 在 tasks.json 中添加一個任務來運行 prettier。
{ "label": "format with Prettier", "type": "shell", "command": "prettier", "args": [ "--write", "${file}" ], "problemMatcher": [] }這個任務會使用 prettier –write 命令來格式化當前打開的文件。
-
設置文件保存時自動格式化: 打開 VS Code 的設置 (Ctrl+, 或 Cmd+,)，搜索 “format on save”，勾選 “Editor: Format On Save”。 或者在 settings.json 中添加：
{ "editor.formatOnSave": true }現在，每次保存文件時，VS Code 就會自動運行 prettier 格式化代碼。 如果希望只對特定類型的文件啟用自動格式化，可以配置 files.associations 和特定語言的設置。
如何配置任務來運行測試？
運行測試是另一個常見的自動化需求。以 Jest 為例：
-
安裝 Jest: 確保你的項目安裝了 Jest。如果沒有，使用 npm install –save-dev jest 或 yarn add –dev jest 安裝。
-
配置任務: 在 tasks.json 中添加一個任務來運行 Jest。
{ "label": "Run Jest Tests", "type": "shell", "command": "npm", "args": [ "test" ], "problemMatcher": [ "$jest" ] }這個任務會運行 npm test 命令，通常這個命令會在 package.json 中配置為運行 Jest。 problemMatcher: [“$jest”] 告訴 VS Code 使用 Jest 的 problem matcher 來解析測試結果。
-
運行測試: 你可以手動運行這個任務，或者配置 VS Code 在特定事件發(fā)生時自動運行測試。例如，可以使用一些 VS Code 擴展，如 “Run on Save”，來在保存文件時自動運行測試。
如何使用變量來配置任務？
VS Code 提供了很多內置變量，可以在 tasks.json 中使用。
- ${file}: 當前打開的文件的完整路徑。
- ${fileBasename}: 當前打開的文件名 (不包含路徑)。
- ${fileDirname}: 當前打開的文件所在的目錄。
- ${workspaceFolder}: 當前工作區(qū)的根目錄。
例如，你可以使用 ${workspaceFolder} 來指定一個相對于項目根目錄的腳本路徑：
{ "label": "Run Script in Project Root", "type": "shell", "command": "${workspaceFolder}/scripts/my-script.sh", "args": [], "problemMatcher": [] }
除了內置變量，還可以使用環(huán)境變量。 例如 ${env:MY_VARIABLE} 會讀取名為 MY_VARIABLE 的環(huán)境變量。 這在配置一些需要特定環(huán)境的任務時非常有用。
如何處理任務執(zhí)行中的錯誤？
problemMatcher 是 VS Code 用來解析任務輸出中的錯誤和警告信息的機制。 你可以使用預定義的 problem matcher，例如 “$gcc” (用于 GCC 編譯器) 或 “$jshint” (用于 JSHint)。 也可以自定義 problem matcher。
自定義 problem matcher 需要配置一個正則表達式來匹配錯誤信息，并指定哪些部分是文件名、行號、錯誤信息等。 例如，以下是一個簡單的 problem matcher，用于匹配 Python 編譯器的錯誤信息：
{ "problemMatcher": [ { "owner": "python", "severity": "error", "fileLocation": [ "relative", "${workspaceFolder}" ], "pattern": { "regexp": "^(.*):(d+):(d+): (.*)$", "file": 1, "line": 2, "column": 3, "message": 4 } } ] }
這個 problem matcher 會匹配類似 main.py:10:5: SyntaxError: invalid syntax 這樣的錯誤信息，并提取文件名、行號、列號和錯誤信息。
配置好 problem matcher 后，VS Code 會在任務執(zhí)行完成后，自動將錯誤和警告信息顯示在 “Problems” 面板中，方便你快速定位和修復問題。
