VScode任務(wù)配置(task.json與launch.json)及異常詳解

更新時間：2025年05月08日 11:42:35 作者：trayvontang

這篇文章主要介紹了VScode任務(wù)配置(task.json與launch.json)及異常的相關(guān)資料,tasks.json用于配置自動化任務(wù),如編譯、構(gòu)建、執(zhí)行腳本等,而launch.json用于配置調(diào)試器,需要的朋友可以參考下

簡介

vscode非常強大，有很多可以自定義的東西，但是也不容易上手，例如搭建一個新環(huán)境是如何配置運行程序。

本篇文章就將詳細(xì)說明vscode的如何配置任務(wù)來完成編譯等操作，如何配置launch來debug。

tasks.json：配置和管理自動化任務(wù)，如編譯、構(gòu)建、運行腳本…
launch.json：配置調(diào)試器，定義調(diào)試會話的啟動和運行參數(shù)

task

可以配置功能

編譯代碼：用javac、gcc、tsc編譯工具編譯代碼
執(zhí)行腳本：執(zhí)行shell、Python、bat腳本
構(gòu)建項目：用Maven、Make、Gradle等構(gòu)建工具構(gòu)建腳本
其他任務(wù)：清理生成文件、打包、上傳…

task配置的是命令，所以它可以非常靈活，可以看作是一個執(zhí)行腳本的快捷方式。

參數(shù)說明

參數(shù)	說明
label	任務(wù)名稱，標(biāo)識，以便于執(zhí)行的時候知道是哪一個任務(wù)
type	任務(wù)類型，shell、process、typescript，shell通常是腳本如python、bat、各種命令，process作為獨立的進(jìn)程運行
command	執(zhí)行的命令，gcc、javac、python、ps、echo等命令
args	命令的參數(shù)，數(shù)組
group	任務(wù)分組，build(構(gòu)建)、test(測試)
presentation	控制任務(wù)輸出的呈現(xiàn)方式，例如是否顯示在終端中，是否清除之前的輸出等
problemMatcher	配置錯誤和警告的匹配器，用于從任務(wù)輸出中解析錯誤和警告，vscode內(nèi)置g c c 、 gcc、gcc、eslint
options	任務(wù)執(zhí)行的選項，環(huán)境變量、當(dāng)前工作目錄等
dependsOn	任務(wù)依賴，數(shù)組[“task-a”,“task-c”] 任務(wù)運行前先執(zhí)行依賴任務(wù)
dependsOrder	依賴執(zhí)行順序，sequence按照"dependsOn任務(wù)列表順序執(zhí)行
shell	配置執(zhí)行shell終端，cmd、git，如在Windows下不能執(zhí)行shell腳本，可以配置git來執(zhí)行

type的一個作用就可以根據(jù)文件匹配，例如在ts文件中按F5進(jìn)行debug，vscode就知道去找type支持ts的task，例如typescript。

默認(rèn)會去找group配置為kind為build，isDefault為true的task，如果有多個，就會讓手動選擇。

presentation參數(shù):

echo: 是否輸出執(zhí)行的command，默認(rèn)ture
reveal: 輸出面板控制，never、silent、always，是否在用戶界面顯示輸出，默認(rèn)always
focus:顯示任務(wù)輸出的面板是否處于焦點狀態(tài)，默認(rèn)false
panel: 面板控制，shared默認(rèn)，共享； dedicated專用；new每次任務(wù)創(chuàng)建新面板
“showReuseMessage”: true-顯示重用消息
“clear”: false-不清除之前的輸出

task外部程序示例

task中也可以單獨指定執(zhí)行shell的終端

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "task-測試shell",
            "type": "shell",
            "group": {
                "kind": "build",
                "isDefault": true,
            },
            "command": "ls",
            "args": [
                "-al"
            ],
            "options": {
                "cwd": "${workspaceFolder}",
                "shell": {
                    "executable": "E:\\tool\\Git\\bin\\bash.exe",
                    "args": [
                        "-c"
                    ]
                }
            }
        }
    ]
}

前面介紹了task可以通過F5調(diào)試的方式匹配執(zhí)行。

還可以Ctrl+F8手動執(zhí)行。

還可以在Terminal菜單選擇Run Task來執(zhí)行。

task輸入?yún)?shù)示例

task也可以交互輸入?yún)?shù)，又2中方式：

一種是配置選項，運行是下拉選擇pickString
一種是手動輸入，promptString

pickString參數(shù)：

description：變量說明
options：可選項數(shù)組
default：默認(rèn)值。它必須在options中

promptString參數(shù)：

description：變量說明
default：默認(rèn)值
password：是否是密碼，如果是輸入用*代替

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "task-測試變量輸入",
            "type": "shell",
            "windows": { //windows下執(zhí)行操作
                "command": "echo",
                "args": [
                    "下拉參數(shù):${input:manual_pick}",
                    "輸入?yún)?shù):${input:manual_input}"
                ]
            },
            "group": {
                "kind": "build",
                "isDefault": true,
            },
        }
    ],
    "inputs": [
        {
            "id": "manual_pick",
            "type": "pickString", //"輸入?yún)?shù)類型: 挑選預(yù)設(shè)的選項",
            "default": "選項B",
            "options": [
                "選項A",
                "選項B",
                "選項C",
                "選項D"
            ],
            "description": "task輸入?yún)?shù)預(yù)設(shè),執(zhí)行時下拉選擇",
        },
        {
            "id": "manual_input",
            "type": "promptString", // 輸入?yún)?shù)類型: 直接輸入的字符串
            "password": false, // 如果是true,表示密碼用*表示
            "default": "你干嘛啊!", // 默認(rèn)字符串
            "description": "task參數(shù)手動輸入",
        },
    ],
}

task內(nèi)置參數(shù)示例

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "task-測試vscode內(nèi)置變量",
            "type": "shell",
            "command": "print.sh",
            "args": [
                "workspaceFolder=${workspaceFolder}",
                "workspaceFolderBasename=${workspaceFolderBasename}",
                "file=${file}",
                "fileWorkspaceFolder=${fileWorkspaceFolder}",
                "relativeFile=${relativeFile}",
                "relativeFileDirname=${relativeFileDirname}",
                "fileBasename=${fileBasename}",
                "fileBasenameNoExtension=${fileBasenameNoExtension}",
                "fileExtname=${fileExtname}",
                "fileDirname=${fileDirname}",
                "fileDirnameBasename=${fileDirnameBasename}"
            ],
            "options": {
                "shell": {
                    "executable": "E:\\tool\\Git\\bin\\sh.exe",
                    "args": [
                        "-i"
                    ]
                }
            },
            "presentation": {
                "echo": true, // 顯示命令  
                "reveal": "always", // 顯示輸出面板  
                "focus": false, // 不自動聚焦輸出面板  
                "panel": "new", // 共享輸出面板  
                "showReuseMessage": true, // 顯示重用消息  
                "clear": false // 不清除之前的輸出  
            },
            "group": {
                "kind": "build",
                "isDefault": true,
            },
        }
    ]
}

for arg in "$@"; do
  echo "$arg"
done

更多參數(shù)說明請查看官方文檔

任務(wù)依賴關(guān)系

我們把前面整合起來，來看一下任務(wù)的依賴設(shè)置：

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "task-運行腳本",
            "type": "shell",
            "options": {
                "cwd": "${workspaceFolder}",
            },
            "windows": {
                "command": "base.bat",
                "args": [
                    "參數(shù)1",
                    "參數(shù)2"
                ],
            },
            "group": {
                "kind": "build",
                "isDefault": true,
            },
            "dependsOrder": "sequence",
            "dependsOn": [
                "task-測試變量輸入",
                "task-測試shell",
                "task-測試vscode內(nèi)置變量"
            ]
        },
        {
            "label": "task-測試變量輸入",
            "type": "shell",
            "group": "build",
            "windows": { //windows下執(zhí)行操作
                "command": "echo",
                "args": [
                    "下拉參數(shù):${input:manual_pick}",
                    "輸入?yún)?shù):${input:manual_input}"
                ]
            }
        },
        {
            "label": "task-測試shell",
            "type": "shell",
            "group": "build",
            "command": "ls",
            "args": [
                "-al"
            ],
            "options": {
                "cwd": "${workspaceFolder}",
                "shell": {
                    "executable": "E:\\tool\\Git\\bin\\bash.exe",
                    "args": [
                        "-c"
                    ]
                }
            }
        },
        {
            "label": "task-測試vscode內(nèi)置變量",
            "type": "shell",
            "command": "print.sh",
            "args": [
                "workspaceFolder=${workspaceFolder}",
                "workspaceFolderBasename=${workspaceFolderBasename}",
                "file=${file}",
                "fileWorkspaceFolder=${fileWorkspaceFolder}",
                "relativeFile=${relativeFile}",
                "relativeFileDirname=${relativeFileDirname}",
                "fileBasename=${fileBasename}",
                "fileBasenameNoExtension=${fileBasenameNoExtension}",
                "fileExtname=${fileExtname}",
                "fileDirname=${fileDirname}",
                "fileDirnameBasename=${fileDirnameBasename}"
            ],
            "options": {
                "shell": {
                    "executable": "E:\\tool\\Git\\bin\\sh.exe",
                    "args": [
                        "-i"
                    ]
                }
            }
        }
    ],
    "inputs": [
        {
            "id": "manual_pick",
            "type": "pickString", //"輸入?yún)?shù)類型: 挑選預(yù)設(shè)的選項",
            "default": "選項B",
            "options": [
                "選項A",
                "選項B",
                "選項C",
                "選項D"
            ],
            "description": "task輸入?yún)?shù)預(yù)設(shè),執(zhí)行時下拉選擇",
        },
        {
            "id": "manual_input",
            "type": "promptString", // 輸入?yún)?shù)類型: 直接輸入的字符串
            "password": false, // 如果是true,表示密碼用*表示
            "default": "你干嘛啊!", // 默認(rèn)字符串
            "description": "task參數(shù)手動輸入",
        },
    ],
}

@echo off
echo "打印所有命令行參數(shù)"
for %%i in (%*) do (
    echo %%i
)

launch

launch用來配置debug，常用參數(shù)：

name: 配置名稱，便于區(qū)分就可以
type: 調(diào)試器類型，python、cppdbg、node、java
request: 調(diào)試請求類型，launch、attach
program: 要調(diào)試的程序路徑或文件
args: 傳遞給程序的命令行參數(shù)，數(shù)組形式
cwd: 當(dāng)前工作目錄
env: 環(huán)境變量設(shè)置
sourceMaps: 是否啟用源映射(JavaScript、TypeScript)
preLaunchTask: 調(diào)試前要執(zhí)行的任務(wù)，通常是編譯任務(wù)
postDebugTask: 調(diào)試結(jié)束后要執(zhí)行的任務(wù)
stopOnEntry: 是否在程序入口處停止。
console: 控制臺類型integratedTerminal、externalTerminal、internalConsole

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "debug-Go程序", // 名稱可以在debug面板中看到區(qū)分
            "type": "go", // 定義調(diào)試器的類型
            "request": "launch", 
            "program": "${file}", // 待調(diào)試的可執(zhí)行程序的路徑
            "args": [], // 設(shè)置可執(zhí)行程序所需要的參數(shù)
            "stopAtEntry": false, // 程序不會再入口點處停止(即main函數(shù))，從頭運行到結(jié)束或設(shè)置的斷點處
            "cwd": "${workspaceFolder}", // 設(shè)置當(dāng)前的工作目錄
            "environment": [], // 設(shè)置調(diào)試的環(huán)境變量
            "externalConsole": false, // 不使用外部控制臺，調(diào)試輸出將顯示在內(nèi)置的調(diào)試控制臺中
            "preLaunchTask": "go-build" // tasks.json創(chuàng)建的任務(wù)中的label匹配
        } 
    ]
}

配置TyepScript的task和launch

首先我們來看一下完整的目錄結(jié)構(gòu)：

task.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "編譯TS項目",
            "type": "typescript",
            "tsconfig": "tsconfig.json",
            "problemMatcher": [
                "$tsc"
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
}

注意type是typescript，特殊的，可以指定任務(wù)配置文件

tsconfig.json

這個是typescript的配置文件。

{
    "compilerOptions": {
        "target": "ES2016",
        "module": "CommonJS",
        "outDir": "dist",
        "sourceMap": true
    }
}

outDir是編譯之后的JS文件目錄。

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "調(diào)試當(dāng)前TS",
            "type": "node",
            "request": "launch",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${file}",
            "preLaunchTask": "編譯TS項目",
            "outFiles": [
                "${workspaceFolder}/dist/**/*.js"
            ]
        }
    ]
}

type是node，program要執(zhí)行的文件，這里配置的是當(dāng)前文件，可以配置為固定路徑的入口文件。

outFiles配置的是編譯之后的JS文件，就是要執(zhí)行的文件，如果不配或者找不到，執(zhí)行的是program的ts文件，有問題，所以一定要檢查是否正確。

Debug

我們可以在debug中看到launch的name，終端中的task tab中看到task的label。

代碼文件

入口文件main.ts

// import tarray = require("./ts-array");
// import amap = require('./ts-map');
import { getArray } from "./ts-array";
import * as amap from "./ts-map";

// let array: string[] = tarray.getArray();
let array: string[] = getArray();
array.forEach(function (value) {
    console.log(value);
})

amap.testMapIter();
amap.testMapBaseFun();

測試文件：

export {getArray}

function getArray(): string[] {
    return new Array("Java", "Go", "C++", "Rust", "Python", "C", "PHP", "SQL", "TypeScript");
  }
  
  function testArrayBase() {
    let array: string[];
    array = getArray();
    console.log(array[0]);
    console.log(array[1]);
  
    let nums: number[] = [1, 2, 3, 4]
    console.log(nums[0]);
    console.log(nums[1]);
    console.log(nums[2]);
    console.log(nums[3]);
  }
  
  function testArrayLength() {
    let nums = new Array(4);
    for (let i = 0; i < nums.length; i++) {
      nums[i] = i * 2;
  
    }
  
    for (let i in nums) {
      console.log(nums[i]);
    }
  
    var language = getArray();
    for (var i = 0; i < language.length; i++) {
      console.log(language[i]);
    }
  }
  
  testArrayBase();
  testArrayLength();

export {testMapBaseFun,testMapIter}

function testMapIter() {
    let map = new Map();
  
    map.set("Java", 1);
    map.set("C++", 2);
    map.set("Go", 3);
  
    // 迭代 Map 中的 key
    for (let key of map.keys()) {
      console.log(key);
    }
  
    // 迭代 Map 中的 value
    for (let value of map.values()) {
      console.log(value);
    }
  
    // 迭代 Map 中的 key => value
    for (let entry of map.entries()) {
      console.log(entry[0], entry[1]);
    }
  
    // 使用對象解析
    for (let [key, value] of map) {
      console.log(key, value);
    }
  }
  
  function testMapBaseFun() {
    let map = new Map();
  
    map.set("Java", 1);
    map.set("C++", 2);
    map.set("Go", 3);
  
    // 獲取鍵對應(yīng)的值
    console.log(map.get("Go"));
  
    // 判斷 Map 中是否包含鍵對應(yīng)的值
    console.log(map.has("Python"));
    console.log(map.has("Java"));
  
    // 返回 Map 對象鍵/值對的數(shù)量
    console.log(map.size);
  
    // 刪除元素，刪除成功返回true
    console.log(map.delete("Go"));
    console.log(map);
    // 移除 Map 對象的所有鍵/值對
    map.clear();
    console.log(map);
  }
  
  testMapIter();
  testMapBaseFun();

更多配置可以參考官網(wǎng)

異常情況

powershell不能用的情況：

Executing task: tsc -p d:\project\front\ts\tsconfig.json 

tsc : 無法加載文件 E:\language\nodejs16\node_global\tsc.ps1，因為在此系統(tǒng)上禁止運行腳本。
有關(guān)詳細(xì)信息，請參閱 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ tsc -p d:\project\front\ts\tsconfig.json
+ ~~~
    + CategoryInfo          : SecurityError: (:) []，PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

The terminal process "C:\WINDOWS\System32\WindowsPowerShell\v1.0\powershell.exe -Command tsc -p d:\project\front\ts\tsconfig.json" terminated with exit code: 1. 
Terminal will be reused by tasks, press any key to close it.

我們在vscode終端不能打開中已經(jīng)有過一點介紹。

我們知道默認(rèn)使用的終端也是settings.json中配置:

"terminal.integrated.defaultProfile.windows": "Command Prompt"

總結(jié)

到此這篇關(guān)于VScode任務(wù)配置(task.json與launch.json)及異常的文章就介紹到這了,更多相關(guān)VScode任務(wù)配置task.json與launch.json內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: