欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2022年11月17日 15:30:23   作者：鋼蛋  
這篇文章主要為大家介紹了ESLint規(guī)范TypeScript代碼使用方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前導(dǎo)

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

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

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

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

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

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

安裝依賴 

在你的工程下運(yùn)行下面的代碼，安裝 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

再建一個(gè)忽略文件 .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!')

因?yàn)槲覀兡壳斑€沒有創(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!  }
}

再運(yùn)行 npm run lint

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

lint 報(bào)錯(cuò)了...

關(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 功能，自動(dòng)修復(fù)報(bào) warn 或 error 的代碼

改造一下 package.json

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

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

聊一聊原理

parser

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

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

plugins

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

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

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

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

"plugins": [
    "react"
]

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

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

extends

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

如果你想了解這兩者的區(qū)別，你可以去 官方規(guī)則文檔 查看。更快的方法是將 "eslint:recommended" 變成 "eslint:all"。修改后的結(jié)果非?？鋸垼铱偣?3 行代碼 ESLint 檢測出 10 個(gè)錯(cuò)誤。

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

總結(jié)

使用 @typescript-eslint/parser 作為解析器，該解析器能夠識(shí)別 TS 語法，結(jié)合特定的 plugin 就能實(shí)現(xiàn) TS 規(guī)范化。

ESLint 的核心在于 parser 和 plugin，一個(gè)負(fù)責(zé)將當(dāng)前代碼解析為 AST，一個(gè)負(fù)責(zé)在 AST 的基礎(chǔ)上生成規(guī)則。

不同的 parser 代表的不同的解析方式，各式各樣的 plugin 也代表不同的規(guī)則，ESLint 的生態(tài)能越來越好，一部分要?dú)w功于這種可插拔式的設(shè)計(jì)。

目前社區(qū)有很多優(yōu)秀的 ESLint 規(guī)范，我們可以參考這些規(guī)范做一份適用于自己團(tuán)隊(duì)的規(guī)范。

以上就是ESLint規(guī)范TypeScript代碼使用方法的詳細(xì)內(nèi)容，更多關(guān)于ESLint規(guī)范TypeScript的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論