lint代码规范工具

ESLint

ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。

使用 ESLint 需要我们在项目的根目录下添加 .eslintrc.js 或 .eslintrc.json 文件，在其中导出配置对象,下面是示例：

{
"root": true,

// 继承已有配置对象
"extends": [
  "eslint:recommended",
  "plugin:@typescript-eslint/recommended"
],

// 如何理解代码
"parser": "@typescript-eslint/parser",
"parserOptions": { "project": ["./tsconfig.json"] },

// 添加哪些规则
"plugins": [
  "@typescript-eslint"
],

// 已添加规则的开启 / 关闭
"rules": {
  "@typescript-eslint/strict-boolean-expressions": [
    2,
    {
      "allowString" : false,
      "allowNumber" : false
    }
  ]
},

// 对特殊文件应用特殊配置
"overrides": [
  {
    "files": ["*.vue"],
    "rules": {
      // 所有 .vue 文件除了应用上面的公共规则配置外，还需应用的独特规则配置。
    },
  },
],
}

ESLint 理解代码

parser 和 parserOptions 选项与 ESLint 如何理解我们的代码相关。这里分析器 @typescript-eslint/parser 负责解析 TypeScript 语言，将代码转化为 AST 语法树，便于进行分析。而 parserOptions 可以对解析器的能力进行详细设置。
ESLint 判断代码规范

ESLint 提供了自定义规则的接口，开发者需要遵照接口，根据分析器的 AST 产物，实现规范检查逻辑，再将实现的多条规范聚合为 plugin 插件的形式。plugin 字段指定了 ESLint 应用什么规则集，具有理解哪些规范的能力
规则的启用与禁用

有了规则集，能够理解规范，不代表 ESLint 就要对不规范的内容做出响应，还需要进一步在 rules 字段中对这些规则进行开启或者关闭的声明，只有开启的规则才会生效。
继承已有配置

面对琳琅满目的规则集，我们完全在项目中配置是不可取的。因此社区逐渐演进出了许多配置预设，让我们可以一键继承，从而减少绝大多数手动配置的工作量。例如例子中的 eslint:recommended、plugin:@typescript-eslint/recommended 就代表继承了 eslint 和 typescript-eslint 的推荐配置。
配置的重写

如果我们希望某些文件应用一些独特的配置，可以使用 overrides 字段实现。overrides 的每个成员对象都需要指定目标文件，除了应用所有父级配置之外，还要应用成员对象中声明的独有配置。ESLint 支持文件级别的重写。

依赖安装

安装 eslint 核心工具

pnpm i -wD eslint
安装 typescript-eslint 系列工具解析 typescript，为了解析 Vue 语法也要安装 vue-eslint-parser

pnpm i -wD @typescript-eslint/parser @typescript-eslint/eslint-plugin vue-eslint-parser
import 模块引入相关的规则

pnpm i -wD eslint-plugin-import eslint-plugin-vue
选择一个熟悉的规则安装，这里选择 Airbnb 规则集

pnpm i -wD eslint-config-airbnb-base eslint-config-airbnb-typescript
安装 eslint-define-config，方便编写.eslintrc.js 文件时，提供完善的类型支持

pnpm i -wD eslint-define-config

配置

我们在根目录建立 .eslintrc.js 文件，作为 ESLint 的配置文件。

const { defineConfig } = require('eslint-define-config');
const path = require('path');

module.exports = defineConfig({
  // 指定此配置为根级配置，eslint 不会继续向上层寻找
  root: true,

  // 将浏览器 API、ES API 和 Node API 看做全局变量，不会被特定的规则(如 no-undef)限制。
  env: {
    browser: true,
    es2022: true,
    node: true,
  },

  // 设置自定义全局变量，不会被特定的规则(如 no-undef)限制。
  globals: {
    // 假如我们希望 jquery 的全局变量不被限制，就按照如下方式声明。
    // $: 'readonly',
  },

  // 集成 Airbnb 规则集以及 vue 相关规则
  extends: [
    'airbnb-base',
    'airbnb-typescript/base',
    'plugin:vue/vue3-recommended',
  ],

  // 指定 vue 解析器
  parser: 'vue-eslint-parser',
  parserOptions: {
    // 配置 TypeScript 解析器
    parser: '@typescript-eslint/parser',

    // 通过 tsconfig 文件确定解析范围，这里需要绝对路径，否则子模块中 eslint 会出现异常
    project: path.resolve(__dirname, 'tsconfig.eslint.json'),

    // 支持的 ecmaVersion 版本
    ecmaVersion: 13,

    // 我们主要使用 esm，设置为 module
    sourceType: 'module',

    // TypeScript 解析器也要负责 vue 文件的 <script>
    extraFileExtensions: ['.vue'],
  },

  // 在已有规则及基础上微调修改
  rules: {
    'import/no-extraneous-dependencies': 'off',
    'import/prefer-default-export': 'off',

    // vue 允许单单词组件名
    'vue/multi-word-component-names': 'off',

    'operator-linebreak': ['error', 'after'],
    'class-methods-use-this': 'off',

    // 允许使用 ++
    'no-plusplus': 'off',

    'no-spaced-func': 'off',

    // 换行符不作约束
    'linebreak-style': 'off',
  },

  // 文件级别的重写
  overrides: [
    // 对于 vite 和 vitest 的配置文件，不对 console.log 进行错误提示
    {
      files: [
        '**/vite.config.*',
        '**/vitest.config.*',
      ],
      rules: {
        'no-console': 'off',
      },
    },
  ],
});

对于一些我们不希望应用 ESLint 检查的内容，我们可以通过 .eslintignore 文件将之排除，.eslintignore 的规则与 .gitignore 的规则完全相同。我们排除 ESLint 对依赖目录与产物目录的检查。

node_modules
dist

!.eslintrc.js
!.stylelintrc.js
!.prettierrc.js
!.lintstagedrc.js
!.commitlintrc.js

之后，我们在 package.json 中加入 eslint 检查的脚本，并尝试执行检查。

  // 其他配置...
  "scripts": {
+   "lint:script": "eslint --ext .js,.jsx,.ts,.tsx,.vue --fix ./",
    // 其他脚本...
  }
}```

执行

1	pnpm run lint:script

正确配置后，ESLint 能检查出不少错误，包括了 .vue、.ts 文件。