一区二区三区日韩精品-日韩经典一区二区三区-五月激情综合丁香婷婷-欧美精品中文字幕专区

分享

正確配置 Visual Studio Code 開發(fā)和調(diào)試 TypeScript

 中間件 2022-03-24

圖片描述

一、環(huán)境

  • 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

二、開發(fā) TypeScript

1、建立項目目錄

使用以下命令創(chuàng)建項目的目錄:

mkdir ts3
cd ts3
mkdir src
mkdir dist

建立好的目錄如下:

ts3
├─dist
└─src

2、初始化 NPM

在項目的根目錄下,執(zhí)行下面的命令:

npm init -y

現(xiàn)在項目結(jié)構(gòu)如下:

ts3
├─dist
└─src
└─package.json

3、安裝 TypeScript

在項目的根目錄下,執(zhí)行下面的命令:

npm i -g typescript

4、創(chuàng)建并配置 tsconfig.json

在項目的根目錄下,執(zhí)行下面的命令:

tsc --init

現(xiàn)在項目結(jié)構(gòu)如下:

ts3
├─dist
└─src
└─package.json
└─tsconfig.json

tsconfig.json 中取消下面屬性項的注釋,并修改其屬性的值:

這樣設(shè)置之后,我們在 ./src 中編碼 .ts 文件,.ts 文件編譯成 .js 后,輸出到 ./dist 中。
"outDir": "./dist",
"rootDir": "./src",

5、Hello Typescript

將下面代碼復(fù)制到./src/index.ts中:

const hello: string = 'hello, Alan.Tang';
console.log(hello);

在項目的根目錄下,執(zhí)行下面的命令:

tsc 是編譯命令,詳情查看:https://www./docs/handbook/typescript-in-5-minutes.html

tsc 的編譯選項,詳情查看:https://www./docs/handbook/compiler-options.html

tsc
node ./dist/index.js

執(zhí)行結(jié)果如下:

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 運行構(gòu)建任務(wù),將顯示以下選項:

圖片描述

選擇 tsc: 監(jiān)視 - tsconfig.json ,回車運行之后,編輯的代碼保存之后,就會自動編譯。

7、簡化運行命令

每次輸入 node ./dist/index.js 執(zhí)行代碼,有點麻煩,因為命令太長了。

在命令行界面,按鍵盤 切換歷史輸入命令,可以快速使用歷史輸入過的命令。

三、代碼檢查

代碼檢查主要是用來發(fā)現(xiàn)代碼錯誤、統(tǒng)一代碼風(fēng)格。

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

1、安裝 ESLint

ESLint 可以安裝在當(dāng)前項目中或全局環(huán)境下,因為代碼檢查是項目的重要組成部分,所以我們一般會將它安裝在當(dāng)前項目中。可以運行下面的腳本來安裝:

npm install eslint --save-dev

由于 ESLint 默認(rèn)使用 Espree 進(jìn)行語法解析,無法識別 TypeScript 的一些語法,故我們需要安裝 typescript-eslint-parser,替代掉默認(rèn)的解析器,別忘了同時安裝 typescript

npm install typescript typescript-eslint-parser --save-dev

由于 typescript-eslint-parser 對一部分 ESLint 規(guī)則支持性不好,故我們需要安裝 eslint-plugin-typescript,彌補一些支持性不好的規(guī)則。

npm install eslint-plugin-typescript --save-dev

現(xiàn)在項目結(jié)構(gòu)如下:

ts3
├─dist
└─node_modules
└─src
└─package-lock.json
└─package.json
└─tsconfig.json

2、創(chuàng)建配置文件 .eslintrc.js

ESLint 需要一個配置文件來決定對哪些規(guī)則進(jìn)行檢查,配置文件的名稱一般是 .eslintrc.js.eslintrc.json。

當(dāng)運行 ESLint 的時候檢查一個文件的時候,它會首先嘗試讀取該文件的目錄下的配置文件,然后再一級一級往上查找,將所找到的配置合并起來,作為當(dāng)前被檢查文件的配置。

在項目的根目錄下,執(zhí)行下面的命令:

創(chuàng)建配置文件
./node_modules/.bin/eslint --init

按需求,選擇相應(yīng)的選項:

您想如何使用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>反轉(zhuǎn)選擇)
? 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

您想遵循哪種風(fēng)格指南?
? 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
您想現(xiàn)在用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

現(xiàn)在項目結(jié)構(gòu)如下:

ts3
├─dist
└─node_modules
└─src
└─.eslintrc.js
└─package-lock.json
└─package.json
└─tsconfig.json

編輯 .eslintrc.js,增加 parser: 'typescript-eslint-parser', 替換掉默認(rèn)的解析器,使之識別 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 檢查,可以在開發(fā)過程中就發(fā)現(xiàn)錯誤,極大的增加了開發(fā)效率。

要在 VSCode 中集成 ESLint 檢查,我們需要先安裝 ESLint 插件,點擊「擴展」按鈕,搜索 ESLint,然后安裝即可。

VSCode 中的 ESLint 插件默認(rèn)是不會檢查 .ts 后綴的,需要在「文件 => 首選項 => 設(shè)置」中,添加以下配置:

{
  "eslint.validate": [
    "typescript"
  ]
}

將下面代碼復(fù)制到./src/index.ts中:

let num: number = 1;
if (num == 2) {
  console.log(num);
}

現(xiàn)在項目結(jié)構(gòu)如下:

ts3
├─dist
└─node_modules
└─src
  └─index.ts
└─.eslintrc.js
└─package-lock.json
└─package.json
└─tsconfig.json

現(xiàn)在編輯器,應(yīng)該會提示 4 個錯誤:

圖片描述

我們按照錯誤提示,修改成正確的代碼風(fēng)格:

console.log 一般是在調(diào)試階段使用,發(fā)布正式版本時,應(yīng)該移除。所以這里沒有提示紅色的致命錯誤,而是使用了警告。

圖片描述

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

將下面代碼復(fù)制到./src/index.ts中:

import Cat from './Cat';

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

將下面代碼復(fù)制到./src/Cat.ts中:

export default class Cat {
  private name: string;

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

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

現(xiàn)在項目結(jié)構(gòu)如下:

ts3
├─dist
└─node_modules
└─src
  └─Cat.ts
  └─index.ts
└─.eslintrc.js
└─package-lock.json
└─package.json
└─tsconfig.json

上述代碼復(fù)制粘貼,保存之后,會提示這樣的錯誤:

Unable to resolve path to module './Cat'.eslint(import/no-unresolved)

解決辦法是使用 eslint-import-resolver-alias ,先安裝依賴,執(zhí)行下面的命令:

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'],
      },
    },
  },
};

四、調(diào)試 TypeScript

如何 F5 開始調(diào)試 TypeScript ,并且還具備斷點調(diào)試功能,答案是,使用 TS-node。

詳情查看:https://github.com/TypeStrong/ts-node

在項目的根目錄下,執(zhí)行下面的命令:

npm install -D ts-node

VScode 調(diào)試中,添加配置:

{
  // 使用 IntelliSense 了解相關(guān)屬性。 
  // 懸停以查看現(xiàn)有屬性的描述。
  // 欲了解更多信息,請訪問: 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 開始愉快的調(diào)試吧,F9 是添加斷點:

圖片描述

五、參考文章

  1. 配置 Webpack resolve alias 簡化相對路徑 import
  2. eslint-import-resolver-alias
  3. ESLint入門
  4. ts-node
  5. 編譯選項
  6. 使用ts-node和vsc來調(diào)試TypeScript代碼
  7. 通過任務(wù)與外部工具集成
  8. vscode 調(diào)試 TypeScript
  9. ESLint
  10. 代碼檢查 · TypeScript 入門教程

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多

    久久精品欧美一区二区三不卡| 日本高清二区视频久二区| 国产亚洲欧美另类久久久| 国产又大又硬又粗又湿| 最近日韩在线免费黄片| 麻豆国产精品一区二区三区| 91欧美日韩国产在线观看| 欧美野外在线刺激在线观看| 污污黄黄的成年亚洲毛片| 黄色国产自拍在线观看| 99久久精品午夜一区| 99福利一区二区视频| 久久这里只精品免费福利| 色婷婷人妻av毛片一区二区三区 | 国产精品内射婷婷一级二级| 99香蕉精品视频国产版| 搡老妇女老熟女一区二区| 欧美日韩久久精品一区二区| 在线观看国产成人av天堂野外| 午夜激情视频一区二区| 国产成人亚洲欧美二区综| 国产超碰在线观看免费| 欧美一区二区在线日韩| 久久亚洲成熟女人毛片| 视频在线免费观看你懂的| 日韩不卡一区二区三区色图| 久久热中文字幕在线视频| 可以在线看的欧美黄片| 婷婷色网视频在线播放| 国产精品日韩精品最新| 精品一区二区三区三级视频| av中文字幕一区二区三区在线 | 亚洲中文字幕在线观看黑人| 亚洲一级二级三级精品| 日韩精品一级片免费看| 欧美日本精品视频在线观看| 天堂热东京热男人天堂| 亚洲国产成人av毛片国产| 日本女优一色一伦一区二区三区| 免费在线播放不卡视频| 日韩熟妇人妻一区二区三区|