前端构建工具（1）-- 代码检查 --ESlint

1、简介：

eslint检查我们写的 JavaScript 代码是否满足指定规则的静态代码检查工具。

• ESHint 和 JSLint 也是静态代码检查工具，但伴随着发展，他们已经无法满足需求，于是ESlint 诞生了，因次ESlint比它们功能更强大也更灵活。
• ESLint 是用 Node.js 写的，可以通过 npm 来安装。ESLint 也可以在 webpack(eslint-loader) 和 Gulp.js(gulp-eslint) 中使用。

2、作用

ESlint作为代码检查工具，其作用主要有以下几点：

• 统一代码风格规则，如：缩进用几个空格；是否用驼峰命名法来命名变量和函数名等。
• 减少错误， 如：相等比较必须用 ===，变量在使用前必须被声明，在条件语句中不能使用赋值语句等。
• 提高代码质量，如：函数最多有多少条件分支；最多有几个参数，代码块最多能嵌套多少层等。
• 其他。如： 禁用alert。这可以提高用户体验，因为 alert 框的外观不是那么好看，而且往往与网站的风格不搭，一般都会自定义 alert 框。

3、安装&配置

eslint可以用npm 安装依赖,用-g是全局安装

npm install -g eslint

初始化eslint配置，在用户文件中会生成一个eslint配置文件，即.eslintrc.js

eslint --init

然后可以在.eslintrc的文件进行配置:

• env: 指定代码的运行环境,设置了代码的运行环境可以是代码检测时，不会将运行环境预定义的全局变量视为没有定义

  "env": {
         "browser": true,
         "commonjs": true,
         "es6": true
      },
  

• parserOptions: 设置js版本的支持情况和jxs的支持情况。ecmaVersion 指定用哪个ECMAScript 的版本，默认是 3 和 5。

  "parserOptions": {
         "ecmaVersion": 6
     }
  

• globals：额外的全局变量，将需要使用的全局变量设置为ture,在代码检测时该全局变量则不会报未定义的错误

  "globals": {
     "sap": true,
     "jQuery": true,
     "_": true,
     "$": true,
     "Promise": true,
     "QUnit": true,
     "sinon": true
  },
  

• rules: 具体检查的规则，可以使用extends: eslint recommoned采用推荐的检查规则，也可以自己对一些规则进行自定义，第一个参数是表示该规则检查出来的是 off / 0 :不检查，warn / 1 :错误 ，error /2 警告

  {
    "extends": "eslint:recommended",
    "rules": {
      "indent": ["error", 2],
      "no-mixed-spaces-and-tabs": "error"
      "camelcase": "error",
      "eqeqeq": "warn",
      "curly": "error",
      "no-undef": "error",
      "no-unused-vars": "warn",
      "max-params": "warn"
    }
  }

4、错误修改

具体的报错信息可以参考https://eslint.org/docs/3.0.0...