為什么要用eslint

每個(gè)開(kāi)發(fā)都有自己的編碼習(xí)慣或風(fēng)格插佛，很難說(shuō)誰(shuí)的代碼寫(xiě)的好看，誰(shuí)的代碼寫(xiě)的不好看量窘。對(duì)于一個(gè)團(tuán)隊(duì)項(xiàng)目雇寇，如果每個(gè)開(kāi)發(fā)都按自己的風(fēng)格來(lái)寫(xiě)代碼，項(xiàng)目代碼整體來(lái)看一定是趨于混亂的蚌铜。
使用文檔或者口頭進(jìn)行約束锨侯，再定期進(jìn)行代碼review，也是一種方法冬殃，但難以落實(shí)囚痴，初期可能還行之有效，慢慢的就開(kāi)始懈怠审葬，也不進(jìn)行review了深滚，每個(gè)開(kāi)發(fā)又開(kāi)始按自己喜歡的風(fēng)格進(jìn)行開(kāi)發(fā)了。最好的方法還是使用工具進(jìn)行規(guī)范涣觉。
使用單引號(hào)還是雙引號(hào)痴荐，要不要加分號(hào)，縮進(jìn)用2個(gè)空格還是4個(gè)空格官册，都沒(méi)有問(wèn)題生兆，最重要的是整個(gè)項(xiàng)目風(fēng)格的統(tǒng)一。

開(kāi)始使用eslint

不僅僅是格式

1. 編輯器安裝elint插件

以VsCode為例膝宁，在商店搜索eslint安裝鸦难，然后重啟VsCode。如果你使用的是其他編輯器员淫，嗯明刷？換了吧，用VsCode满粗，香辈末！

eslint插件

2. 安裝eslint依賴(lài)

可以全局安裝，也可以安裝到當(dāng)前項(xiàng)目

• 全局安裝npm i eslint -g
• 當(dāng)前項(xiàng)目安裝（推薦）npm i eslint --save-dev

3. 生成配置

如果eslint是全局安裝映皆，在項(xiàng)目根目錄執(zhí)行eslint --init挤聘，否則在當(dāng)前根目錄執(zhí)行./node_modules/eslint/bin/eslint.js --init
執(zhí)行這個(gè)命令后，根據(jù)選項(xiàng)生成配置捅彻，下圖是我選擇的组去，可以參考

生成配置

4. 驗(yàn)證和修改配置

執(zhí)行完第3步后會(huì)在根目錄生成.eslintrc.js文件，打開(kāi)代碼步淹，可以看到有些代碼被畫(huà)了紅色波浪線(xiàn)从隆，這是不符合規(guī)范的代碼诚撵，鼠標(biāo)放上去可以查看具體信息，有些校驗(yàn)我們不需要键闺，通過(guò)修改配置可以去掉寿烟。把校驗(yàn)規(guī)則復(fù)制到.eslintrc.js文件的rules下，值為0辛燥，就去掉了這個(gè)校驗(yàn)筛武。

格式問(wèn)題按Ctrl+s保存會(huì)自動(dòng)根據(jù)eslint格式化，其他問(wèn)題需要手動(dòng)處理挎塌。

校驗(yàn)

修改配置

修改配置后效果

配置全局校驗(yàn)格式化命令

如果你已經(jīng)開(kāi)發(fā)了一部分代碼徘六，后期才引入eslint，可以配置格式化命令榴都，對(duì)整個(gè)工程進(jìn)行eslint校驗(yàn)并格式化待锈。
在package.json的scripts里添加配置"lint": "eslint --fix --ext .js src"
執(zhí)行npm run lint命令會(huì)對(duì)src目錄下的.js后綴的文件進(jìn)行eslint校驗(yàn)，加了--fix會(huì)直接進(jìn)行格式化嘴高，其他問(wèn)題需要手動(dòng)處理炉擅。

配置命令

webpack alias別名校驗(yàn)問(wèn)題

一般我們會(huì)在webpack里配置別名，比如配置@指向src目錄阳惹，方便引用，但是eslint不認(rèn)識(shí)眶俩，需要額外的處理莹汤。當(dāng)然也可以直接在.eslintrs.js里配置去掉這個(gè)校驗(yàn)，但這種一刀切的方式是不推薦的颠印。

// 配置別名
alias: {
   "@": path.resolve(__dirname, "src"),
},

別名校驗(yàn)問(wèn)題

我們使用eslint-import-resolver-alias插件來(lái)解決上面這個(gè)問(wèn)題

• 安裝插件npm i eslint-import-resolver-alias --save-dev
• 在.eslintrc.js里添加配置

module.exports = {
  settings: {
    "import/resolver": {
      alias: {
        map: [
          ['@', path.resolve(__dirname, "src")],
        ]
      }
    }
  },
  ...
}

git提交代碼時(shí)校驗(yàn)

1. 安裝husky npm i husky --save-dev

install完成后纲岭，husky會(huì)自動(dòng)配置 git hooks

2. 在package.json里添加配置

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

這樣在git commit的時(shí)候會(huì)先執(zhí)行eslint校驗(yàn)，npm run lint是前面我們配置在scripts里的命令线罕，對(duì)src下的js進(jìn)行校驗(yàn)并格式化止潮。但這樣每次提交都全量校驗(yàn)，沒(méi)有必要钞楼。

下面我們來(lái)配置增量校驗(yàn)

3. 安裝lint-staged npm i lint-staged --save-dev

從插件的名字就可以看出喇闸，這個(gè)插件是實(shí)現(xiàn)對(duì)staged（已加入git暫存區(qū)的文件）進(jìn)行校驗(yàn)

4. 修改package.json

{
  ...
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/*.js": [
      "eslint --fix --ext .js",
      "git add"
    ]
  }
}

這樣就實(shí)現(xiàn)了git提交代碼時(shí)對(duì)修改的文件進(jìn)行eslint校驗(yàn)。

小提示：commit時(shí)加--no-verify可以跳過(guò)校驗(yàn)哦