《从零开始学习Vite》第四章：自动化代码规范工具的使用

🍎 系列文章

在系列中，将从零学习Vite，系统梳理 Vite 本身的知识，也包括 Vite 底层所使用的 Esbuild、Rollup 双引擎、Babel 编译工具链、模块规范标准等等构建生态。

《从零开始学习Vite》 第一章：搭建前端项目

《从零开始学习Vite》 第二章：接入 CSS 工程化方案

《从零开始学习Vite》 第三章：静态资源处理

《从零开始学习Vite》第四章：自动化代码规范工具的使用

在上一章中，我们学习了如何加载静态资源和如何在生产环境中对静态资源进行优化。本章，我们将学习前端自动化代码规范工具的使用。

在多人协作的工程项目中，代码规范是非常重要的，它可以统一团队代码风格，避免不同风格的编码混杂在一起难以阅读，在开发阶段可以提前规避一些语法错误，从而有效提高代码质量。包括：ESLint、Prettier、Stylelint、Commitlint等主流Lint工具的使用，还会配合husky、lint-staged、VSCode插件和Vite插件，搭建完整的前端开发和代码提交工作流。

ESLint

初始化

首先我们需要安装ESLint

pnpm add -D eslint

接着利用ESLint官方的Cli进行初始化操作

npx eslint --init

接着 ESLint 会帮我们自动生成.eslintrc.js配置文件，并用 pnpm 安装了相应的依赖。这里介绍ESLint几个核心的配置项：

1. parser

ESLint底层是使用Espree这个解析器进行AST解析的，目前能够解析大部分ECMAScript规范的语法。比如还不能解析TypeScript，因些需要引入其他的解析器对TypeScript进行解析，社区提供了社区提供了@typescript-eslint/parser这个解决方案，将Typescript代码转换为Espree能够识别的格式，然后 Eslint 再通过Espree进行格式检查，以此兼容了 TypeScript 语法。

2. rules

rules 配置是表示手动调整哪些代码规则，比如 验证您的React组件是否可以通过快速刷新安全地更新

module.exports = {
   
  // 其他配置省略
  rules: {
   
    'react-refresh/only-export-components': [
      'warn',
      {
    allowConstantExport: true },
    ],
  },
}

在 rules 对象中，key 一般为规则名，value 为具体的配置内容，在上述的例子中我们设置为一个数组，数组第一项为规则的 ID，第二项为规则的配置。
你可以设置以下的规则 ID:

• off或0: 表示关闭规则。
• warn或1: 表示开启规则，违背规则后只抛出 warning，而不会导致程序退出。
• error或2: 表示开启规则，违背规则后抛出 error，程序会退出。

具体的规则配置，你可以参考ESLint 官方文档

3. extends

extends 相当于继承另外一份 ESLint 配置，可以配置为一个字符串，也可以配置成一个字符串数组。

主要分如下 3 种情况:

• 从 ESLint 本身继承；
• 从 npm 包继承，比如# eslint-config-airbnb
• 从 ESLint 插件继承;

// .eslintrc.cjs
module.exports = {
   
// 其他配置省略
    "extends": [
        // 第1种情况
        "eslint:recommended",
        // 第2种情况，一般配置的时候可以省略`eslint-config`
        "airbnb"
        //第3种情况，可以省略包名中的`eslint-plugin`
        //格式一般为:`plugin:${pluginName}/${configName}`
        'plugin:@typescript-eslint/recommended',
        'plugin:react-hooks/recommended',
    ]
}

有了 extends 的配置，我们就不需要手动一一开启了rules，通过 extends 字段即可自动开启插件中的推荐规则:
extends:["plugin:@typescript-eslint/recommended"]

4. env

表示运行环境在指定的运行环境中会预设一些全局变量，比如：

// .eslintrc.cjs
env: {
    browser: true, es2020: true }

指定上述的env配置后便会启用浏览器环境，及启用 es2020。

5. globals

有些全局变量是业务代码引入的第三方库所声明，这里就需要在globals配置中声明全局变量了。
每个全局变量的配置值有 3 种情况:

• "writable"或者true，表示变量可重写；
• "readonly"或者false，表示变量不可重写；
• “off”，表示禁用该全局变量；
  举例，我们可以在配置文件中声明如下:

// .eslintrc.cjs
module.exports = {
   
    "globals": {
   
        //不可重写
        "$":false,
        "jQuery": false
    }
}

Vite 接入 ESLint 插件

我们除了安装编辑器插件外，也可以通过 Vite 插件的方式在开发阶段进行 ESLint 扫描，通过命令行的方式展示不符合规范问题，并能够直接定位到原文件。
安装 ESLint 插件

pnpm add -D vite-plugin-eslint

然后在vite.config.ts中接入:

// vite.config.ts
import viteEslint from "vite-plugin-eslint"</