前端工程化工具系列(一)—— 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

相关文章

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

MySql match against工具详细用法

《MySqlmatchagainst工具详细用法》在MySQL中,MATCH……AGAINST是全文索引(Full-Textindex)的查询语法,它允许你对文本进行高效的全文搜素,支持自然语言搜... 目录一、全文索引的基本概念二、创建全文索引三、自然语言搜索四、布尔搜索五、相关性排序六、全文索引的限制七

Android Mainline基础简介

《AndroidMainline基础简介》AndroidMainline是通过模块化更新Android核心组件的框架,可能提高安全性,本文给大家介绍AndroidMainline基础简介,感兴趣的朋... 目录关键要点什么是 android Mainline?Android Mainline 的工作原理关键

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

基于Java实现回调监听工具类

《基于Java实现回调监听工具类》这篇文章主要为大家详细介绍了如何基于Java实现一个回调监听工具类,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录监听接口类 Listenable实际用法打印结果首先,会用到 函数式接口 Consumer, 通过这个可以解耦回调方法,下面先写一个

使用Java将DOCX文档解析为Markdown文档的代码实现

《使用Java将DOCX文档解析为Markdown文档的代码实现》在现代文档处理中,Markdown(MD)因其简洁的语法和良好的可读性,逐渐成为开发者、技术写作者和内容创作者的首选格式,然而,许多文... 目录引言1. 工具和库介绍2. 安装依赖库3. 使用Apache POI解析DOCX文档4. 将解析

C++使用printf语句实现进制转换的示例代码

《C++使用printf语句实现进制转换的示例代码》在C语言中,printf函数可以直接实现部分进制转换功能,通过格式说明符(formatspecifier)快速输出不同进制的数值,下面给大家分享C+... 目录一、printf 原生支持的进制转换1. 十进制、八进制、十六进制转换2. 显示进制前缀3. 指

使用Python构建一个Hexo博客发布工具

《使用Python构建一个Hexo博客发布工具》虽然Hexo的命令行工具非常强大,但对于日常的博客撰写和发布过程,我总觉得缺少一个直观的图形界面来简化操作,下面我们就来看看如何使用Python构建一个... 目录引言Hexo博客系统简介设计需求技术选择代码实现主框架界面设计核心功能实现1. 发布文章2. 加