eslint的用法

eslint介绍及用法

eslint是一个插件化的代码检测工具，可以用于检查常见的代码错误，也可以进行代码风格上的检查，控制代码的质量，提高代码的可读性。在团队协作中，统一的代码风格更具可读性、可维护性。

js Lint工具的介绍：JSLint，JSHint，JSCS和ESLint是四种流行的方案，下面对四种工具做下简单的对比：
- JSLint ：出现的最早，即装即用，不可配置和扩展，没有对应的文档；
- JSHint ：JSHint被创建为一个可配置的JSLint版本，可以配置每一条规则，提供了良好的文档，确定就是默认的配置过于宽松，很难知道哪个规则导致错误，没有自定义规则支持；
- JSCS ：JSCS是一个代码样式检查器。支持自定义reporter，可以使其更容易与其他工具集成。缺点就是只检测编码风格问题。 JSCS并不检测潜在的bug。
- ESlint ：它易于扩展，具有大量的自定义规则，并且可以容易的以插件的形式安装更多特性。它提供简洁的输出，但默认包括规则名称，因此你始终知道导致错误消息的规则。缺点就是需要一些配置。

eslint的优点：
1. 灵活：任何规则都可以切换，许多规则都有额外的设置可以调整
2. 极具扩展性，并有许多插件可用
3. 最好的ES6支持，也是唯一支持JSX的工具
4. 支持自定义reporter

全局和本地的安装 npm install eslint -g /npm install eslint -save-dev 这个方法执行后，会问你几个问题，然后自动生成一个 .eslintrc 文件

配置文件的方法：
1. 使用 .eslintrc 文件（支持 JSON 和 YAML 两种语法）
2. 在 package.json 中添加 eslintConfig 配置块
3. 直接在代码文件中定义
（.eslintrc 放在项目根目录，则会应用到整个项目；如果子目录中也包含 .eslintrc 文件，则子目录会忽略根目录的配置文件，应用该目录中的配置文件。这样可以方便地对不同环境的代码应用不同的规则。）

配置：

//运行环境的配置
{
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "jquery": true
  },
}

如果装了 eslint-plugin-react 为例，安装以后，需要在 ESLint 配置中开启插件：

"plugins": [
    "react"
  ],

设置解析器选项（必须设置这个属性）,开启 ESLint JSX 支持（ESLint 内置选项）

 "parserOptions": {
    "ecmaFeatures": {
      "experimentalObjectRestSpread": true,
      "jsx": true
    },
    "sourceType": "module"
  },

启用的规则及各自的错误级别
off 或 0：表示不验证规则。
warn 或 1：表示验证规则，当不满足时，给警告。
error 或 2 ：表示验证规则，不满足时报错。

 "rules": {
    "no-new": "off",   //new的使用
    "new-cap": "off",
    "indent": [
      "error",   //缩进2
      2
    ],
    "quotes": [
      "error",
      "single",   //使用单引号
      { 
        "allowTemplateLiterals": true
      }
    ],
    "semi": [    //禁止使用分号
      "error",
      "never"
    ],
    "no-empty": "error",  //禁止出现空语句块
    "no-console": "off",   
    "no-unused-vars": "off",  //声明后未被使用的变量或参数
    "react/jsx-indent": [
      "error",                  //jsx缩进2
      2
    ],
    "import/no-webpack-loader-syntax": 0,
    "no-proto": 0   //使用__proto__属性
  }
}

可以自己配置或采用默认的配置或者在别人的配置规则上修改

"extends": "eslint:recommended",// 启用 eslint 的默认推荐规
"rules": {
    // 新增的一些规则
    "indent": ["error", 4],
    "linebreak-style": ["error", "unix"],
    "quotes": ["error", "double"],
    "semi": ["error", "always"],

    // 覆盖一些规则的配置
    "comma-dangle": ["error", "always"],
    "no-cond-assign": ["error", "always"],

    // 禁用一些规则
    "no-console": "off",
}

eslint配合vscode编辑器的使用
文件->首选项->设置

{
"emmet.syntaxProfiles": {
"javascript": "jsx"
},  //支持jsx
"eslint.options": {
"configFile":".eslintrc.json的本地路径"
},
"eslint.autoFixOnSave": true,  //保存时自动格式化
}