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

本文主要參考項目：

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 是一個Javascript Linter，幫助我們規范代碼質量，提高團隊開發效率。

避免代碼錯誤

寫出最佳實踐的代碼

規范變量使用方式

規范代碼格式

更好的使用新的語法

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

• standardjs
• airbnb

說明：ESLint 是完全插件化的。每一個規則都是一個插件并且你可以在運行時添加更多的規則。

二、Prettier

eslint 雖然能幫助我們提高代碼質量，但并不能完全統一編碼風格，因為這些代碼規范的重點并不在代碼風格上，雖然有一定的限制。

prettier 是一個能夠統一團隊編碼風格的工具，能夠極大的提高團隊執行效率，統一的編碼風格能很好的保證代碼的可讀性。

Prettier:

prettier/eslint-plugin-prettier?github.com

三、React + TypeScript 項目中該怎么選擇 Linting？

最近在做 react + typescript 項目過程中，想通過合適的工具對代碼進行規范以及統一編碼規則。很自然的想到了 eslint 、tslint

3.1 TSLint

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

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

因為TypeScript 關注的是類型的匹配，而不是代碼風格。

比如：

// 1.縮進應該是四個空格還是兩個空格？ // 2.是否應該禁用 var？ // 3.接口名是否應該以 I 開頭？ // 4.是否應該強制使用 === 而不是 ==？

TypeScript 不會關注上面的問題，但這些問題能夠影響到團隊協作效率、代碼的可理解、可維護性。

例子：

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

3.2 應該使用哪種代碼檢查工具？

TSLint 的優點：

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

ESLint 的優點：

• 基礎規則比 TSLint 多很多
• 社區繁榮，插件眾多

3.3 BUT

參考：

TypeScript 官方決定全面采用 ESLint?www.oschina.net

由于性能問題，TypeScript 官方決定全面采用 ESLint，甚至把倉庫（Repository）作為測試平臺，而 ESLint 的 TypeScript 解析器也成為獨立項目，專注解決雙方兼容性問題。

JavaScript 代碼檢測工具 ESLint 在 TypeScript 團隊發布全面采用 ESLint 之后，發布typescript-eslint 項目，以集中解決TypeScript 與 ESLint兼容性問題。而ESLint不再維護typescript-eslint-parser，也不會在npm 上做任何發布。TypeScript 解析器轉移至Github 的 typescript-eslint/parser。

typescript-eslint/typescript-eslint?github.comTypeScript 2019上半年發展規劃?github.com

3.4 SO

雖然TSLint 很長一段時間 是Linting TypeScript 的標準，但ESLint會很快完全取代 TSLint，TSLint將被拋棄。

四、React + TypeScript 項目 Linting 搭建

4.1 使用npx創建項目

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

說明：npx 參考

4.2 安裝 ESLint 解析 TypeScript 的依賴

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

@typescript-eslint/parser：將 TypeScript 轉換為 ESTree，使 eslint 可以識別

@typescript-eslint/eslint-plugin：只是一個可以打開或關閉的規則列表

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

4.3 配置 ESLint

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

$ ESLint --init

它會問你一系列問題，以幫助你配置它。

可以參考：

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

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

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

plugin 與 extend 的區別：

• extend 提供的是 eslint 現有規則的一系列預設
• 而 plugin 則提供了除預設之外的自定義規則，當你在 eslint 的規則里找不到合適的的時候就可以借用插件來實現了

為了使配置能夠正常運行，我們需要配置 解析器、插件、規則集等。

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

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

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

此規則，由Create React App團隊提供

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

我們對 TypeScript 和 React 進行了 規范(linting)，此時需要選擇一種代碼格式化程序。前面提到的Prettier 將是首選工具，因為它在檢測和修復樣式錯誤方面做的很出色，并且和ESLint有很好的集成。

4. 安裝 prettier 依賴

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

prettier: 格式化規則程序

eslint-config-prettier: 將禁用任何可能干擾現有 prettier 規則的 linting 規則

eslint-plugin-prettier: 將作為ESlint 的一部分運行 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

最后，雖然默認配置（setting.json）已經很好，但默認只檢測.js和 *.jsx文件，我們還需要配置typescripe，同時我們也希望有自動修復功能（有些是不可能自動修復）。

user settings 與 workspace settings：user settings 里面是更通用的設置，workspace settings 是跟隨項目存在，可以做到團隊統一。

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

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

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

結合自己團隊實際情況，是否選擇，建議使用。

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

五、總結

ESList：@typescript-eslint項目取代 tslint

TSLint：逐漸被舍棄

Prettier：統一代碼風格

VSCode：在setting.json中設置，可以集成 ESLint、Prettier 等規則，并能自動修復。

---

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。