正確配置 Visual Studio Code 開發和除錯 TypeScript

唐金健發表於2019-04-06
除錯TypeScript

一、環境

  • Node.js v10.15.3
  • npm 6.9.0
  • Visual Studio Code 1.33.0 (user setup)
  • 2019/4/6
  • Koa2-Node.js QQ群：481973071

二、開發 TypeScript

1、建立專案目錄

使用以下命令建立專案的目錄：

mkdir ts3
cd ts3
mkdir src
mkdir dist
複製程式碼

建立好的目錄如下：

ts3
├─dist
└─src
複製程式碼

2、初始化 NPM

在專案的根目錄下，執行下面的命令：

npm init -y
複製程式碼

現在專案結構如下：

ts3
├─dist
└─src
└─package.json
複製程式碼

3、安裝 TypeScript

在專案的根目錄下，執行下面的命令：

npm i -g typescript
複製程式碼

4、建立並配置 tsconfig.json

在專案的根目錄下，執行下面的命令：

tsc --init
複製程式碼

現在專案結構如下：

ts3
├─dist
└─src
└─package.json
└─tsconfig.json
複製程式碼

在 tsconfig.json 中取消下面屬性項的註釋，並修改其屬性的值：

這樣設定之後，我們在 ./src 中編碼 .ts 檔案，.ts 檔案編譯成 .js 後，輸出到 ./dist 中。

"outDir": "./dist",
"rootDir": "./src",
複製程式碼

5、Hello Typescript

將下面程式碼複製到./src/index.ts中：

const hello: string = 'hello, Alan.Tang';
console.log(hello);
複製程式碼

在專案的根目錄下，執行下面的命令：

tsc 是編譯命令，詳情檢視：https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html

tsc 的編譯選項，詳情檢視：https://www.tslang.cn/docs/handbook/compiler-options.html

tsc
node ./dist/index.js

複製程式碼

執行結果如下：

PS C:\Users\Alan\TestCode\ts3> tsc
PS C:\Users\Alan\TestCode\ts3> node ./dist/index.js
hello, Alan.Tang
複製程式碼

6、使用自動實時編譯

手動編譯還是比較麻煩，如果能夠儲存程式碼後，自動編譯就好了。

詳情檢視：https://go.microsoft.com/fwlink/?LinkId=733558

Ctrl + Shift + B 執行構建任務，將顯示以下選項：

正確配置 Visual Studio Code 開發和除錯 TypeScript

選擇 tsc: 監視 - tsconfig.json ，回車執行之後，編輯的程式碼儲存之後，就會自動編譯。

7、簡化執行命令

每次輸入 node ./dist/index.js 執行程式碼，有點麻煩，因為命令太長了。

在命令列介面，按鍵盤 ↑ 切換歷史輸入命令，可以快速使用歷史輸入過的命令。

三、程式碼檢查

程式碼檢查主要是用來發現程式碼錯誤、統一程式碼風格。

詳情檢視：https://ts.xcatliu.com/engineering/lint.html

1、安裝 ESLint

ESLint 可以安裝在當前專案中或全域性環境下，因為程式碼檢查是專案的重要組成部分，所以我們一般會將它安裝在當前專案中。可以執行下面的指令碼來安裝：

npm install eslint --save-dev
複製程式碼

由於 ESLint 預設使用 Espree 進行語法解析，無法識別 TypeScript 的一些語法，故我們需要安裝 typescript-eslint-parser，替代掉預設的解析器，別忘了同時安裝 typescript：

npm install typescript typescript-eslint-parser --save-dev
複製程式碼

由於 typescript-eslint-parser 對一部分 ESLint 規則支援性不好，故我們需要安裝 eslint-plugin-typescript，彌補一些支援性不好的規則。

npm install eslint-plugin-typescript --save-dev
複製程式碼

現在專案結構如下：

ts3
├─dist
└─node_modules
└─src
└─package-lock.json
└─package.json
└─tsconfig.json
複製程式碼

2、建立配置檔案 .eslintrc.js

ESLint 需要一個配置檔案來決定對哪些規則進行檢查，配置檔案的名稱一般是 .eslintrc.js 或 .eslintrc.json。

當執行 ESLint 的時候檢查一個檔案的時候，它會首先嚐試讀取該檔案的目錄下的配置檔案，然後再一級一級往上查詢，將所找到的配置合併起來，作為當前被檢查檔案的配置。

在專案的根目錄下，執行下面的命令：

建立配置檔案

./node_modules/.bin/eslint --init
複製程式碼

按需求，選擇相應的選項：

您想如何使用ESLint?
? How would you like to use ESLint?
To check syntax, find problems, and enforce code style

您的專案使用什麼型別的模組?
? What type of modules does your project use?
JavaScript modules (import/export)

您的專案使用哪個框架?
? Which framework does your project use?
None of these

你的程式碼在哪裡執行?(按<space>選擇，<a>切換所有，<i>反轉選擇)
? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection)
Node

您想如何為您的專案定義一個樣式?
? How would you like to define a style for your project?
Use a popular style guide

您想遵循哪種風格指南?
? Which style guide do you want to follow?
Airbnb (https://github.com/airbnb/javascript)

您希望配置檔案的格式是什麼?
? What format do you want your config file to be in?
JavaScript

Checking peerDependencies of eslint-config-airbnb-base@latest
您所選擇的配置需要以下依賴項:
The config that you've selected requires the following dependencies:

eslint-config-airbnb-base@latest eslint@^4.19.1 || ^5.3.0 eslint-plugin-import@^2.14.0
您想現在用npm安裝它們嗎?
? Would you like to install them now with npm?
Yes

Installing eslint-config-airbnb-base@latest, eslint@^4.19.1 || ^5.3.0, eslint-plugin-import@^2.14.0
npm WARN ts3@1.0.0 No description
npm WARN ts3@1.0.0 No repository field.

+ eslint-config-airbnb-base@13.1.0
+ eslint-plugin-import@2.16.0
+ eslint@5.16.0
added 53 packages from 37 contributors, updated 1 package and audited 286 packages in 10.303s
found 0 vulnerabilities

Successfully created .eslintrc.js file in C:\Users\Alan\TestCode\ts3
複製程式碼

現在專案結構如下：

ts3
├─dist
└─node_modules
└─src
└─.eslintrc.js
└─package-lock.json
└─package.json
└─tsconfig.json
複製程式碼

編輯 .eslintrc.js，增加 parser: 'typescript-eslint-parser', 替換掉預設的解析器，使之識別 TypeScript 的一些語法，如下面所示：

module.exports = {
  parser: 'typescript-eslint-parser',
  env: {
    es6: true,
    node: true,
  },
  extends: 'airbnb-base',
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  rules: {
  },
};
複製程式碼

3、在 VSCode 中整合 ESLint 檢查

在編輯器中整合 ESLint 檢查，可以在開發過程中就發現錯誤，極大的增加了開發效率。

要在 VSCode 中整合 ESLint 檢查，我們需要先安裝 ESLint 外掛，點選「擴充套件」按鈕，搜尋 ESLint，然後安裝即可。

VSCode 中的 ESLint 外掛預設是不會檢查 .ts 字尾的，需要在「檔案 => 首選項 => 設定」中，新增以下配置：

{
  "eslint.validate": [
    "typescript"
  ]
}
複製程式碼

將下面程式碼複製到./src/index.ts中：

let num: number = 1;
if (num == 2) {
  console.log(num);
}
複製程式碼

現在專案結構如下：

ts3
├─dist
└─node_modules
└─src
  └─index.ts
└─.eslintrc.js
└─package-lock.json
└─package.json
└─tsconfig.json
複製程式碼

現在編輯器，應該會提示 4 個錯誤：

正確配置 Visual Studio Code 開發和除錯 TypeScript

我們按照錯誤提示，修改成正確的程式碼風格：

console.log 一般是在除錯階段使用，釋出正式版本時，應該移除。所以這裡沒有提示紅色的致命錯誤，而是使用了警告。

正確配置 Visual Studio Code 開發和除錯 TypeScript

4、無法解析到模組的路徑

將下面程式碼複製到./src/index.ts中：

import Cat from './Cat';

const kitty: Cat = new Cat('kitty');
kitty.say();

複製程式碼

將下面程式碼複製到./src/Cat.ts中：

export default class Cat {
  private name: string;

  constructor(name: string) {
    this.name = name;
  }

  say() {
    console.log(this.name);
  }
}

複製程式碼

現在專案結構如下：

ts3
├─dist
└─node_modules
└─src
  └─Cat.ts
  └─index.ts
└─.eslintrc.js
└─package-lock.json
└─package.json
└─tsconfig.json
複製程式碼

上述程式碼複製貼上，儲存之後，會提示這樣的錯誤：

Unable to resolve path to module './Cat'.eslint(import/no-unresolved)
複製程式碼

解決辦法是使用 eslint-import-resolver-alias ，先安裝依賴，執行下面的命令：

npm install eslint-plugin-import eslint-import-resolver-alias --save-dev
複製程式碼

然後，在 .eslintrc.js 配置中，編輯成如下程式碼：

module.exports = {
  parser: 'typescript-eslint-parser',
  env: {
    browser: true,
    es6: true,
  },
  extends: 'airbnb-base',
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  rules: {
  },
  settings: {
    'import/resolver': {
      alias: {
        map: [
          ['@', './src']
        ],
        extensions: ['.ts'],
      },
    },
  },
};
複製程式碼

四、除錯 TypeScript

如何 F5 開始除錯 TypeScript ，並且還具備斷點除錯功能，答案是，使用 TS-node。

詳情檢視：https://github.com/TypeStrong/ts-node

在專案的根目錄下，執行下面的命令：

npm install -D ts-node
複製程式碼

在 VScode 除錯中，新增配置：

{
  // 使用 IntelliSense 瞭解相關屬性。 
  // 懸停以檢視現有屬性的描述。
  // 欲瞭解更多資訊，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "runtimeArgs": [
        "-r",
        "ts-node/register"
      ],
      "args": [
        "${workspaceFolder}/src/index.ts"
      ]
    }
  ]
}
複製程式碼

正確配置 Visual Studio Code 開發和除錯 TypeScript

按 F5 開始愉快的除錯吧，F9 是新增斷點：

正確配置 Visual Studio Code 開發和除錯 TypeScript

五、參考文章

  1. 配置 Webpack resolve alias 簡化相對路徑 import
  2. eslint-import-resolver-alias
  3. ESLint入門
  4. ts-node
  5. 編譯選項
  6. 使用ts-node和vsc來除錯TypeScript程式碼
  7. 通過任務與外部工具整合
  8. vscode 除錯 TypeScript
  9. ESLint
  10. 程式碼檢查 · TypeScript 入門教程

相關文章