前端工程化工具系列(一)—— 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"}
}
  1. 将配置内容修改为 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):代码质量守护者 基础篇的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1020037

相关文章

Spring Boot 3.4.3 基于 Spring WebFlux 实现 SSE 功能(代码示例)

《SpringBoot3.4.3基于SpringWebFlux实现SSE功能(代码示例)》SpringBoot3.4.3结合SpringWebFlux实现SSE功能,为实时数据推送提供... 目录1. SSE 简介1.1 什么是 SSE?1.2 SSE 的优点1.3 适用场景2. Spring WebFlu

java之Objects.nonNull用法代码解读

《java之Objects.nonNull用法代码解读》:本文主要介绍java之Objects.nonNull用法代码,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录Java之Objects.nonwww.chinasem.cnNull用法代码Objects.nonN

SpringBoot实现MD5加盐算法的示例代码

《SpringBoot实现MD5加盐算法的示例代码》加盐算法是一种用于增强密码安全性的技术,本文主要介绍了SpringBoot实现MD5加盐算法的示例代码,文中通过示例代码介绍的非常详细,对大家的学习... 目录一、什么是加盐算法二、如何实现加盐算法2.1 加盐算法代码实现2.2 注册页面中进行密码加盐2.

python+opencv处理颜色之将目标颜色转换实例代码

《python+opencv处理颜色之将目标颜色转换实例代码》OpenCV是一个的跨平台计算机视觉库,可以运行在Linux、Windows和MacOS操作系统上,:本文主要介绍python+ope... 目录下面是代码+ 效果 + 解释转HSV: 关于颜色总是要转HSV的掩膜再标注总结 目标:将红色的部分滤

使用Java实现通用树形结构构建工具类

《使用Java实现通用树形结构构建工具类》这篇文章主要为大家详细介绍了如何使用Java实现通用树形结构构建工具类,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录完整代码一、设计思想与核心功能二、核心实现原理1. 数据结构准备阶段2. 循环依赖检测算法3. 树形结构构建4. 搜索子

C#基础之委托详解(Delegate)

《C#基础之委托详解(Delegate)》:本文主要介绍C#基础之委托(Delegate),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. 委托定义2. 委托实例化3. 多播委托(Multicast Delegates)4. 委托的用途事件处理回调函数LINQ

在C#中调用Python代码的两种实现方式

《在C#中调用Python代码的两种实现方式》:本文主要介绍在C#中调用Python代码的两种实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录C#调用python代码的方式1. 使用 Python.NET2. 使用外部进程调用 Python 脚本总结C#调

利用Python开发Markdown表格结构转换为Excel工具

《利用Python开发Markdown表格结构转换为Excel工具》在数据管理和文档编写过程中,我们经常使用Markdown来记录表格数据,但它没有Excel使用方便,所以本文将使用Python编写一... 目录1.完整代码2. 项目概述3. 代码解析3.1 依赖库3.2 GUI 设计3.3 解析 Mark

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

Java时间轮调度算法的代码实现

《Java时间轮调度算法的代码实现》时间轮是一种高效的定时调度算法,主要用于管理延时任务或周期性任务,它通过一个环形数组(时间轮)和指针来实现,将大量定时任务分摊到固定的时间槽中,极大地降低了时间复杂... 目录1、简述2、时间轮的原理3. 时间轮的实现步骤3.1 定义时间槽3.2 定义时间轮3.3 使用时