項(xiàng)目開發(fā)過程中，大多數(shù)時(shí)候我們使用別人搭建好的腳手架編寫代碼，是項(xiàng)目的參與者。對于一些細(xì)節(jié)往往被忽略了。其中代碼檢測本身是一類非常簡單的配置，但涉及不同框架和語言組合使用的時(shí)候，可能比想象中要困難，本文帶您一起學(xué)習(xí)ts + react 項(xiàng)目搭建過程中的代碼規(guī)范配置。

本文主要參考項(xiàng)目：

https://github.com/dorshinar/eslint-react-intro?github.com

主要參考文章：

https://medium.com/@dors718/linting-your-react-typescript-project-with-eslint-and-prettier-2423170c3d42?medium.com

---

一、ESLint

ESLint 是一個(gè)Javascript Linter，幫助我們規(guī)范代碼質(zhì)量，提高團(tuán)隊(duì)開發(fā)效率。

避免代碼錯(cuò)誤

寫出最佳實(shí)踐的代碼

規(guī)范變量使用方式

規(guī)范代碼格式

更好的使用新的語法

社區(qū)比較知名的代碼規(guī)范，eslint 配合這些代碼規(guī)范，能夠檢測出代碼潛在問題，從而提高代碼質(zhì)量。

• standardjs
• airbnb

說明：ESLint 是完全插件化的。每一個(gè)規(guī)則都是一個(gè)插件并且你可以在運(yùn)行時(shí)添加更多的規(guī)則。

二、Prettier

eslint 雖然能幫助我們提高代碼質(zhì)量，但并不能完全統(tǒng)一編碼風(fēng)格，因?yàn)檫@些代碼規(guī)范的重點(diǎn)并不在代碼風(fēng)格上，雖然有一定的限制。

prettier 是一個(gè)能夠統(tǒng)一團(tuán)隊(duì)編碼風(fēng)格的工具，能夠極大的提高團(tuán)隊(duì)執(zhí)行效率，統(tǒng)一的編碼風(fēng)格能很好的保證代碼的可讀性。

Prettier:

prettier/eslint-plugin-prettier?github.com

三、React + TypeScript 項(xiàng)目中該怎么選擇 Linting？

最近在做 react + typescript 項(xiàng)目過程中，想通過合適的工具對代碼進(jìn)行規(guī)范以及統(tǒng)一編碼規(guī)則。很自然的想到了 eslint 、tslint

3.1 TSLint

TSLint 對TypeScript 支持得很好，并且如果你使用的是 VsCode IDE，還有出色的插件支持。

可能有人會(huì)有疑問：JavaScript 語言非常靈活，所以需要相應(yīng)的代碼檢測，而TypeScript 有強(qiáng)大的 類型系統(tǒng) 和 對ES6+ 的支持。 在編譯過程中已經(jīng)可以檢測出很多問題。為什么還需要？

因?yàn)門ypeScript 關(guān)注的是類型的匹配，而不是代碼風(fēng)格。

比如：

// 1.縮進(jìn)應(yīng)該是四個(gè)空格還是兩個(gè)空格？ // 2.是否應(yīng)該禁用 var？ // 3.接口名是否應(yīng)該以 I 開頭？ // 4.是否應(yīng)該強(qiáng)制使用 === 而不是 ==？

TypeScript 不會(huì)關(guān)注上面的問題，但這些問題能夠影響到團(tuán)隊(duì)協(xié)作效率、代碼的可理解、可維護(hù)性。

例子：

let myName = 'Tom'; console.log(`My name is ${myNane}`); console.log(`My name is ${myName.toStrng()}`); console.log(`My name is ${myName}`)

3.2 應(yīng)該使用哪種代碼檢查工具？

TSLint 的優(yōu)點(diǎn)：

• 專為 TypeScript 服務(wù)，bug 比 ESLint 少
• 不受限于 ESLint 使用的語法樹 ESTree
• 能直接通過 tsconfig.json 中的配置編譯整個(gè)項(xiàng)目，使得在一個(gè)文件中的類型定義能夠聯(lián)動(dòng)到其他文件中的代碼檢查

ESLint 的優(yōu)點(diǎn)：

• 基礎(chǔ)規(guī)則比 TSLint 多很多
• 社區(qū)繁榮，插件眾多

3.3 BUT

參考：

TypeScript 官方?jīng)Q定全面采用 ESLint?www.oschina.net

由于性能問題，TypeScript 官方?jīng)Q定全面采用 ESLint，甚至把倉庫（Repository）作為測試平臺(tái)，而 ESLint 的 TypeScript 解析器也成為獨(dú)立項(xiàng)目，專注解決雙方兼容性問題。

JavaScript 代碼檢測工具 ESLint 在 TypeScript 團(tuán)隊(duì)發(fā)布全面采用 ESLint 之后，發(fā)布typescript-eslint 項(xiàng)目，以集中解決TypeScript 與 ESLint兼容性問題。而ESLint不再維護(hù)typescript-eslint-parser，也不會(huì)在npm 上做任何發(fā)布。TypeScript 解析器轉(zhuǎn)移至Github 的 typescript-eslint/parser。

typescript-eslint/typescript-eslint?github.comTypeScript 2019上半年發(fā)展規(guī)劃?github.com

3.4 SO

雖然TSLint 很長一段時(shí)間 是Linting TypeScript 的標(biāo)準(zhǔn)，但ESLint會(huì)很快完全取代 TSLint，TSLint將被拋棄。

四、React + TypeScript 項(xiàng)目 Linting 搭建

4.1 使用npx創(chuàng)建項(xiàng)目

$ npx create-react-app eslint-react-intro --typescript

說明：npx 參考

4.2 安裝 ESLint 解析 TypeScript 的依賴

eslint：javascript代碼檢測工具，使用espree解析器

@typescript-eslint/parser：將 TypeScript 轉(zhuǎn)換為 ESTree，使 eslint 可以識(shí)別

@typescript-eslint/eslint-plugin：只是一個(gè)可以打開或關(guān)閉的規(guī)則列表

$ yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

4.3 配置 ESLint

1.使用eslint 交互式工具配置

$ ESLint --init

它會(huì)問你一系列問題，以幫助你配置它。

可以參考：

https://larrylu.blog/improve-code-quality-using-eslint-742cf1f384f1?larrylu.blog

2.自定義配置，添加配置文件 .eslintrc.js

module.exports = {parser: {}, // 解析器extends: [], // 繼承的規(guī)則 [擴(kuò)展]plugins: [], // 插件rules: {} // 規(guī)則 };

plugin 與 extend 的區(qū)別：

• extend 提供的是 eslint 現(xiàn)有規(guī)則的一系列預(yù)設(shè)
• 而 plugin 則提供了除預(yù)設(shè)之外的自定義規(guī)則，當(dāng)你在 eslint 的規(guī)則里找不到合適的的時(shí)候就可以借用插件來實(shí)現(xiàn)了

為了使配置能夠正常運(yùn)行，我們需要配置 解析器、插件、規(guī)則集等。

module.exports = {parser: "@typescript-eslint/parser",extends: ["plugin:@typescript-eslint/recommended"],plugins: ["@typescript-eslint"],rules: {} };

我們已經(jīng)告訴ESLint 怎樣正確解析 TypeScript 代碼，并且使用了一組推薦的插件規(guī)則（extends字段選項(xiàng)中的配置）。

3. 接下來我們將為 React 添加基本規(guī)則

此規(guī)則，由Create React App團(tuán)隊(duì)提供

module.exports = {parser: "@typescript-eslint/parser",extends: ["plugin:@typescript-eslint/recommended", "react-app"],plugins: ["@typescript-eslint", "react"],rules: {} };

我們對 TypeScript 和 React 進(jìn)行了 規(guī)范(linting)，此時(shí)需要選擇一種代碼格式化程序。前面提到的Prettier 將是首選工具，因?yàn)樗跈z測和修復(fù)樣式錯(cuò)誤方面做的很出色，并且和ESLint有很好的集成。

4. 安裝 prettier 依賴

$ yarn add prettier eslint-config-prettier eslint-plugin-prettier -D

prettier: 格式化規(guī)則程序

eslint-config-prettier: 將禁用任何可能干擾現(xiàn)有 prettier 規(guī)則的 linting 規(guī)則

eslint-plugin-prettier: 將作為ESlint 的一部分運(yùn)行 Prettier分析。

module.exports = {parser: '@typescript-eslint/parser',extends: ['plugin:@typescript-eslint/recommended','react-app','plugin:prettier/recommended',],plugins: ['@typescript-eslint', 'react'],rules: {}, };

5. Visual Studio Code 集成 ESLint 與 Prettier

最后，雖然默認(rèn)配置（setting.json）已經(jīng)很好，但默認(rèn)只檢測.js和 *.jsx文件，我們還需要配置typescripe，同時(shí)我們也希望有自動(dòng)修復(fù)功能（有些是不可能自動(dòng)修復(fù)）。

user settings 與 workspace settings：user settings 里面是更通用的設(shè)置，workspace settings 是跟隨項(xiàng)目存在，可以做到團(tuán)隊(duì)統(tǒng)一。

"eslint.validate": ["javascript","javascriptreact",{"language": "typescript","autoFix": true},{"language": "typescriptreact","autoFix": true} ]

6.使用 husky，提交檢測（可選）

https://github.com/typicode/husky?github.com

結(jié)合自己團(tuán)隊(duì)實(shí)際情況，是否選擇，建議使用。

$ yarn add husky -D // package.json {"husky": {"hooks": {"pre-commit": "npm test","pre-push": "npm test","...": "..."}} }

五、總結(jié)

ESList：@typescript-eslint項(xiàng)目取代 tslint

TSLint：逐漸被舍棄

Prettier：統(tǒng)一代碼風(fēng)格

VSCode：在setting.json中設(shè)置，可以集成 ESLint、Prettier 等規(guī)則，并能自動(dòng)修復(fù)。

---

Linting Your React+Typescript Project with ESLint and Prettier!?medium.com自然醒：使用ESLint+Prettier來統(tǒng)一前端代碼風(fēng)格?zhuanlan.zhihu.comhttps://standardjs.com/readme-zhcn.html?standardjs.comhttps://larrylu.blog/improve-code-quality-using-eslint-742cf1f384f1?larrylu.blogTypeScript 官方?jīng)Q定全面采用 ESLint?www.oschina.nethttps://medium.com/@oliver.grack/using-eslint-with-typescript-and-react-hooks-and-vscode-c583a18f0c75?medium.com

總結(jié)

以上是生活随笔為你收集整理的antd + react model自定义footer_使用ESLint+Prettier规范React+Typescript项目的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。