白話 Linters (EsLint)

為啥會(huì)出現(xiàn)ESLint TSLint stylelint 之類的 Linters 工具
當(dāng)你的業(yè)務(wù)代碼里出現(xiàn)了越來越多的if elseif elseif elseif沉迹，多到條件都是ctrl+c ctrl+v為起手技耻涛，因?yàn)闅v史原因又不方便重構(gòu)；無意之間你的代碼變成了如下形式：

1  if(a==b||a==c){
2  }else if(a==c&&c!=''){
3  }else if(c==e||c=b){
4  }else if(c==e&&c!=b){
5  }else if(...){
   }

在這簡化的代碼邏輯中胶逢，你可能一眼就看出了問題拨黔；也可能睜大眼睛1分鐘了，長嘆沒毛病啊~
答案當(dāng)然是有問題营搅，在第3行的邏輯判斷

//就是這里的 c=b俐镐，你的歷史記憶中此處應(yīng)該是c==b的判斷矫限，而不是c=b的賦值
}else if(c==e||c=b){

不知道你有沒有類似的遭遇，我反正是遇到過幾次佩抹，揪出問題前叼风，怎么都想不通，直到發(fā)現(xiàn)問題棍苹，哎呀我去~
并且解決此類問題并沒有成就感无宿，還惹得一身不夠細(xì)心
此時(shí)如果恰好有 ESLint 之類的語法校驗(yàn)工具，并且合理的配置了廊勃。在控制臺中懈贺，將會(huì)輸出問題，告知你要小心了坡垫，這里有坑啊

eslint 提示錯(cuò)誤

但是很多初入Linters的伙伴滿心歡喜的安裝梭灿，上手不一會(huì)后，就放棄了冰悠。為啥~

A：啊呀堡妒，怎么報(bào)錯(cuò)了，滿屏都是紅的
B：我這也是溉卓，剛剛還好好的皮迟，現(xiàn)在就加了個(gè) console.log就紅了
A：算了算了搬泥，還是格式化下就好了，這個(gè)太麻煩了

這段OS(Overlapping Sound)伏尼，曾出現(xiàn)我內(nèi)心忿檩，也出現(xiàn)在我同事之間。
要解決這個(gè)問題爆阶，重點(diǎn)在于要合理的配置所用 Linters 的規(guī)則燥透，因?yàn)楹芏嗄J(rèn)的 Linters 規(guī)則，阻礙了你已養(yǎng)成的編碼習(xí)慣辨图，讓你很不舒服班套；索性你就不用了。
好嘞~ 故事講完故河，如果你想讓 Linters 發(fā)現(xiàn)你或伙伴無意間留下的坑吱韭，又不想讓 Linters 阻礙你編碼的慣性，那么接下來再走一遍實(shí)際操作鱼的，也許會(huì)讓你重拾 Linters
那么以在vscode 啟用 ESLint 為例

前置環(huán)境條件

安裝vscode
安裝 ESLint
vscode 安裝 ESLint 插件

ESLint 可以全局安裝理盆，也可以在你項(xiàng)目的目錄單獨(dú)安裝；vscode里eslint插件是先在項(xiàng)目的目錄里找eslint包鸳吸，如果未找到熏挎，則在全局環(huán)境里查找eslint包

vscode中配置eslint插件參數(shù)

"eslint.run": "onSave",//eslint在保存時(shí)執(zhí)行
"eslint.alwaysShowStatus": true,//在狀態(tài)欄顯示 eslint狀態(tài)
"editor.codeActionsOnSave": {
  "eslint.run": "onSave",//在保存時(shí)自動(dòng)運(yùn)行eslint速勇，檢查代碼晌砾；也可以選擇 onType 一旦內(nèi)容有變化就會(huì)運(yùn)行eslint
   "source.fixAll.eslint": true// eslint 自動(dòng)修復(fù)可修復(fù)的規(guī)則
},

在現(xiàn)有的項(xiàng)目，或新建項(xiàng)目中配置 eslint配置文件烦磁，例如我這里是用js形式配置的eslint配置文件 .eslintrc.js

//樣例配置
module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 11
    },
    "rules": {
    }
};

至此养匈，eslint就算用起來了，讓我們來看一看效果

eslint 簡單應(yīng)用效果

接下來都伪，就是配置呕乎，之所以用的不習(xí)慣就是沒配置到位，在配置前陨晶，你需要整明白能配置什么猬仁。
其實(shí)官方文檔里寫的很詳細(xì)，但沒有中文文檔先誉，只關(guān)注效率的我們往往沉不下心湿刽，若不能在較短的時(shí)間內(nèi)解決，便半途而廢了褐耳。

以 .eslintrc.js 配置舉例

module.exports = {
    /**
     * 指定js(運(yùn)行|版本)所處環(huán)境诈闺，以便提供所指定(環(huán)境|版本)默認(rèn)的變量
     * 官網(wǎng)詳細(xì)說明 https://eslint.org/docs/user-guide/configuring#specifying-environments
     */
    "env": {
        "browser": true,//如為 false 或不配置, 在js文件中出現(xiàn) window, document 等 游覽器API 全局變量時(shí)，會(huì)提示 'is not defined' 警告
        "node":true,//如為 false 或不配置, 在js文件中出現(xiàn) require, exports等 NODE API 全局變量時(shí)铃芦，會(huì)提示 'is not defined' 警告
        "es6": false,//如為 false 或不配置, 在js文件中出現(xiàn) Promise 等es6版本新增的對象或方法時(shí)雅镊，提示錯(cuò)誤警告
    },
    /**
     * eslint 規(guī)則繼承自何處
     * 即如果未配置rules(自定義)規(guī)則襟雷，也未指定 extends(繼承)規(guī)則，eslint便沒有規(guī)則進(jìn)行校驗(yàn)
     * 相當(dāng)于仁烹，你買了部手機(jī)耸弄，但手機(jī)沒有電，啥事也干不了
     * 官網(wǎng)詳細(xì)說明 https://eslint.org/docs/user-guide/configuring#extending-configuration-files
     */
    "extends": "eslint:recommended",
    /**
     * 設(shè)置自定義全局變量卓缰，避免自定義全局變量出現(xiàn) no-undef 警告
     * 有時(shí)候我們引入了第三方包(插件)叙赚，或我們自己寫的一個(gè)全局方法；其提供了一個(gè)全局變量供我們使用僚饭，例如 axios (一個(gè)請求類庫)
     * eslint 會(huì)校驗(yàn) 變量必須聲明才能使用震叮，但是第三方庫，或我們自己的全局方法鳍鸵，不會(huì)在每個(gè)js文件中聲明引入苇瓣，這個(gè)時(shí)候便會(huì)出現(xiàn) no-undef 警告
     * 因此，將其在 globals中配置即可
     * 官網(wǎng)詳細(xì)說明 https://eslint.org/docs/user-guide/configuring#specifying-globals
     * 注意：
     * false | "readable" 等同于 "readonly"  不能重新定義(賦值)
     * true | "writeable" 等同于 "writable" 可重新定義(賦值)
     */
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly",
        "requirejs":false,
        "Mock":false,
        "axios":false,
    },
    /**
     * 指定 js 語法版本偿乖，例如
     * "ecmaVersion": 5, 表明 啟用es5語法進(jìn)行校驗(yàn)击罪，此時(shí)用 => 箭頭函數(shù)會(huì)提示語法錯(cuò)誤，因?yàn)榧^函數(shù)在es6中才能支持
     * 使用 3, 5 (默認(rèn)), 6, 7, 8, 9, 10, 11 設(shè)置你預(yù)期的js語法版本
     * 也可以根據(jù)js版本的年份設(shè)置贪薪，例如
     * 2015(同 6)  2016(同 7)  2017(同 8)  2018(同 9)  2019(同 10)  2020(同 11) 
     * 官網(wǎng)詳細(xì)說明 https://eslint.org/docs/user-guide/configuring#specifying-parser-options
     */  
    "parserOptions": {
        "ecmaVersion": 5
    },
    /**
     * 自定義 eslint 校驗(yàn)規(guī)則
     * off 或 0  關(guān)閉校驗(yàn)
     * warn 或 1 提示警告
     * error 或 2 提示錯(cuò)誤
     * 官網(wǎng)詳細(xì)說明 https://eslint.org/docs/user-guide/configuring#configuring-rules
     * 可配置校驗(yàn)規(guī)則 https://eslint.org/docs/rules/
     */
    "rules": {
        "quotes": [
            "error", //必須使用雙引號
            "double"
        ],
        "semi": [
            "error",// 未分號結(jié)尾 提示錯(cuò)誤
            "always"
        ],
        "no-console": 1, // console 提示 警告
    }
};

如上配置媳禁，eslint會(huì)在

出現(xiàn)箭頭函數(shù) 提示錯(cuò)誤 因?yàn)?parserOptions 配置的 ecmaVersion 版本為 5
出現(xiàn)Promise 等es6新增內(nèi)置對象提示錯(cuò)誤 因?yàn)?env 配置的 es6 為false 或未配置
使用 console.log 提示警告 因?yàn)?自定義規(guī)則里 no-console 配置為 1 即提示警告

根據(jù)上面的標(biāo)注的規(guī)則，調(diào)整適合自身的規(guī)則即可画切。至此eslint已經(jīng)協(xié)助我們完成語法校驗(yàn)規(guī)則了竣稽，并且 eslint 在一定程度上還能自動(dòng)修復(fù)問題(主要是修復(fù) 空格之類的 ^ _ ^)
例如在上面的 vscode 配置文件中，我們設(shè)置了自動(dòng)修復(fù)霍弹，則在保存后毫别，如果出現(xiàn)多余的空格等，會(huì)自動(dòng)修復(fù)

"editor.codeActionsOnSave": {
  "eslint.run": "onSave",//在保存時(shí)自動(dòng)運(yùn)行eslint岛宦，檢查代碼；也可以選擇 onType 一旦內(nèi)容有變化就會(huì)運(yùn)行eslint
   "source.fixAll.eslint": true// eslint 自動(dòng)修復(fù)可修復(fù)的規(guī)則
},

好了~ 至此耍缴，便如用擔(dān)心手抖造成的誤傷了砾肺，接下來要做的就是格式化代碼；回顧下前端可能會(huì)接觸到的語言即框架

JavaScript
JSX
Angular
Vue
Flow
TypeScript
CSS, Less, and SCSS
HTML
JSON
GraphQL
Markdown, including GFM and MDX
YAML

穩(wěn)住~ 雖然多防嗡，但是Prettier來了变汪，通吃前端多語言的一種方案