在Typescript項(xiàng)目中，如何優(yōu)雅的使用ESLint和Prettier

授權(quán)轉(zhuǎn)載自：orthealllight

來(lái)源：https://github.com/forthealllight/blog/issues/45

對(duì)于Typescript項(xiàng)目的編碼規(guī)范而言，主要有兩種選擇ESLint和TSLint。ESLint不僅能規(guī)范js代碼，通過(guò)配置解析器，也能規(guī)范TS代碼。此外由于性能問(wèn)題，TypeScript 官方?jīng)Q定全面采用ESLint，甚至把倉(cāng)庫(kù)作為測(cè)試平臺(tái)，而 ESLint 的 TypeScript 解析器也成為獨(dú)立項(xiàng)目，專(zhuān)注解決雙方兼容性問(wèn)題。??最近在我的項(xiàng)目的編碼規(guī)范中全量的用ESLint代替了TSLint,針對(duì)其中遇到的問(wèn)題做一個(gè)記錄。

• 用ESLint來(lái)規(guī)范Typescript代碼
• 用ESLint來(lái)規(guī)范React代碼
• 結(jié)合Prettier和ESLint來(lái)規(guī)范代碼
• 在VSCode中使用ESLint
• husky和lint-staged構(gòu)建代碼工作流
• gitlab的CI/CD來(lái)規(guī)范代碼

一、用ESLint來(lái)規(guī)范Typescript代碼

首先安裝依賴(lài)：

npm?i?-d?eslint?@typescript-eslint/parser?@typescript-eslint/eslint-plugin

這三個(gè)依賴(lài)分別是：

• eslint: ESLint的核心代碼
• @typescript-eslint/parser：ESLint的解析器，用于解析typescript，從而檢查和規(guī)范Typescript代碼
• @typescript-eslint/eslint-plugin：這是一個(gè)ESLint插件，包含了各類(lèi)定義好的檢測(cè)Typescript代碼的規(guī)范

安裝好這3個(gè)依賴(lài)包之后，在根目錄下新建.eslintrc.js文件，該文件中定義了ESLint的基礎(chǔ)配置，一個(gè)最為簡(jiǎn)單的配置如下所示：

module.exports?=?{
????parser:??'@typescript-eslint/parser',?//定義ESLint的解析器
????extends:?['plugin:@typescript-eslint/recommended'],//定義文件繼承的子規(guī)范
????plugins:?['@typescript-eslint'],//定義了該eslint文件所依賴(lài)的插件
????env:{??????????????????????????//指定代碼的運(yùn)行環(huán)境
????????browser:?true,
????????node:?true,
????}???????????????????????????????
}

• 在ts項(xiàng)目中必須執(zhí)行解析器為@typescript-eslint/parser，才能正確的檢測(cè)和規(guī)范TS代碼
• env環(huán)境變量配置，形如console屬性只有在browser環(huán)境下才會(huì)存在，如果沒(méi)有設(shè)置支持browser,那么可能報(bào)console is undefined的錯(cuò)誤。

二、用ESLint來(lái)規(guī)范React代碼

如果在你的TS項(xiàng)目中同時(shí)使用了React，那么為了檢測(cè)和規(guī)范React代碼的書(shū)寫(xiě)必須安裝插件eslint-plugin-react，然后增加配置：

module.exports?=?{

????parser:??'@typescript-eslint/parser',
????extends:?[
????'plugin:react/recommended'??
????'plugin:@typescript-eslint/recommended'
????],??????????????????????????????//使用推薦的React代碼檢測(cè)規(guī)范
????plugins:?['@typescript-eslint'],
????env:{?????????????????????????
????????browser:?true,
????????node:?true,
????},
????settings:?{?????????????//自動(dòng)發(fā)現(xiàn)React的版本，從而進(jìn)行規(guī)范react代碼
????????"react":?{
????????????"pragma":?"React",
????????????"version":?"detect"
????????}
????},?
????parserOptions:?{????????//指定ESLint可以解析JSX語(yǔ)法
????????"ecmaVersion":?2019,
????????"sourceType":?'module',
????????"ecmaFeatures":{
????????????jsx:true
????????}
????}
????rules:?{
????
????}
}

在Rules中可以自定義你的React代碼編碼規(guī)范。

三、結(jié)合Prettier和ESLint來(lái)規(guī)范代碼

Prettier中文的意思是漂亮的、美麗的，是一個(gè)流行的代碼格式化的工具，我們來(lái)看如何結(jié)合ESLint來(lái)使用。首先我們需要安裝三個(gè)依賴(lài)：

npm?i?-g?prettier?eslint-config-prettier?eslint-plugin-prettier

其中：

• prettier：prettier插件的核心代碼
• eslint-config-prettier：解決ESLint中的樣式規(guī)范和prettier中樣式規(guī)范的沖突，以prettier的樣式規(guī)范為準(zhǔn)，使ESLint中的樣式規(guī)范自動(dòng)失效
• eslint-plugin-prettier：將prettier作為ESLint規(guī)范來(lái)使用

然后在項(xiàng)目的根目錄下創(chuàng)建.prettierrc.js文件：

module.exports?=??{
????"printWidth":?120,
????"semi":?false,
????"singleQuote":?true,
????"trailingComma":?"all",
????"bracketSpacing":?false,
????"jsxBracketSameLine":?true,
????"arrowParens":?"avoid",
????"insertPragma":?true,
????"tabWidth":?4,
????"useTabs":?false??
??};

接著修改.eslintrc.js文件，引入prettier：

module.exports?=?{
????parser:??'@typescript-eslint/parser',
????extends:[?
????'prettier/@typescript-eslint',
????'plugin:prettier/recommended'
????],
????settings:?{
????????"react":?{
????????????"pragma":?"React",
????????????"version":?"detect"
????????}
????},
????parserOptions:?{
????????"ecmaVersion":?2019,
????????"sourceType":?'module',
????????"ecmaFeatures":{
????????????jsx:true
????????}
????},
????env:{
????????browser:?true,
????????node:?true,
????}??

上述新增的extends的配置中：

• prettier/@typescript-eslint：使得@typescript-eslint中的樣式規(guī)范失效，遵循prettier中的樣式規(guī)范
• plugin:prettier/recommended：使用prettier中的樣式規(guī)范，且如果使得ESLint會(huì)檢測(cè)prettier的格式問(wèn)題，同樣將格式問(wèn)題以error的形式拋出

四、在VSCode中集成ESLint配置

為了開(kāi)發(fā)方便我們可以在VSCode中集成ESLint的配置，使得代碼在保存或者代碼變動(dòng)的時(shí)候自動(dòng)進(jìn)行ESLint的fix過(guò)程。

首先需要安裝VSCode的ESLint插件，安裝插件完畢后，在settings.json文件中修改其配置文件為：

{
???????"eslint.enable":?true,??//是否開(kāi)啟vscode的eslint
???????"eslint.autoFixOnSave":?true,?//是否在保存的時(shí)候自動(dòng)fix?eslint
???????"eslint.options":?{????//指定vscode的eslint所處理的文件的后綴
???????????"extensions":?[
???????????????".js",
???????????????".vue",
???????????????".ts",
???????????????".tsx"
???????????]
???????},
???????"eslint.validate":?[?????//確定校驗(yàn)準(zhǔn)則
???????????"javascript",
???????????"javascriptreact",
???????????{
???????????????"language":?"html",
???????????????"autoFix":?true
???????????},
???????????{
???????????????"language":?"vue",
???????????????"autoFix":?true
???????????},
???????????{
???????????????"language":?"typescript",
???????????????"autoFix":?true
???????????},
???????????{
???????????????"language":?"typescriptreact",
???????????????"autoFix":?true
???????????}
???????]
}

主要注意的有兩點(diǎn)：

• eslint.options中可以通過(guò)configFile屬性來(lái)執(zhí)行eslint規(guī)范的絕對(duì)路徑，默認(rèn)會(huì)向上查找，在根路徑中指定。
• eslint.validate中必須通過(guò){ language: XXX}的形式來(lái)指定typescript和typescriptreact

五、husky和lint-staged構(gòu)建代碼工作流

首先來(lái)看husky,Husky 能夠幫你阻擋住不好的代碼提交和推送,首先我們?cè)趐ackage.json中定義如下的script:

?"scripts":?{
???"lint":?"eslint?src?--fix?--ext?.ts,.tsx?"
}

接著在package.json定義husky的配置：

?"husky":?{
???"hooks":?{
??????"pre-commit":?"npm?run?lint"
????}
},

我們?cè)趃it的hook的階段來(lái)執(zhí)行相應(yīng)的命令，比如上述的例子是在pre-commit這個(gè)hook也就是在提交之前進(jìn)行l(wèi)int的檢測(cè)。

接著來(lái)看lint-staged，上述我們通過(guò)在husky的pre-comit這個(gè)hook中執(zhí)行一個(gè)npm命令來(lái)做lint校驗(yàn)。除了定義個(gè)npm lint命令外，我們也可以直接通過(guò)使用lint-staged，來(lái)在提交前檢測(cè)代碼的規(guī)范。??使用lint-staged來(lái)規(guī)范代碼的方式如下，我們修改package.json文件為：

{
??"husky":?{
????"hooks":?{
??????"pre-commit":?"lint-staged"
????}
??},
??"lint-staged":?{
????"*.{.ts,.tsx}":?[
??????"eslint",
??????"git?add"
????]
??}
}

同樣在git commit的時(shí)候會(huì)做lint的檢測(cè)。

六、gitlab的CI/CD來(lái)規(guī)范代碼

僅僅通過(guò)git的hook來(lái)執(zhí)行代碼的規(guī)范檢測(cè)有一個(gè)問(wèn)題，我們可以在git commit的時(shí)候通過(guò)--no-verify來(lái)跳過(guò)代碼的規(guī)范檢測(cè)。但是某些情況下，我們對(duì)于某一個(gè)重要分支，該分支上的代碼必須完整通過(guò)代碼的規(guī)范檢測(cè)，此時(shí)我們可以使用gitlab的CI/CD。

同樣在package.json中增加一個(gè)lint的npm 命令：

??"scripts":?{
?????"lint":?"eslint?src?--fix?--ext?.ts,.tsx?"
??}

然后在根目錄增加.gitlab-ci.yml文件，該文件中的配置為：

stages:
??-?lint

before_script:
??-?git?fetch?--all
??-?npm?install?

lint:
??stage:?lint
??script:
????-?npm?run?lint
??only
????-?特定分支1
????-?特定分支2

然后配置相應(yīng)的gitlab runner，這里不具體詳描，最后的結(jié)果就是在我們指定的分支上的提交或者merge都會(huì)進(jìn)行所配置的命令檢測(cè)。這樣保證了特定分支不受git commit跳過(guò)操作--no-verify的影響。