Eslint

介绍

Eslint 是可组装的 JavaScript 和 JSX 检查工具

这句话的意思是，是用来检测 js 和 jsx 语法的工具，可以配置各项功能（是一个检测工具，包含 js 语法以及少部分格式问题，保证代码能正常运行，格式是其次）

使用 Eslint，关键是写 Eslint 配置文件，里面写上各种 rules 规则，将来运行 Eslint 时就会以写的规则对代码进行检查

# 安装
pnpm i eslint -D

# 生成配置文件.eslint.cjs
npx eslint --init

配置文件

配置文件由很多种写法：

• .eslintrc.*：新建文件，位于项目根目录

  • .eslintrc

  • .eslintrc.js

  • .eslintrc.json

  • 区别在于配置格式不一样

• package.json 中 eslintConfig：不需要创建文件，在原有文件基础上写

ESLint 会查找和自动读取它们，所以以上配置文件只需要存在一个即可

具体配置

以.eslintrc.js配置文件为例：

module.exports = {
  // 解析选项
  parserOptions: {},
  // 具体检查规则
  rules: {},
  // 继承其他规则
  extends: [],
  // ...
  // 其他规则详见：https://eslint.bootcss.com/docs/user-guide/configuring
};

1. parserOptions 解析选项

parserOptions: {
  ecmaVersion: 6, // ES 语法版本
  sourceType: "module", // ES 模块化
  ecmaFeatures: { // ES 其他特性
    jsx: true // 如果是 React 项目，就需要开启 jsx 语法
  }
}

2. rules 具体规则

• "off" 或 0 - 关闭规则

• "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)

• "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

rules: {
  semi: "error", // 禁止使用分号
  'array-callback-return': 'warn', // 强制数组方法的回调函数中有 return 语句，否则警告
  'default-case': [
    'warn', // 要求 switch 语句中有 default 分支，否则警告
    { commentPattern: '^no default$' } // 允许在最后注释 no default, 就不会有警告了
  ],
  eqeqeq: [
    'warn', // 强制使用 === 和 !==，否则警告
    'smart' // https://eslint.bootcss.com/docs/rules/eqeqeq#smart 除了少数情况下不会有警告
  ],
}

更多规则详见：规则文档

3. extends 继承

开发中一点点写 rules 规则太费劲了，所以有更好的办法，继承现有的规则。

现有以下较为有名的规则：

• Eslint 官方的规则：eslint:recommended

• Vue Cli 官方的规则：plugin:vue/essential

• React Cli 官方的规则：react-app

// 例如在React项目中，我们可以这样写配置
module.exports = {
  extends: ["react-app"],
  rules: {
    // 我们的规则会覆盖掉react-app的规则
    // 所以想要修改规则直接改就是了
    eqeqeq: ["warn", "smart"],
  },
};

package.json 运行脚本

"scripts": {
    "lint": "eslint src",
    "fix": "eslint src --fix",
}

VSCode Eslint 插件

打开 VSCode，下载 Eslint 插件，即可不用编译就能看到错误，可以提前解决

但是此时就会对项目所有文件默认进行 Eslint 检查了， dist 目录下的打包后文件就会报错。但是只需要检查 src 下面的文件，不需要检查 dist 下面的文件。

所以可以使用 Eslint 忽略文件解决。在项目根目录新建下面文件:

• .eslintignore

# 忽略dist目录下所有文件
dist