腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

ESLint規(guī)范TypeScript代碼使用方法

更新時間：2022年11月17日 15:30:23 作者：鋼蛋

這篇文章主要為大家介紹了ESLint規(guī)范TypeScript代碼使用方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前導(dǎo)

ESLint 是一種 JavaScript linter，可以用來規(guī)范 JavaScript 或 TypeScript 代碼，本文教你怎么在項目中快速把 ESLint 安排上。

怎么寫出優(yōu)雅的代碼是一個老生常談的話題，這其中包含了太多內(nèi)容可聊，但搞一套標(biāo)準(zhǔn)規(guī)范絕對是萬里長征第一步。ESLint 致力于如何把規(guī)范落地到你的項目中，讓你的代碼清清爽爽。

ESLint 作為一種 JavaScript linter，它能強制幫你遵循一套特定的代碼書寫風(fēng)格和標(biāo)準(zhǔn)，并且會在不符合標(biāo)準(zhǔn)的地方貼心地給出提示。

你可能也聽說過 TSLint，很可（不）惜（錯），已經(jīng)掛了。原因是考慮到 ESLint 的存在，并且兩個項目之間存在大量的重復(fù)工作，TSLint 團(tuán)隊在 2019 年宣布不再維護(hù)該項目。

也就是說，你可能會搜到很多已存的 TSLint 周邊生態(tài)包，但在使用之前，你得掂量一下，它們可是沒有人在維護(hù)了哦。

所以，ESLint 就成為了事實上的標(biāo)準(zhǔn)，幫你規(guī)范 JavaScript 和 TypeScript 代碼。

安裝依賴

在你的工程下運行下面的代碼，安裝 ESLint 及其它依賴包

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

.eslintrc.js

創(chuàng)建 .eslintrc.js 文件

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ]
}

.eslintignore

再建一個忽略文件 .eslintignore，忽略不想加入限制的文件，比如 node_modules，打包產(chǎn)物文件等

node_modules
dist

package.json scripts

在 package.json 文件中新建一條 lint 命令

{
  "scripts": {
    ...
    "lint": "eslint . --ext .ts",
  }
}

執(zhí)行 npm run lint 試試看

假如我們的工程下只有 index.ts 文件，內(nèi)容如下

console.log('Hello world!')

因為我們目前還沒有創(chuàng)建任何規(guī)則，所以看不出什么變化。

Rules

eslint 的 rules 有三種模式，off，on 和 warn

"off" means 0 (turns the rule off completely)

"warn" means 1 (turns the rule on but won't make the linter fail)

"error" means 2 (turns the rule on and will make the linter fail)

如果想禁用 console，可以這樣設(shè)置

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": { 
    "no-console": 2 // Remember, this means error!  }
}

再運行 npm run lint

2:1  error  Unexpected console statement  no-console
    ? 1 problem (1 error, 0 warnings)

lint 報錯了...

關(guān)掉 no-console

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": {     "no-console": 0 
  }
}

npm run lint

世界安靜了...

fix

我們可以利用 ESLint 的 fix 功能，自動修復(fù)報 warn 或 error 的代碼

改造一下 package.json

{
  "scripts": {
    ...
    "lint": "eslint . --ext .ts",
    "lint-and-fix": "eslint . --ext .ts --fix"  },
}

運行 npm run lint-and-fix 可以檢查和自動修復(fù)有問題代碼

聊一聊原理

parser

ESLint 原理需要結(jié)合 parser 配置項來講。

首先，ESLint 為什么需要一個解析器？ 簡單來講，ESLint 做規(guī)則校驗的前提是將語言轉(zhuǎn)變?yōu)槌橄笳Z法樹（AST），它的校驗規(guī)則是用于適配 AST 的，在遍歷 AST 節(jié)點的過程中，找到該節(jié)點適配的規(guī)則，并判斷是否滿足規(guī)則。

plugins

ESLint 能火起來的很大原因，在于它的插件式設(shè)計，這種設(shè)計使得他能快速的響應(yīng)變化。插件是什么？插件就是規(guī)則，任何插件想要在 ESLint 中生效，需要規(guī)定兩點內(nèi)容。

該規(guī)則針對的是 AST 的那些節(jié)點。
該節(jié)點需要滿足怎樣的條件。

有了這兩點，ESLint 就會在遍歷 AST 的過程中，找出不符合規(guī)則的節(jié)點，將其報告出來。

默認(rèn)情況下，ESLint 中的規(guī)則會對 JS 進(jìn)行校驗，如果我們想對 React 進(jìn)行校驗的話，就需要增加 eslint-plugin-react 插件，如下所示，在 plugins 中增加這個插件，eslint-plugin 的前綴是可以省略的。

"plugins": [
    "react"
]

有了規(guī)則是不夠的，我們還需要開啟這些規(guī)則，可以在 rules 中配置，更好的方法就是在 extends 中加入以下代碼。

"extends": [
    "plugin:react/recommended"
]

extends

ESLint 中的規(guī)則很多，但是默認(rèn)都不會開啟的，我們需要在 rules 中設(shè)定這些規(guī)則開關(guān)，這個環(huán)節(jié)非常繁瑣。因此 ESLint 設(shè)計了 extends 這個字段，用于繼承別的文件中已經(jīng)配置好的的規(guī)則。在不加入任何插件的情況下，extends 可以配置為 eslint:recommended 或 eslint:all。recommended 是 ESLint 官方推薦的配置，校驗的規(guī)則比較少，eslint:all 則會開啟全部的規(guī)則校驗。

如果你想了解這兩者的區(qū)別，你可以去官方規(guī)則文檔查看。更快的方法是將 "eslint:recommended" 變成 "eslint:all"。修改后的結(jié)果非常夸張，我總共 3 行代碼 ESLint 檢測出 10 個錯誤。

extends 是一個數(shù)組，可以配置多組規(guī)則，每個配置繼承它前面的配置。實際開發(fā)中，我們會繼承一些優(yōu)秀的 ESLint 方案，比如 airbnb，然后結(jié)合自己的實際情況，在 rules 中進(jìn)一步配置。