ESLint简单学习

为何要使用ESLint

1. 尽早发现代码中的错误：语法错误、不符合样式、不符合最佳实践的部分
2. 使用ESLint能获得的收益：减少bug、代码风格统一、提高代码质量。

简单的使用方法

使用npm安装

npm install eslint --save-dev
./node_modules/.bin/eslint --init // 获取eslint命令，执行init命令
./node_modules/.bin/eslint src // 对src目录执行eslint检查

如果全局安装eslint，可以直接用eslint代替./node_modules/.bin/eslint

配置

1. 配置方式：在代码中添加注释配置；使用.eslintrc配置文件
2. 注释配置

 /* eslint semi: 2 */ 在本文件中开启分号报错规则
 /* eslint-disable */ 从此开始禁用ESLint
 /* eslint-enable */  从此开始恢复使用ESLint
 /* eslint-disable no-alert */ 从此开始禁用ESLint的no-alert规则
 some code // eslint-disable 只在此行禁用eslint

3. 配置文件结构

{
  // 脚本执行环境
  "env": { "browser": true, "es6": true },
  // 已经配置好的规则
  "extends": [ "eslint:recommended", "plugin:vue/essential" ],
  // 脚本执行环境的全局变量，访问未定义且未在此列出的全局变量时会报错
  "globals": { "Atomics": "readonly", "SharedArrayBuffer": "readonly" },
  // 解析器选项
  "parserOptions": { "ecmaVersion": 2018, "sourceType": "module" },
  // 插件，从另一种文件中提取js代码
  "plugins": [ "vue" ],
  // 规则：0:off, 1:warn 2:error
  "rules": { "semi": ["error"], "quotes": ["error", "double"] }
}

4. 离文件最近的配置文件优先级最高
5. 忽略文件：创建.eslintignore,模式与.gitignore相同

命令行

eslint --fix src // 自动修复可以修复的代码
eslint src // 检查src目录里的代码

集成

官方文档有很多编辑器的集成文档

自定义规则

1. 规则文件格式

module.exports = {
    meta: {
        type: "suggestion", // problem(不改会出问题)/suggestion(建议你改)/layout(只是外观问题)

        docs: { // 核心规则必需
            description: "disallow unnecessary semicolons", // 规则简单描述
            category: "Possible Errors", // 规则分类
            recommended: true, // 是不是列入recommended
            url: "https://eslint.org/docs/rules/no-extra-semi" // 完整文档的地址
        },
        fixable: "code", // 是否可以修复，不赋值则不修复
        schema: [] // 配置规则时的选项，第一个为错误级别，第二个为其它选项
    },
    create: function(context) { // 返回一个对象，包含了ESLint在遍历AST时用来访问节点的方法。 context包含很多属性
        return {
            // callback functions
        };
    }
};

2. 配置schema

schema: [
            { // 错误级别选项
                "enum": ["always", "never"]
            },
            { // 其他参数选项
                "type": "object", 
                "properties": {
                    "exceptRange": {
                        "type": "boolean"
                    }
                },
                "additionalProperties": false
            }
        ]

3. context:

parseOptions: // 解析器选项
options: // 配置信息

4. 报告问题：

context.report({
    node: node, // 包含错误代码的定位信息 
    message: "missing semicolon",
    fix: function(fixer) { // fixer包含多个方法，全是增删改
        return fixer.insertTextAfter(node, ';');
    }
})

5. 简单的规则实例

/* eslint-disable */
module.exports = {
  create: function (context) {
    return {
      BinaryExpression(node) { // 检查BinaryExpression(AST的一个结构)节点
        if (node.operator === 'in' && node.left.operator === '!') {
          context.report({
            node: node, // 包含错误代码的定位信息 
            message: "禁止对左值使用!"
          })
        }
      }
    };
  }
};

6. 使用自定义规则

eslint --rulesdir eslint_rules(自定义的规则的父文件夹) src(要检测的文件)