快速用上 ESLint

在项目中使用 ESLint

环境

Node.js

安装与使用

本地安装

1. 作为开发依赖在本地安装
   npm install eslint --save-dev

2. 创建配置文件
   ./node_modules/.bin/eslint --init

   备注

   • 这是一个交互式指令，可以根据你的交互选项给你创建一个配置文件。
   • 配置文件当然也可以手动来创建。

3. 运行
   ./node_modules/.bin/eslint <dir | filename>

   ！注意

   • 如果在 windows 下，并且使用 cmd 来执行命令，那么需要使用反斜杠， 即 .\node_modules\.bin\eslint 来执行命令。如果是用 PowerShell 执行则不需要。

注意：

1. 如果在 Windows 下，并且使用 cmd 来执行命令，那么需要使用反斜杠， 即.\node_modules.bin\eslint 来执行命令。如果是用 PowerShell 执行则不需要。

全局安装

1. 使 ESLint 适用所有项目，可以全局安装
   npm install -g eslint

   备注

   • 全局安装之后，可以直接使用 eslint 指令，而不用添加路径。
   • 但是! 由于是全局指令，那么配置文件里面的依赖也要求是全局安装才行。相应地，运行本地指令时，配置文件里面的依赖也要相应的安装在本地。

2. 创建配置文件
   eslint --init

3. 运行 eslint <dir | filename>

常用指令参数

• --fix - 能够对某些规则进行自动修复。（主要是一些不影响代码逻辑的基础问题）

配置文件

文件格式

• JavaScript - 使用 .eslintrc.js 然后输出一个配置对象。
• YAML - 使用 .eslintrc.yaml 或 eslintrc.yml 去定义配置的结构。
• JSON - 使用 .eslintrc.json ，ESLint 的 JSON 文件允许 JavaScript 风格的注释。
• （弃用） - 使用 .eslintrc ，可以是 JSON 也可以是 YAML。
• package.json - 在 package.json 里创建一个 eslintConfig 属性，定义配置。

推荐使用 js 文件，方便注释

忽略文件

可以在项目根目录创建一个 .eslintignore 文件来告诉 ESLint 去忽略检查某些文件或目录。

注意

只能在根目录创建，且只有一个忽略文件，在子目录创建额外的并不会生效。

配置文件参数说明

常用

globals: {
    // 指定环境为我们提供了预置的全局变量
    // 对于那些我们自定义的全局变量，可以用globals指定
    // 设置每个变量等于true允许变量被重写，或false不允许被重写
    //
    // jQuery: false,
    // $: false
},

// 使用一个别人制定好的规则作为基础
extends: {
    'eslint-config-alloy'
},

// 自定义规则。可以在这里关闭某些规则，或者配置适合自己的规则
// 优先级高于 extends
//
// 具体规则配置
// off或0--关闭规则
// warn或1--开启规则，警告级别(不会导致程序退出)
// error或2--开启规则，错误级别(当被触发的时候，程序会退出)
rules: {
    "eqeqeq": "warn",
    //你也可以使用对应的数字定义规则严重程度
    "curly": 2,
    //如果某条规则有额外的选项，你可以使用数组字面量指定它们
    //选项可以是字符串，也可以是对象
    "quotes": ["error", "double"],
    "one-var": ["error", {
      "var": "always",
      "let": "never",
      "const": "never"
    }],
}
复制代码

详细配置参数

参考：
gist.github.com/rswanderer/…

所有规则说明

参考：（官方文档）
eslint.cn/docs/rules/

转载于:https://juejin.im/post/5b9cb8b0f265da0ae343e3c0