vsCode怎么為一個前端項目配置ts的運行環境

vsCode為一個前端項目配置ts的運行環境，ts文件保存的時候自動編譯成js文件：

假設此前端項目名稱為Web：文件結構如圖

1. 在根目錄中新建一個“.vscode”文件夾，里面建一個“tasks.json”文件，內容為：

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "args": ["-w", "-p", "."],
    "showOutput": "silent",
    "isWatching": true,
    "problemMatcher": "$tsc-watch"
}

升級后：

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "type": "typescript",
            "tsconfig": "tsconfig.json",
            "isBackground": true,
            "problemMatcher": [
                "$tsc-watch"
            ],
        }
    ]
}

 

2. 在根目錄下建一個“tsconfig.json”文件，內容為：

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
    "module": "amd",                     /* Specify module code generation: 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "lib": [
            "dom",
            "es2015.promise",
            "es5"
        ],                             /* Specify library files to be included in the compilation:  */
     "sourceMap": true,                     /* Generates corresponding '.map' file. */
     "noImplicitAny": false,                 /* Raise error on expressions and declarations with an implied 'any' type. */
    /* Module Resolution Options */
     "moduleResolution": "node",           /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
     "baseUrl": "." ,                      /* Base directory to resolve non-absolute module names. */
　　　"noEmit": true                       /* Do not emit outputs. */  // 新加，這一項意思是只編譯.ts文件，但是不生成.js文件（我這里是vue項目糾錯使用）

  }
}

3. vsCode中按快捷鍵“ctrl+shift+B”頂部選擇   tsc:構建-tsconfig.json

 

 注意：配置文件根據自己需要進行修改，添加的文件地址：  https://pan.baidu.com/s/1hsvht20

參考：配置完成后文件結構：