# ESLint
不管是多人合作還是個人項目，代碼規范都是很重要的。這樣做不僅可以很大程度地避免基本語法錯誤，也保證了代碼的可讀性。
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/eslint.html#%E9%85%8D%E7%BD%AE%E9%A1%B9)配置項
所有的配置文件都在[.eslintrc.js](https://github.com/PanJiaChen/vue-element-admin/blob/master/.eslintrc.js)中。 本項目基本規范是依托于 vue 官方的 eslint 規則[eslint-config-vue](https://github.com/vuejs/eslint-config-vue)做了少許的修改。大家可以按照自己的需求進行定制化配置。
比如：我個人或者項目組習慣于使用兩個空格，但你可能覺得四個空格更順眼，你可以做如下修改。 進入項目`.eslintrc.js`中，找到`indent`，然后修改為`4`即可。 還有各種各樣的配置信息，詳情見[ESLint 文檔](https://eslint.org/docs/rules/)。
在[v3.8.1](https://github.com/PanJiaChen/vue-element-admin/releases/tag/v3.8.1)版本之后，增加了[eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue)來更好的校驗 vue 相關代碼。
默認情況下使用了最嚴格的`plugin:vue/recommended`來校驗代碼，若你覺得太嚴格可自行修改。
~~~
// https://github.com/PanJiaChen/vue-element-admin/blob/master/.eslintrc.js
module.exports = {
extends: ['plugin:vue/recommended', 'eslint:recommended']
//你可以修改為 extends: ['plugin:vue/essential', 'eslint:recommended']
}
~~~
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/eslint.html#%E5%8F%96%E6%B6%88-eslint-%E6%A0%A1%E9%AA%8C)取消 ESLint 校驗
如果你不想使用 ESLint 校驗（不推薦取消），只要找到[vue.config.js](https://github.com/PanJiaChen/vue-element-admin/blob/master/vue.config.js)文件。 進行如下設置`lintOnSave: false`即可。
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/eslint.html#vscode-%E9%85%8D%E7%BD%AE-eslint)vscode 配置 ESLint
這所謂工欲善其事，必先利其器，個人推薦 eslint+vscode 來寫 vue，絕對有種飛一般的感覺。效果如圖：
每次保存，vscode 就能標紅不符合 eslint 規則的地方，同時還會做一些簡單的自我修正。安裝步驟如下：
首先安裝 eslint 插件
安裝并配置完成 ESLint 后，我們繼續回到 VSCode 進行擴展設置，依次點擊 文件 > 首選項 > 設置 打開 VSCode 配置文件,添加如下配置
~~~
{
"files.autoSave": "off",
"eslint.validate": [
"javascript",
"javascriptreact",
"vue-html",
{
"language": "vue",
"autoFix": true
}
],
"eslint.run": "onSave",
"eslint.autoFixOnSave": true
}
~~~
這樣每次保存的時候就可以根據根目錄下.eslintrc.js 你配置的 eslint 規則來檢查和做一些簡單的 fix。每個人和團隊都有自己的代碼規范，統一就好了，去打造一份屬于自己的 eslint 規則上傳到 npm 吧，如餓了么團隊的[config](https://www.npmjs.com/package/eslint-config-elemefe)，vue 的[config](https://github.com/vuejs/eslint-config-vue)。
[vscode 插件和配置推薦](https://github.com/varHarrie/Dawn-Blossoms/issues/10)
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/eslint.html#%E6%9B%B4%E5%A4%9A%E9%85%8D%E7%BD%AE)更多配置
由于本項目是基于`vue-cli`進行構建，所以更多配置可參考官方[文檔](https://cli.vuejs.org/zh/config/#lintonsave)
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/eslint.html#%E8%87%AA%E5%8A%A8%E4%BF%AE%E5%A4%8D)自動修復
~~~
npm run lint -- --fix
~~~
運行如上命令，eslint 會自動修復一些簡單的錯誤。
