代码检查和格式化

eslint的实现原理

简单的说就是：ESLint 使用解析器将 JavaScript 代码解析成抽象语法树(AST)， ESLint 的规则定义了代码检查的标准。ESLint 通过遍历 AST 来访问代码的每个部分，同时应用规则进行检查。

eslint解析器

ESLint 默认的解析器（parser）是 Espree。Espree 是一个用于解析 ECMAScript（JavaScript）代码的解析器。因此，ESLint 默认的解析器主要用于检查 JavaScript 代码，默认支持到ES5的语法，假如需要支持更高版本的语法，则可以通过parserOptions来指定版本号。

js 复制代码

parserOptions: {
    // 指定支持es6的语法
    ecmaVersion: 6,
    // 默认是script，但我们现在都是模块，所以将它指定为module
    sourceType: 'module',
    ecmaFeatures: {
        // 启用jsx语法，如果不打开，当我们写jsx语法的时候，eslint就会校验不通过，因为它会认为<不是一个合法的token
        jsx: true,
    }
}

规则继承

预定义配置集

插件通常都有一些预定义配置集，比如 eslint:all 和 eslint:recommended。

eslint:recommended：这是 ESLint 提供的默认推荐配置。它包含了一组被认为是广泛适用于大多数项目的规则。这些规则旨在提高代码质量、可读性和一致性。eslint:recommended 是一个相对保守的配置，仅包含了一些基本的、非争议性的规则。
eslint:all：这是 ESLint 提供的更为严格和全面的配置。与 eslint:recommended 相比，eslint:all 包含了更多的规则，其中一些可能会更为严格或针对特定的代码风格和最佳实践。使用 eslint:all 可能会导致更多的警告或错误，但这也意味着你的代码将被检查得更加严格。

预定义配置集的继承

我们通常会使用extends关键字来进行规则的继承，配置方式如下：

json 复制代码

{
  "extends": "eslint:recommended"
}

覆盖预定义配置集的规则

还可以使用预定义配置集并覆盖某些设置配置选项的示例：

js 复制代码

module.exports = {
    "extends": "eslint:recommended",
    "rules": {
        // enable additional rules
        "indent": ["error", 4],
        "linebreak-style": ["error", "unix"],
        "quotes": ["error", "double"],
        "semi": ["error", "always"],

        // override configuration set by extending "eslint:recommended"
        "no-empty": "warn",
        "no-cond-assign": ["error", "always"],

        // disable rules from base configurations
         "for-direction": "off",
    }
}

第三方规则集

一些第三方的规则集通常使用eslint-config-xxxx命名，比如eslint-config-ali/react

eslint插件

但是我们写代码并不是只有JS代码，我们通常使用React，Vue等框架开发，而默认的解析器只能解析JS代码。因此，eslint提供了eslint插件来扩展eslint的功能。

eslint插件的配置

eslint插件通常提供了对应的解析器和校验规则。举个例子，eslint-plugin-vue

该插件没有包含自己的解析器而是依赖于 ESLint 的默认解析器和其他语言解析器，例如 babel-eslint 或 @typescript-eslint/parser。该插件暴露了一些规则供我们去继承，比如plugin:vue/recommended。

在配置文件中，你需要指定解析器，例如：

json 复制代码

{
  "parser": "babel-eslint",
  "plugins": ["vue"],
  "extends": ["eslint:recommended", "plugin:vue/recommended"]
}

或者，如果你使用 TypeScript：

json 复制代码

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["vue"],
  "extends": ["eslint:recommended", "plugin:vue/recommended"]
}

处理器可以从其他类型的文件中提取 JavaScript 代码，然后让 ESLint 对 JavaScript 代码进行 lint。或者，处理器可以在预处理期间转换 JavaScript 代码。

特定文件指定处理器

要为特定类型的文件指定处理器，请使用 overrides 键和 processor 键的组合。例如，以下使用处理器 a-plugin/markdown 处理 *.md 文件。

json 复制代码

{
    "plugins": ["a-plugin"],
    "overrides": [
        {
            "files": ["*.md"],
            "processor": "a-plugin/markdown"
        }
    ]
}

常见的eslint插件

eslint-plugin-react
eslint-plugin-vue
eslint-config-prettier

vscode插件--eslint

我们每次做项目的时候，都要先eslint . --fix统一格式，再push提交代码。或者是把指令添加到package.json文件中，执行npm run lint，再push。这样就很麻烦，并且也不够直观，因为错误问题只有在你执行了指令之后才能看到。那么我想在我一边写代码的时候就能直接看到错误，然后就能直接随手改正错误，这要怎么做呢？这时eslint的vscode插件诞生了。

eslint插件是如何工作的

查找 ESLint 配置：插件会尝试查找项目中的 ESLint 配置文件（例如 .eslintrc.js、.eslintrc.json、.eslintrc.yml 等），或者全局配置文件。
启动 ESLint 进程：插件会启动一个 ESLint 进程，该进程会加载项目中的 ESLint 配置，并准备好用于检查和修复代码的规则。
监听文件变化： ESLint 插件会监听当前编辑器中文件的变化，以确保实时地捕获并处理代码更改。
校验和修复代码：当用户保存文件或手动触发检查时，插件会向 ESLint 进程发送请求，请求对当前打开的文件进行代码检查。ESLint 进程将返回任何潜在的问题，并且插件会在编辑器中显示这些问题。
自动修复：如果用户启用了自动修复功能，插件可以在保存文件时根据 ESLint 的规则自动修复一些问题，例如格式错误或可修复的语法错误。
集成用户设置：插件可以集成用户在 VSCode 设置中定义的 ESLint 配置选项，以及用户可能在项目中自定义的配置。

vscode的eslint如何配置

配置项如下：

json 复制代码

    // 这个配置项表示在键入代码时是否进行格式化
    "editor.formatOnType": true,
    // 这个配置项表示在保存文件时是否进行格式化
    "editor.formatOnSave": true,
    // 这个配置项启用了 ESLint 的代码动作（Code Action）提示文档功能
    "eslint.codeAction.showDocumentation": {
        "enable": true
    },
    // 这个配置项表示在保存文件时是否应用 ESLint 的修复操作
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
    },
    // 这个配置项定义了哪些文件类型会被 ESLint 插件检测
    "eslint.validate": ["javascript", "javascriptreact", "html", "vue"],

配置文件查找顺序

vscode插件是根据当前项目的eslint配置文件进行校验的。配置文件的查找顺序如下：

工作区配置文件：如果你的项目中有一个名为 .eslintrc.js、.eslintrc.json、.eslintrc.yml 或 .eslintrc 的文件，并且这个文件在 VSCode 打开的工作区根目录下，那么插件将使用这个文件的配置。
全局配置文件：如果没有在工作区找到配置文件，插件会尝试在用户主目录下查找全局配置文件。典型的全局配置文件名为 .eslintrc.js、.eslintrc.json、.eslintrc.yml 或 .eslintrc。
npm 包配置文件：如果在项目的根目录下没有找到配置文件，插件还会检查是否有 package.json 文件，如果有，它会查找 package.json 文件中的 eslintConfig 字段。
插件设置：最后，如果以上都失败，插件会检查 VSCode 用户设置中是否有关于 ESLint 的配置。你可以在 VSCode 的设置中手动配置 "eslint.options"，指定一个配置文件路径或配置对象。

Prettier

prettier的工作流程

将代码转换成抽象语法树，应用内置的格式化规则，然后将格式化后的代码输出。其不可配置的特性使得 Prettier 在项目中更容易实现一致的代码风格。由于不同于传统的规则配置，Prettier 在一定程度上减少了代码格式的争议，使得开发者可以更专注于编写业务逻辑而不是担心代码格式。

解决prettier和eslint的冲突

假如你同时在vscode插件里吗配置了prettier和eslint的保存时修复，则可能因为规则不一样而引起冲突，因为prettier负责代码格式，eslint则同时可以支持代码格式和代码质量，这个时候我们希望代码格式由prettier负责就好，而eslint则只需负责代码质量。解决方案是借助eslint-config-prettier和eslint-plugin-prettier。

eslint-config-prettier作用是关闭eslint中与prettier冲突的规则。
eslint-plugin-prettier作用是让eslint用prettier来格式化，相当于当代码格式不符合prettier的配置的时候，也可以报错一个eslint错误

修改配置如下：

js 复制代码

module.exports = {
    extends: [
        // 新增如下的配置，实际上就是eslint-plugin-prettier的推荐规则集
        // 而eslint-plugin-prettier实际上就是依赖eslint-config-prettier来关闭冲突的，使用前需同时安装这两个包
        'plugin:prettier/recommended'
    ]
};

参考链接

eslint中文网