ESlint官网：https://zh-hans.eslint.org/docs/latest/use/getting-started

在开发项目时，一直都可以看到有 ESlint 的配置文件，由于都是我独立开发项目，所以我常常将它关闭掉。

今天我来配合着视频和官方文档，来学习一下，然后写个博客记录一下。

1、ESLint说明

ESLint是一个根据文件配置识别并提示开发者，JavaScript代码问题的工具。

• ESLint 完全是插件式的，每个规则都是一个插件，你可以在运行时中添加更多插件。
• 我们在编写 Vue 时，它可以检查代码错误，是因为安装了对应的规则插件。

2.ESLint配置文件_后缀名

在创建 Vue 项目后，在官方文档会有一个 .eslintrc.* 的文件。

• 使用 JavaScript 时，后缀名应该是：.js。
• 使用 JavaScript 且 package.json -> type:"module" 时，后缀名应该是：.cjs。
• 这里还有 .yaml | .yml | .json 结尾。
• 还可以在 package 文件里新增加 eslintConfig 字段来配置ESLint。

以下是上面这些文件中的查找优先级。

• .js > .cjs > .yaml > .yml > .json > package.json。

3.配置ESLint

ESLint主要有两个配置方法：

• 注释配置：在JavaScript代码中直接嵌入配置信息。
• 配置文件：在配置文件中进行配置。

// 注释配置: 假设已经不允许在控制台打印

// 在此处禁用 no-console 规则
// eslint-disable-next-line no-console
console.log('This is a console log.');

以下是ESLint中，一些常用的配置选项：

• 环境(env)：你的脚本被设计为在哪些环境下运行，每个环境都会附带一组预设的全局变量。

module.exports = {
    // 配置在哪些环境下运行
    env: {
        // 开启浏览器环境
        browser: true,
        // 开启Node环境
        node: true
    }
};

/**
* 浏览器环境：
* - 如果不开启它的话：那么在使用 documenu 及对象或其它变量时, 肯定就会报错。
* 
* Node环境：
* - 同样的开启它之后，就可以使用Node中的全局变量。
*/

• 全局变量(globals)：脚本在执行过程中需要用到的额外全局变量。

/*
* 假设使用JQuery这个库，那么需要使用到 $ 这个符号。
*  - 假设 env 中也没用 Jquery 这个环境。
*  - 那肯定是无法识别到我们代码中编写的 $ 这个符号，然后报错。
*
* 我们这时可以定义全局变量。
*/

module.exports = {
    // 配置在哪些环境下运行
    globals : {
        // 将 $ 添加成全局变量, 并且不允许为 $ 重新赋值, 如果为 true 则可以重新赋值。
        // 现在! 可以在全局尽情的访问 $ 了。
        '$': false,
    }
};

• 规则(rules)：启用了哪些规则，它们又是什么级别错误水平。

/**
* 它来校验你的代码是否符合某个期望, 如果不符合那么ESLint应该怎么提示你呢?
*  - "off"   | 0:  关闭规则
*  - "warn"  | 1:  启用并视作警告
*  - "error" | 2:  启用并视作错误
*/

module.exports = {
    // 配置规则
    rules:{
        // 是否强制使用 ===, 如果关闭后, 则可以使用 ==
        eqeqeq: 'off',
        // 必须使用{}包裹, 那么只是有单个if语句, 也要使用{}包裹，不能写成一行。
        curly: 'error',
        // 用于检查字符串字面量的的风格，它的值是一个数组，第一个元素是严重程度。
        quotes: ['error', 'backtick', 'single'], //错误,可以使用`引号和'引号
    }
};

• 插件(plugins)：第三方插件为 ESLint 定义了额外的规则、环境、配置等。

module.exports = {
    // 元素中, 可以省略 eslint-plugin- 前缀，例如：plugin1.
    plugins : [
        'plugin1',
        'eslint-plugin-plugin2'
    ]
};

• 当然还有很多其它的配置项：忽略文件、解析器、扩展...