关于eslint

ESLint 是什么

ESLint 是一个用来识别 ECMAScript/JavaScript 并且按照规则给出报告的代码检测工具，是一个用来检查代码的工具。

代码检查是一种静态的分析，常用于寻找有问题的模式或者代码，并且不依赖于具体的编码风格。对大多数编程语言来说都会有代码检查，一般来说编译程序会内置检查工具。

JavaScript 是一个动态的弱类型语言，在开发中比较容易出错。因为没有编译程序，为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。

ESLint 这样的工具可以让程序员在编码的过程中发现问题，而不是在执行的过程中发现问题。

ESLint 的校验

第一种：会在代码保存的时候校验，但是只会在控制台进行提示。是vue-cli 自带的

第二种：使用vscode 插件，可以在编写代码时校验，提示错误，并自动保存修复错误。需要通过vscode进行配置

安装Eslint插件

在vscode插件中 查找 Eslint插件 安装并启用

配置 settins.json文件

打开 vscode 配置文件 settins.json，写入 json 配置

禁用其他代码格式插件

此时，eslint 的vscode 配置好了，同时也要注意，如果你的 vscode 安装了自动辅助代码格式的插件，请在项目的工作区禁用。

取消 Format on Save

另外，需要将 Format on Save 这个选项的勾选状态去掉，否则会影响 eslint 的自动保存

ESLint 的特点

• ESLint 是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加更多的规则
• 内置规则和自定义规则共用一套规则 API。
• 内置的格式化方法和自定义的格式化方法共用一套格式化 API。
• 额外的规则和格式化方法能够在运行时指定。
• 规则和对应的格式化方法并不强制捆绑使用。
• 每条规则都是各自独立的，可以根据项目情况选择开启或关闭。
• 用户可以将结果设置成警告或者错误。
• ESLint 并不推荐任何编码风格，规则是自由的。
• 所有内置规则都是泛化的。

ESLint 支持几种格式的配置文件：

• JavaScript - 使用 .eslintrc.js 然后输出一个配置对象。
• YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构。
• JSON - 使用 .eslintrc.json 去定义配置的结构，ESLint 的 JSON 文件允许 JavaScript 风格的注释。
• (弃用) - 使用 .eslintrc，可以使 JSON 也可以是 YAML。
• package.json - 在 package.json 里创建一个 eslintConfig属性，在那里定义你的配置。 如果同一个目录下有多个配置文件，ESLint 只会使用一个。优先级顺序如下：
  • .eslintrc.js
  • .eslintrc.yaml
  • .eslintrc.yml
  • .eslintrc.json
  • .eslintrc
  • package.json

.eslintrc.js配置文件

// .eslintrc.js
module.exports = {
    // 指定解析器
    'parse': '',
    // 指定解析器选项
    'parserOptions': {
        // 默认设置为3，5（默认），可使用 6、7、8 或 9 来指定想要使用的 ECMAScript 版本。
        //也可使用年份命名的版本号指定为 2015（同 6），2016（同7），或 2017（同8）或 2018（同9）
        "ecmaVersion": 6,
        // 设置为 "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)。
        "sourceType": "module",
        // 对象，表示想使用的额外的语言特性
        "ecmaFeatures": {
            "jsx": true  // 启用 JSX
            "globalReturn": true  // 允许在全局作用域下使用 return 语句
            "impliedStrict": true  // 启用全局 strict mode (如果 ecmaVersion 是 5 或更高)
        }
    },
    // 指定脚本的运行环境
    'env': {},
    // 别人可以直接使用你配置好的ESLint, ESLint 一旦发现配置文件中有 "root": true，
    // 它就会停止在父级目录中寻找。
    'root': true,
    // 脚本在执行期间访问的额外的全局变量
    'globals': {},
    // 使用 "extends": "eslint:recommended" 可启用推荐的规则
    "extends": "eslint:recommended",
    // 启用的规则及其各自的错误级别
    'rules': {
        "semi": 2
    }
};

ESLint规则

Possible Errors （JavaScript 代码中可能的错误或逻辑错误）

Stylistic Issues (关于风格指南)

ECMAScript 6

参考自：https://blog.csdn.net/weixin_34246551/article/details/91422835