ESLint 简介
ESLint 是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具, 使用它可以避免低级错误和统一代码的风格. 如果每次在代码提交之前都进行一次 eslint 代码检查, 就不会因为某个字段未定义为 undefined 或 null 这样的错误而导致服务崩溃, 可以有效的控制项目代码的质量.
在许多方面, 它和 JSLint,JSHint 相似, 除了少数的例外:
ESLint 使用 Espree 解析 JavaScript.
ESLint 使用 AST 去分析代码中的模式.
ESLint 是完全插件化的. 每一个规则都是一个插件并且你可以在运行时添加更多的规则.
使用
安装
ESLint 支持多种安装方式, 可以通过 NPM 来安装, 也可以在 webpack(eslint-loader) 和 Gulp.JS(gulp-eslint) 中使用.
全局安装
NPM i -g eslint
局部安装 (推荐)
NPM i -D eslint
初始化
安装完毕后, 接下来新建一个配置文件. eslintrc.JS, 或者使用如下的命令行来自动生成, 命令如下:
eslint --init
配置
注意: 如果你之前使用的版本低于 1.0.0, 请查看 迁移指南. 运行 eslint --init 之后,.eslintrc 文件会在你的文件夹中自动创建. 文件的内容大体如下:
- {
- "env": {
- "es6": true,
- "node": true
- },
- "extends": "eslint:recommended",
- "parserOptions": {
- "sourceType": "script"
- },
- "rules": {
- "no-console": 0,
- "no-unused-vars": "error",
- "no-use-before-define": "error",
- "linebreak-style": [
- "error",
- "unix"
- ],
- "quotes": [
- "error",
- "single"
- ],
- "semi": [
- "error",
- "always"
- ],
- "curly": ["error", "all"],
- "default-case": "error",
- "no-else-return": "error",
- "no-empty-function": "error",
- "no-implicit-coercion": "error",
- "no-invalid-this": "error",
- "no-loop-func": "error",
- "no-multi-spaces": "error",
- "no-new-func": "error",
- "no-useless-return": "error",
- "global-require": "error",
- "no-path-concat": "error",
- "no-sync": "error",
- "array-bracket-spacing": [
- "error",
- "never"
- ],
- "block-spacing": [
- "error",
- "always"
- ],
- "brace-style": [
- "error",
- "1tbs"
- ],
- "camelcase": "error",
- "comma-dangle": [
- "error",
- "always-multiline"
- ],
- "comma-spacing": [
- "error",
- { "before": false, "after": true }
- ],
- "comma-style": [
- "error",
- "last"
- ],
- "key-spacing": [
- "error",
- { "beforeColon": false, "afterColon": true }
- ],
- "lines-around-comment": [
- "error",
- { "beforeBlockComment": true }
- ],
- "newline-after-var": [
- "error",
- "always"
- ],
- "newline-before-return": "error",
- "no-multi-assign": "error",
- "max-params": [1, 3],
- "new-cap": [
- "error",
- {
- "newIsCap": true,
- "capIsNew": false
- }
- ],
- "no-multiple-empty-lines": [
- "error",
- {
- "max": 2
- }
- ],
- "no-shadow-restricted-names": "error",
- "no-undef-init": "error",
- "keyword-spacing": "error",
- "space-before-blocks": [
- "error",
- "always"
- ]
- }
- }
ESlint 支持的可配置信息主要分为 3 类:
Environments:JavaScript 脚步将要运行在什么环境中 (如: Node.JS,browser,commonjs 等),ESlint 支持的所有环境都可以在官网查到.
Globals: 执行代码时脚步需要访问的额外全局变量.
Rules: 开启某些规则, 也可以设置规则的等级.
检测规则
接下来, 可以在配置文件中设置一些规则. ESLint 规则的三种级别:
"off" 或者 0: 关闭规则.
"warn" 或者 1: 打开规则, 并且作为一个警告 (不影响 exit code).
"error" 或者 2: 打开规则, 并且作为一个错误 (exit code 将会是 1).
例如, 下面的一些配置规则:
"no-console":"off" 禁用 console.
"no-unused-vars":2 禁止出现未使用过的变量.
"no-use-before-define":2
不允许在变量定义之前使用它们.
"linebreak-style":[2, "unix"]
强制使用一致的换行风格.
"quotes": ["error", "single"]
强制使用一致的单引号.
"semi":["error", "always"]
控制行尾部分号.
"curly":["error", "all"]
强制所有控制语句使用一致的括号风格.
"default-case": "error"
switch 语句强制 default 分支, 也可添加 // no default 注释取消此次警告.
"no-else-return":"error"
禁止 if 语句中有 return 之后有 else.
"no-implicit-coercion": "error"
禁止出现空函数. 如果一个函数包含了一条注释, 它将不会被认为有问题.
"no-invalid-this": "error"
禁止 this 关键字出现在类和类对象之外.
"no-loop-func":"error"
禁止在循环中出现 function 声明和表达式.
"no-multi-spaces":"error"
禁止使用多个空格.
"no-new-func":"error"
禁止对 空 Function 对象使用 new 操作符.
"no-useless-return":"error"
禁止没有任何内容的 return;
"global-require": "error"
要求 require() 出现在顶层模块作用域中.
"no-path-concat": "error"
禁止对 dirname 和 filename 进行字符串连接
"no-sync": "error" 禁用同步方法.
"array-bracket-spacing": ["error", "never"]
指定数组的元素之间要以空格隔开 (, 后面), never 参数:[ 之前和 ] 之后不能带空格, always 参数:[ 之前和 ] 之后必须带空格.
"block-spacing": ["error", "always"]
禁止或强制在单行代码块中使用空格 (禁用).
- "brace-style": ["error", "1tbs"]
- "camelcase": "error"
强制驼峰法命名.
"comma-dangle": ["error", "always-multiline"]
数组和对象键值对最后一个逗号, never 参数: 不能带末尾的逗号, always 参数: 必须带末尾的逗, always-multiline: 多行模式必须带逗号, 单行模式不能带逗号号.
"comma-spacing": ["error", { "before": false, "after": true }]
控制逗号前后的空格.
"comma-style": ["error", "last"]
控制逗号在行尾出现还是在行首出现 (默认行尾).
"key-spacing": ["error", { "beforeColon": false, "afterColon": true }]
该规则规定了在对象字面量语法中, key 和 value 之间的空白, 冒号前不要空格, 冒号后面需要一个空格.
"lines-around-comment": ["error", { "beforeBlockComment": true }]
要求在注释周围有空行 ( 要求在块级注释之前有一空行).
"newline-after-var": ["error", "always"]
要求或禁止 var 声明语句后有一行空行.
"newline-before-return": "error"
要求 return 语句之前有一空行.
"no-multi-assign": "error"
链接变量的赋值可能会导致意外的结果并难以阅读, 不允许在单个语句中使用多个分配.
"max-params": [1, 3] function
定义中最多允许的参数数量.
"new-cap": ["error", { "newIsCap": true, "capIsNew": false}]
构造函数首字母大写.
"no-multiple-empty-lines": ["error", {"max": 2}]
空行不能够超过 2 行.
"no-shadow-restricted-names": "error"
禁止对一些关键字或者保留字进行赋值操作, 比如 NaN,Infinity,undefined,eval,arguments 等.
"no-undef-init": "error"
禁止把 undefined 赋值给一个变量.
"keyword-spacing": "error"
keyword 前后需要空格.
"space-before-blocks": ["error","always"]
强制在块之前使用一致的空格.
忽略检测
既然有检测的规则, 那么必然有忽略检测的配置. 要新增忽略检测的规则, 首先要在项目根目录创建一个 .eslintignore 文件告诉 ESLint 去忽略掉不需要检测的文件或者目录.
或者通过 package.JSON 文件设置需要忽略检测的对象, 例如:
- {
- "name": "my_project",
- "version": "1.0.0",
- "main": "index.js",
- "scripts": {
- "test": ""
- },
- "eslintConfig": { // 也可配置 eslint
- "env": {
- "es6": true,
- "node": true
- }
- },
- "eslintIgnore": ["test.js"]
- }
Gulp 中使用 ESLint
除了 NPM 方式之外, ESLint 还支持 Gulp 插件方式使用, 使用之前需要先安装插件.
NPM install gulp-eslint
如果要使用 gulp-eslint 进行 eslint 规则的校验, 可以使用下面的方式:
- var gulp = require('gulp');
- var eslint = require('gulp-eslint');
- gulp.task('lint',function(){
- return gulp.src(['app/**/*.js']) // 指定的校验路径
- .pipe(eslint({configFle:"./.eslintrc"})) // 使用你的 eslint 校验文件
- .pipe(eslint.format())
- });
ESLint 技巧
eslint-config-standard
eslint-config-standard 是一个标准的 ESLint 规则检测库, 因此只需要安装这个库就可以省去配置 ESLint 规则.
然后, 在项目的根目录里面手动创建一个. eslintrc 文件, 然后在里面添加如下代码:
- {
- "extends": "standard"
- }
执行完以上步骤, 就可以使用 ESLint 这个工具来校验项目里的代码.
在 vue 项目里,.vue 文件写的是类似于 html 的格式, 不是标准的 JavaScript 文件, ESLint 无法直接识别. vue 文件里的 JavaScript 代码, 那么这个时候我们需要去安装一个工具, 安装命令如下:
NPM i eslint-plugin-HTML -D
因为在 vue 文件里面写 JavaScript 代码也是写在 script 标签里面的, 这个插件的作用就是识别一个文件里面 script 标签里面的 JS 代码, 官方也是这么推荐的. 所以我们要在. eslintrc 文件里面新增一段脚本:
- {
- "extends": "standard",
- "plugins": [
- "html"
- ]
- }
执行完以上步骤后, 我们跳转到 package.JSON 文件里面的 scripts 里面新增一条命令:
"lint": "eslint --ext .js --ext .jsx --ext .vue src/"
在上面的脚本命令中, ext 后面需要写上指定检测文件的后缀, 如. JS,.jsx, .vue 等, 紧接着后面要写上一个参数, 这个参数就是我们要检测哪个目录下面的文件, 一般项目文件都在 src 下面, 所以在后面写上 src / 就好.
现在我们就可以到 terminal 里面输入 $ NPM run lint, 来检验项目里的代码是否符合 ESLint 的规则.
ESLint 自动修复报错
一般来说, 当我们使用命令 "npm run lint" 检测 JavaScript 的时候, 基本上都会出现非常的多报错, 基本上就是满屏的 error 和 warning.
在报这么多的错误之后, 如果我们一条一条地去修复, 就会变的非常的麻烦, 相信刚接触 ESLint 的童鞋都深有体会. 其实这些错误都可以让 ESLint 帮助我们自动地修复. 具体来说, 只需要在 package.JSON 文件里面的 scripts 里面新增一条命令即可:
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
当我们再去 terminal 中执行命令:$ NPM run lint-fix, 你会发现没有那么多飘红的报错, 也没有满屏的 error 和 warning 了.
当然, 还有一种万能方法, 就是在报错的 JS 文件中第一行写上 /* eslint-disable */.
eslint-loader
有时候, 我们希望在项目开发的过程当中, 每次修改代码都能够自动进行 ESLint 的检查. 因为在我们改代码的过程中去做一次检查, 如果有错误, 我们就能够很快地去定位到问题并解决问题. 这时候我们可以借助 eslint-loader 插件.
NPM i eslint-loader babel-eslint -D
执行完安装操作后, 我们还需要在. eslintrc 文件里面配置如下脚本:
- {
- "extends": "standard",
- "plugins": [
- "html"
- ],
- "parser": "babel-eslint"
- }
为什么我们要配置 parser 呢? 因为我们的项目是基于 webpack 的, 项目里的代码都是需要经过 babel 去处理的. babel 处理的这种语法可能对 ESLint 不是特别的支持, 然后我们使用 loader 处理 ESLint 的时候就会出现一些问题. 所以一般来说, 我们用 webpack 和 babel 来进行开发的项目, 都会指定它的 parser 使用 babel-eslint.
同时, 使用 webpack 方式构建的项目, 还需要在 webpack.config.base.JS 的 module 下面的 rules 里面添加一个如下脚本:
- rules: [
- {
- test: /\.(vue.js|jsx)$/,
- loader: 'eslint-loader',
- exclude: /node_modules/,
- enforce: 'pre'
- },
- ......
- ]
来源: http://www.jianshu.com/p/4f702c605f26