EsLint入门

EsLint入门教程

1.EsLint是什么

编码规范工具，提供编码规范；
提供自动检验代码的程序，并打印检验结果：告诉你哪一个文件哪一行代码不符合哪一条编码规范，方便你去修改代码。

2.EsLint使用

2.1安装依赖

npm install eslint --save-dev

2.2 创建eslint文件

eslint --init

根据提示安装eslintrc.js配置文件

2.3设置package.json文件

打开 package.json 文件，修改 script 属性如下：

"scripts": {
	...
    "lint": "eslint src",  // 运行eslint
    "lint:create": "eslint --init" // 创建eslint文件
    ...
}

2.4设置–fix参数

说明：这里给 “lint”: “eslint src --fix”, 加上 --fix 参数，是 Eslint 提供的自动修复基础错误的功能。
打开 package.json 文件，修改 script 属性如下：

"scripts": {
	...
    "lint": "eslint src --fix",  // 运行eslint
    "lint:create": "eslint --init" // 创建eslint文件
    ...
}

3.配置文件

按照上述操作，会生成默认 .eslintrc.js 配置文件，内容如下：

// .eslintrc.js 

module.exports = {
  root: true, // 当前项目使用这个配置文件, 不会往父级目录找.eslintrc.js文件
  env: { // 指定eslint启动环境(vuecli底层是node支持), browser: true也可以在浏览器设置
    node: true
  },
  extends: [ // 扩展配置
    'plugin:vue/essential', // vue里必须的规则
    '@vue/standard' // 使eslint继承@vue/cli脚手架里的 - standard标准
  ],
  parserOptions: { // 对新语法使用eslint
    parser: 'babel-eslint' // 使用babel-eslint 来解析新语法ES6
  },
  // 这里可以进行自定义规则配置
  // key：规则代号
  // value：具体的限定方式
  //   "off" or 0 - 关闭规则
  //   "warn" or 1 - 将规则视为一个警告（不会影响退出码）,只警告，不会退出程序
  //   "error" or 2 - 将规则视为一个错误 (退出码为1)，报错并退出程序
  rules: { // 自定义规则 - 其实上面集成后有很多内置的规则, 这里可以进行规则的一些修改
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 上线环境用打印就报警告, 开发环境关闭此规则
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // debugger可以终止代码执行
    'no-multiple-empty-lines': 'off' // 不允许有连续多行空行(关闭规则)
  }
}

附：rules配置文档

4.忽略指定文件夹/文件

在项目根目录新建一个.eslintignore文件，将不想应用eslint规则检测的文件或文件夹加在里面就可以了，例如：

build
config/*.js
test/a.js
static/dist