antd + react model自定义footer_使用ESLint+Prettier规范React+Typescript项目
本文主要參考項(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ā)效率。
社區(qū)比較知名的代碼規(guī)范，eslint 配合這些代碼規(guī)范，能夠檢測(cè)出代碼潛在問題，從而提高代碼質(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)目過程中，想通過合適的工具對(duì)代碼進(jìn)行規(guī)范以及統(tǒng)一編碼規(guī)則。很自然的想到了 eslint 、tslint
3.1 TSLint
TSLint 對(duì)TypeScript 支持得很好，并且如果你使用的是 VsCode IDE，還有出色的插件支持。
可能有人會(huì)有疑問：JavaScript 語言非常靈活，所以需要相應(yīng)的代碼檢測(cè)，而TypeScript 有強(qiáng)大的 類型系統(tǒng) 和 對(duì)ES6+ 的支持。 在編譯過程中已經(jīng)可以檢測(cè)出很多問題。為什么還需要？
因?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）作為測(cè)試平臺(tái)，而 ESLint 的 TypeScript 解析器也成為獨(dú)立項(xiàng)目，專注解決雙方兼容性問題。
JavaScript 代碼檢測(cè)工具 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.com3.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 的依賴
4.3 配置 ESLint
1.使用eslint 交互式工具配置
$ ESLint --init它會(huì)問你一系列問題，以幫助你配置它。
可以參考：
https://larrylu.blog/improve-code-quality-using-eslint-742cf1f384f1?larrylu.blog2.自定義配置，添加配置文件 .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: {} };我們對(duì) TypeScript 和 React 進(jìn)行了 規(guī)范(linting)，此時(shí)需要選擇一種代碼格式化程序。前面提到的Prettier 將是首選工具，因?yàn)樗跈z測(cè)和修復(fù)樣式錯(cuò)誤方面做的很出色，并且和ESLint有很好的集成。
4. 安裝 prettier 依賴
$ yarn add prettier eslint-config-prettier eslint-plugin-prettier -D5. Visual Studio Code 集成 ESLint 與 Prettier
最后，雖然默認(rèn)配置（setting.json）已經(jīng)很好，但默認(rèn)只檢測(cè).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，提交檢測(cè)（可選）
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)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： excel最常用的八个函数_Excel最
- 下一篇： 尚硅谷spring和spring boo