前端工程化工具系列（一）—— ESLint(v9.3.0)：代码质量守护者 基础篇

本文主要是介绍前端工程化工具系列（一）—— ESLint(v9.3.0)：代码质量守护者 基础篇，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

ESLint 作为前端工程化中的重要工具，主要用于检查和修复 JavaScript/TypeScript 代码中的错误。目的是为了统一代码风格，并确保代码的一致性和可维护性。

1. 环境要求

v9 以上的 ESLint，支持 Node.js 的版本 v18.18.0+，v20.9.0+ 以及 v21.1.0+ 版本的 Node.js，不支持v19及之前的版本。
在命令行中输入以下内容来查看当前系统中 node 的版本。

node -v

Node.js 推荐使用 v18.20.3 或者 v20.13.1。

这里使用的包管理器是 PNPM，版本为 v9.1.4。

2. 安装

这里以使用 ESLint + Airbnb 风格为例。

2.1 安装 ESLint

在对应的项目下打开命令行，执行：

pnpm install -D eslint @eslint/js

如果是 NPM 或者 Yarn，由于好多命令是通用的，因此上方的命令行中直接替换成对应的包管理名即可，例：npm install -D eslint @eslint/js

2.2 针对 JavaScript

安装对应的 Airbnb 配置。

pnpm install -D eslint-config-airbnb-base eslint-plugin-import

2.3 针对 TypeScript

pnpm install -D eslint-config-airbnb-base eslint-plugin-import eslint-config-airbnb-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser

可以看出是在 JavaScript 的基础上多了规则、插件和解析器。

2.4 兼容之前的配置

从 ESLint v9.0.0 开始，默认采用新的扁平化配置系统。绝大部份扩展和插件都没有做适配，因此需要通过以下包来兼容旧的配置。

pnpm install -D @eslint/compat @eslint/eslintrc

3 配置

在项目的根目录下创建 ESLint 的配置文件：eslint.config.js。

3.1 针对 JavaScript

在 eslint.config.js 中加入以下配置：

/* eslint-disable no-underscore-dangle */
/* eslint-disable import/no-extraneous-dependencies */
// eslint-disable-next-line import/no-unresolved
import { fixupConfigRules } from '@eslint/compat';
import { FlatCompat } from '@eslint/eslintrc';
import js from '@eslint/js';
import path from 'path';
import { fileURLToPath } from 'url';// mimic CommonJS variables -- not needed if using CommonJS
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);const flatCompat = new FlatCompat({baseDirectory: __dirname, // optional; default: process.cwd()resolvePluginsRelativeTo: __dirname, // optionalrecommendedConfig: js.configs.recommended, // optional unless you're using "eslint:recommended"
});export default [...fixupConfigRules(// 因为v9变化较大，为了兼容之前的config，提供了方法转换整个旧的config。flatCompat.config({extends: ['airbnb-base'],rules: {'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off','no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off','max-len': ['error', 200],},}),),{languageOptions: {ecmaVersion: 'latest',sourceType: 'module',},},
];

3.2 针对 TypeScript

/* eslint-disable @typescript-eslint/no-unsafe-member-access */
/* eslint-disable @typescript-eslint/naming-convention */
/* eslint-disable @typescript-eslint/no-unsafe-call */
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
/* eslint-disable no-underscore-dangle */
/* eslint-disable import/no-extraneous-dependencies */
// eslint-disable-next-line import/no-unresolved
import { fixupConfigRules } from '@eslint/compat';
import { FlatCompat } from '@eslint/eslintrc';
import js from '@eslint/js';
import path from 'path';
import { fileURLToPath } from 'url';// mimic CommonJS variables -- not needed if using CommonJS
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);const flatCompat = new FlatCompat({baseDirectory: __dirname, // optional; default: process.cwd()resolvePluginsRelativeTo: __dirname, // optionalrecommendedConfig: js.configs.recommended, // optional unless you're using "eslint:recommended"
});export default [...fixupConfigRules(// 转换整个configflatCompat.config({extends: ['airbnb-base','airbnb-typescript/base','plugin:@typescript-eslint/eslint-recommended','plugin:@typescript-eslint/recommended','plugin:@typescript-eslint/recommended-requiring-type-checking',],parserOptions: {project: './tsconfig.json',},rules: {'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off','no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off','max-len': ['error', 200],},}),),
];

问题解决

问题1：

Error: Could not find config file.

解决：
ESLint9 的配置文件名必须为 eslint.config.js，之前的 eslintrc.(可为 空，js, yaml, yml, json）都被废弃了。

问题2：

SyntaxError: Cannot use import statement outside a module

解决：
两种方式：

1. 在 package.json 中添加 “type”: “module”，形如：

{"type": "module","devDependencies": {"@eslint/js": "^9.3.0","eslint": "^9.3.0","eslint-config-airbnb-base": "^15.0.0","eslint-plugin-import": "^2.29.1"}
}

2. 将配置内容修改为 CommonJS 格式：

// eslint.config.js
module.exports = [{rules: {semi: "error","prefer-const": "error"}}
];

问题3:

.eslintignore 中定义的忽略文件不起作用。
解决：
ESLint9 中需要在 eslint.config.js 中进行配置，如：

 {ignores: ['/dist','.idea','.husky','.vscode','pnpm-debug.log*','**/tests/*','node_modules','/ios','/android',],},

这篇关于前端工程化工具系列（一）—— ESLint(v9.3.0)：代码质量守护者 基础篇的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---