正確配置 Visual Studio Code 開發和調試 TypeScript

時間  2019-11-07
標籤 正確 配置 visual studio code 開發 調試 typescript 欄目 Visual Studio 简体版
原文   原文鏈接

1、環境

  • 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

2、開發 TypeScript

一、創建項目目錄

使用如下命令建立項目的目錄：javascript

mkdir ts3
cd ts3
mkdir src
mkdir dist
複製代碼

創建好的目錄以下：html

ts3
├─dist
└─src
複製代碼

二、初始化 NPM

在項目的根目錄下，執行下面的命令：java

npm init -y
複製代碼

如今項目結構以下：node

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

三、安裝 TypeScript

在項目的根目錄下，執行下面的命令：git

npm i -g typescript
複製代碼

四、建立並配置 tsconfig.json

在項目的根目錄下，執行下面的命令：es6

tsc --init
複製代碼

如今項目結構以下：github

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

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

這樣設置以後，咱們在 ./src 中編碼 .ts 文件，.ts 文件編譯成 .js 後，輸出到 ./dist 中。npm

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

五、Hello Typescript

將下面代碼複製到./src/index.ts中：json

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
複製代碼

六、使用自動實時編譯

手動編譯仍是比較麻煩，若是可以保存代碼後，自動編譯就行了。

詳情查看：https://go.microsoft.com/fwlink/?LinkId=733558

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

選擇 tsc: 監視 - tsconfig.json ，回車運行以後，編輯的代碼保存以後，就會自動編譯。

七、簡化運行命令

每次輸入 node ./dist/index.js 執行代碼，有點麻煩，由於命令太長了。

在命令行界面，按鍵盤 ↑ 切換歷史輸入命令，能夠快速使用歷史輸入過的命令。

3、代碼檢查

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

詳情查看：https://ts.xcatliu.com/engineering/lint.html

一、安裝 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
複製代碼

二、建立配置文件 .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: {
  },
};
複製代碼

三、在 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 個錯誤：

咱們按照錯誤提示，修改爲正確的代碼風格：

console.log 通常是在調試階段使用，發佈正式版本時，應該移除。因此這裏沒有提示紅色的致命錯誤，而是使用了警告。

四、沒法解析到模塊的路徑

將下面代碼複製到./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'],
      },
    },
  },
};
複製代碼

4、調試 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"
      ]
    }
  ]
}
複製代碼

按 F5 開始愉快的調試吧，F9 是添加斷點：

5、參考文章

  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 入門教程
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程