Eslint簡(jiǎn)介

眾所周知，Eslint工具在當(dāng)前前端工程化中有著舉足輕重的分量，一般所謂【前端穩(wěn)定性建設(shè)】最容易落地和成效的就是它。它集成了錯(cuò)誤校驗(yàn)格式化代碼等功能，在項(xiàng)目中統(tǒng)一編程風(fēng)格和代碼健壯性有著重要意義。但是最近發(fā)現(xiàn)有的小伙伴只知道項(xiàng)目中有該項(xiàng)，卻不求甚解，不懂其用法，于是本周末搜集了相關(guān)資料以及用法在此記錄。

image.png

Eslint基本使用

1. 新建項(xiàng)目，并且初始化package.json

mkdir eslint-demo
cd eslint-demo
npm init -y

2. 安裝開發(fā)依賴

npm install eslint --save-dev

# or

yarn add eslint --dev

3. 生成配置文件 .eslintrc

npm init @eslint/config

# or

yarn create @eslint/config

執(zhí)行上述命令時(shí)，會(huì)出現(xiàn)交互式問(wèn)答關(guān)于你當(dāng)前項(xiàng)目的情況選擇eslint配置

image.png

選擇第三個(gè)即可，插件語(yǔ)法和發(fā)現(xiàn)問(wèn)題，并且統(tǒng)一編程風(fēng)格，其余選項(xiàng)根據(jù)自己項(xiàng)目情況選擇，個(gè)人喜好standard的風(fēng)格，選擇standard配置之后，會(huì)提示讓你按照其相關(guān)依賴；

image.png

4. vscode 打開項(xiàng)目

code .

5. .eslintrc配置文件詳解

module.exports = {
  root: true // eslint查找配置的最終父節(jié)點(diǎn)，如果不配置eslint會(huì)一直往上查找，直到系統(tǒng)根目錄。
  env: { // 全局變量相關(guān)配置，比如瀏覽器下的 `window`全局變量，node模塊下 `__dirname`
    browser: true, // true表示啟用瀏覽器全局變量，false表示不啟用，直接的結(jié)果就是eslint報(bào)錯(cuò)變量未定義
    node: true, // 啟用node全局變量
    es2021: true, // 啟用es2021的全局變量，關(guān)于es的其他版本配置項(xiàng)有 es6 es2016 es2017 es2018 es2019 es2020 es2021 es2022
  },
  extends: [  // 配置eslint校驗(yàn)規(guī)則
    'standard' //目前啟用的是 eslint-config-standard npm包的規(guī)則，配置時(shí)可省略eslint-config-前綴
  ],
  parserOptions: {  
    ecmaVersion: 'latest', // 啟用es最新的語(yǔ)法，比如箭頭函數(shù)之類,...語(yǔ)法，不包括變量名，全局變量名需要配置上面的env
    sourceType: 'module', // 僅僅針對(duì) export default es6模塊語(yǔ)法。node項(xiàng)目如不需要打包不需要
  },
  rules: { // 對(duì)于規(guī)則的修改部分
  },
 globals: {
    // 定義全局變量，不然eslint會(huì)校驗(yàn)失敗
    globalName: true, // true表示可讀可寫
    globalAge: false, // false表示可讀不可寫
  },
}

6. 新建文件app.js查看效果，發(fā)現(xiàn)編輯器沒(méi)有任何提示（因?yàn)闆](méi)有安裝vscode插件）
   

   image.png

7. 新增腳本命令使用eslint校驗(yàn)代碼

   
   
   image.png

8. 執(zhí)行npm run lint之后會(huì)發(fā)現(xiàn)控制臺(tái)報(bào)錯(cuò)了

   
   
   image.png

就目前而言，其實(shí)也就那么回事，還得咱手動(dòng)敲命令去校驗(yàn)，很low... 這時(shí)候eslint的插件派上用場(chǎng)了

9. vscode安裝eslint插件

   
   
   image.png

10. 安裝完成后重新啟動(dòng)vscode，你會(huì)有驚喜，錯(cuò)誤的代碼通過(guò)紅線標(biāo)出來(lái)了

    
    
    image.png

11. 有了語(yǔ)法錯(cuò)誤，就得解決，解決方式有種：項(xiàng)目中配置eslint:fix 命令、vscode的eslint插件

    
    
    image.png

執(zhí)行 npm run lint:fix，執(zhí)行完成會(huì)發(fā)現(xiàn)，還有一些錯(cuò)誤，是eslint無(wú)法修改的，需要我們自己修改

image.png

此時(shí)查看編輯器，原先的空格相關(guān)的錯(cuò)誤沒(méi)有了

image.png

12.實(shí)現(xiàn)編輯器保存自動(dòng)修復(fù)報(bào)錯(cuò) 上面是基于項(xiàng)目中的腳本命令，需要手動(dòng)執(zhí)行命令，覺(jué)得很麻煩有木有，不著急，我們可以通過(guò)VSCODE的的eslint插件實(shí)現(xiàn)保存時(shí)自動(dòng)fix錯(cuò)誤**
打開vscode的json形式的配置文件，添加下面的配置：

image.png

配置完成之后重啟vscode，后面只有我們每次保存時(shí)就會(huì)自動(dòng)解決eslint報(bào)錯(cuò)問(wèn)題。

13. 若要禁用一組文件的配置文件中的規(guī)則，請(qǐng)使用 overrides 和 files。例如:

{
  "rules": {...},
  "overrides": [
    {
      "files": ["*-test.js","*.spec.js"],
      "rules": {
        "no-unused-expressions": "off"
      }
    }
  ]
}

14. 使用.eslintignore配置忽略eslint檢查的的文件，新建.eslintignore文件，填入想忽略的文件或者文件夾

node_modules
test
data
.eslintrc.js

Prettier

個(gè)人理解 Prettier相對(duì)于eslint，其主要關(guān)注的點(diǎn)是代碼風(fēng)格的統(tǒng)一，比如代碼一行最多多少個(gè)字符，使用縮進(jìn)還是tab來(lái)實(shí)現(xiàn)代碼結(jié)構(gòu)化等。
其配置相對(duì)來(lái)說(shuō)很少，具體如下：

//此處的規(guī)則供參考，其中多半其實(shí)都是默認(rèn)值，可以根據(jù)個(gè)人習(xí)慣改寫
module.exports = {
  printWidth: 80, //單行長(zhǎng)度
  tabWidth: 2, //縮進(jìn)長(zhǎng)度
  useTabs: false, //使用空格代替tab縮進(jìn)
  semi: false, //句末使用分號(hào)
  singleQuote: true, //使用單引號(hào)
  quoteProps: 'as-needed', //僅在必需時(shí)為對(duì)象的key添加引號(hào)
  jsxSingleQuote: true, // jsx中使用單引號(hào)
  trailingComma: 'all', //對(duì)象多行時(shí)盡可能打印尾隨逗號(hào)
  bracketSpacing: true, //在對(duì)象前后添加空格-eg: { foo: bar }
  jsxBracketSameLine: true, //多屬性html標(biāo)簽的‘>’折行放置
  arrowParens: 'avoid', // always/avoid 單參數(shù)箭頭函數(shù)參數(shù)周圍使用圓括號(hào)-eg: (x) => x
  requirePragma: false, //無(wú)需頂部注釋即可格式化
  insertPragma: false, //在已被preitter格式化的文件頂部加上標(biāo)注
  proseWrap: 'preserve', //不知道怎么翻譯
  htmlWhitespaceSensitivity: 'ignore', //對(duì)HTML全局空白不敏感
  vueIndentScriptAndStyle: false, //不對(duì)vue中的script及style標(biāo)簽縮進(jìn)
  endOfLine: 'lf', //結(jié)束行形式
  embeddedLanguageFormatting: 'off', //對(duì)引用代碼進(jìn)行格式化
};

Prettier搭配eslint使用方式，參考https://github.com/prettier/eslint-plugin-prettier

1. install 依賴

yarn add prettier eslint-plugin-prettier eslint-config-prettier   --dev 

2. 新建.prettierrc.js文件，將上述配置復(fù)制到文件中

3. 修改.eslintrc.js文件

   
   
   image.png

4. 后續(xù)即可使用eslint的校驗(yàn)和fix了。

husky+lint-staged

到目前為止，我們對(duì)于代碼的格式化校驗(yàn)已經(jīng)有了2種方式（項(xiàng)目?jī)?nèi)部執(zhí)行腳本命令/vscode插件），但是假如說(shuō)有的同學(xué)不想每次都跑個(gè)命令來(lái)lint，或者說(shuō)它vscode沒(méi)有安裝eslint插件（編輯器沒(méi)有任何錯(cuò)誤提示，也不會(huì)保存時(shí)自動(dòng)修復(fù)錯(cuò)誤），那他提交的代碼就會(huì)與我們約定的風(fēng)格不符，所以一般我們?cè)趃it commit之前執(zhí)行l(wèi)int任務(wù)，保證我們每個(gè)人提交的代碼都會(huì)經(jīng)過(guò)lint校驗(yàn)，統(tǒng)一風(fēng)格。

husky：就是用來(lái)做這個(gè)事情的，commit之前執(zhí)行eslint命令，如果eslint沒(méi)過(guò)，則commit失??；
lint-staged：跑husky的hooks只針對(duì)拿到的staged文件進(jìn)行l(wèi)int校驗(yàn)，而不是全部文件，優(yōu)化了lint效率

1. 首先你的項(xiàng)目得git init下

git init

2. 使用如下命令自動(dòng)安裝2個(gè)npm包并且自動(dòng)配置：

npx mrm@2 lint-staged

3. 后續(xù)執(zhí)行g(shù)it commit時(shí)就會(huì)檢查

   
   
   image.png

坑點(diǎn)
初次使用的時(shí)候會(huì)爆出.eslintrc,js的警告，因?yàn)槭褂妹钭詣?dòng)生成的lint-staged腳本使用的是

  "lint-staged": {
    "*.js": "eslint --cache --fix"
  }

其會(huì)校驗(yàn)所有以js結(jié)尾的文件，包括【.】開頭的文件比如：.eslintrc.js .prettierrc.js，
就會(huì)有下面的警告：

image.png

解決方式是在 .eslingignore文件中加入 報(bào)錯(cuò)文件的配置

!.prettierrc.js

文章借鑒：
https://juejin.cn/post/7028754877312401444
https://zhuanlan.zhihu.com/p/81764012
https://juejin.cn/post/6938687606687432740
https://eslint.bootcss.com/docs/user-guide/configuring