什么是 ESLint

ESLint（中文站點）是一個開源的 JavaScript 代碼檢查工具，使用 Node.js 編寫，由 Nicholas C. Zakas 于 2013 年 6 月創建。ESLint 的初衷是為了讓程序員可以創建自己的檢測規則，使其可以在編碼的過程中發現問題而不是在執行的過程中。ESLint 的所有規則都被設計成可插入的，為了方便使用，ESLint 內置了一些規則，在這基礎上也可以增加自定義規則。

一、Eslint安裝

1.全局安裝

如果你想使 ESLint 適用于你所有的項目，建議全局安裝 ESLint

$ npm install -g eslint

初始化配置文件

$ eslint --init

2.局部安裝

$ npm install eslint --save-dev

初始化配置文件

$ ./node_modules/.bin/eslint --init

3.webpack中配置eslint

需要安裝eslint-loader解析.eslint文件

{    test: //.(js|jsx|mjs)$/,    enforce: 'pre',    use: [     {      options: {       formatter: eslintFormatter,       eslintPath: require.resolve('eslint'),             },      loader: require.resolve('eslint-loader'),     },    ],    include: paths.appSrc, //也可以用exclude排除不需要檢查的目錄或者用.eslintignore},

二、ESlint配置

1.配置文件類型與優先級順序

2.plugin屬性

ESLint 支持使用第三方插件（以eslint-plugin-開頭的npm包），在使用插件之前，必須使用 npm 安裝。如eslint-plugin-react、eslint-plugin-vue等

module.exports = {  "plugins": [    "react"  ],  "extends": [    "eslint:recommended"  ],  "rules": {    "no-set-state": "off"  }}

3.extends屬性

一個配置文件可以被基礎配置中的已啟用的規則繼承?？梢允褂靡韵乱巹t繼承：

（1）"eslint:recommended"

繼承Eslint中推薦的（打鉤的）規則項

module.exports = {  "extends": "eslint:recommended",  "rules": {      }}

（2）使用別人寫好的規則包（以eslint-config-開頭的npm包），如eslint-config-standard

module.exports = {  "extends": "standard",  "rules": {      }}

（3）使用Eslint插件中命名的配置

module.exports = {  "plugins": [    "react"  ],  "extends": [    "eslint:recommended",    "plugin:react/recommended"  ],  "rules": {    "no-set-state": "off"  }}