目录
配置规则 (以9.0.0 之后的版本为例) 项目的根目录下 eslint.config.js
一. Eslint
官方网站插件化、可配置的 linter 工具，用于识别和报告 JavaScript 中的模式。 轻松维护你的代码质量。
https://eslint.nodejs.cn
1.安装 Eslint
node版本建议（^18.18.0、^20.9.0 或 >=21.1.0）
npm init @eslint/config@latest // 一站式完成安装和配置功能: 这是一个独立的工具，用于快速初始化 ESLint 配置。它会自动安装 ESLint 和相关依赖，并生成一个基本的配置文件（如
.eslintrc.json）。交互式流程: 会引导用户回答一些问题（如选择语言风格、框架支持等），然后自动生成相应的配置。
依赖管理: 会自动将这些工具和配置文件作为开发依赖添加到
package.json中
2.配置Eslint
配置规则 (以9.0.0 之后的版本为例) 项目的根目录下 eslint.config.js
在配置文件中配置规则, 使用
rules键来书写, 比如配置异常提示, 未使用的变量, 未定义的变量规则
“off” 或 0 - 关闭规则
“warn” 或 1 - 将规则作为警告打开（不影响退出代码）
“error” 或 2 - 打开规则作为错误（退出代码将为 1）
配置插件
ESLint 支持使用第三方插件, 使用 plugins 键，该键包含一个对象 ,其中插件的名称是属性名称，值是插件对象本身 ,例如
// eslint.config.js
import example from "eslint-plugin-example";
export default [
{
plugins: {
example
},
rules: {
"example/rule1": "warn"
}
}
]配置自定义解析器
在许多情况下，你可以使用 ESLint 附带的 [默认解析器] 来解析 JavaScript 代码。你可以选择使用 parser 属性覆盖默认解析器。parser 属性必须是符合 解析器接口 的对象。例如，你可以使用 @babel/eslint-parser 包来允许 ESLint 解析实验性语法
// eslint.config.js
import babelParser from "@babel/eslint-parser";
export default [
{
languageOptions: {
parser: babelParser, // 指定 ESLint 使用的解析器
parserOptions: { // 解析器的附加配置选项
requireConfigFile: false, // 禁用解析器对 Babel 配置文件（如 .babelrc 或 babel.config.js）的要求
babelOptions: {
babelrc: false, // 禁止 Babel 自动加载项目中的 .babelrc 文件
configFile: false, // 止 Babel 自动加载项目中的 babel.config.js 文件
presets: ["@babel/preset-env"] // 启用 @babel/preset-env 预设, 确保解析器能够理解现代 JavaScript 语法
}
}
}
}
];配置忽略文件
在 eslint.config.js 文件中，使用 ignores 键配置忽略文件, 数组内可填写多个
// eslint.config.js
export default [
{
ignores: [".config/*"]
}
];命令行上使用 --ignore-pattern 忽略文件，例如
npx eslint . --ignore-pattern '.config/*' 如果想保持gitignore 和 ESLint 忽略规则的一致性 ,可以使用 @eslint/compat 包中的 includeIgnoreFile 实用程序
- 安装 @eslint/compat 包： 如果你尚未安装
@eslint/compat包，可以通过以下命令安装
npm install @eslint/compat --save-dev- 配置展示
// eslint.config.js
import { includeIgnoreFile } from "@eslint/compat";
import path from "node:path";
import { fileURLToPath } from "node:url";
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const gitignorePath = path.resolve(__dirname, ".gitignore");
export default [
includeIgnoreFile(gitignorePath),
{
// your overrides
}
];好处: 当你运行 ESLint 时，它会自动加载
.gitignore文件中的规则，并将这些规则转换为 ESLint 的忽略规则
总结: 基于高版本Node
^18.18.0、^20.9.0或>=21.1.0,安装完毕下, 使用 npm init @eslint/config@latest 一站式完成安装和配置, 合理配置规则, 插件即可, 自定义解析器有默认值,可不配置
二. Prettier 工具
定义: 代码格式化工具, 支持javascript、jsx、typescript、css,less和scss、html、vue、angular、json、markdown等多种前端技术语言格式化
安装 Prettier
npm install --save-dev --save-exact prettier创建一个空的配置文件
也可手动创建.prettierrc文件 node --eval "fs.writeFileSync('.prettierrc','{}\n')"
例如 ,在.prettierrc使用prettier-plugin-foo 插件, 写法
{ "plugins": ["prettier-plugin-foo"] } 创建忽略文件
- 创建一个.prettierignore 文件，让 Prettier CLI 和编辑器知道哪些文件不要格式化
node --eval "fs.writeFileSync('.prettierignore','# Ignore artifacts:\nbuild\ncoverage\n')"- 细节: 默认情况下，prettier 会忽略版本控制系统目录（".git"、".jj"、".sl"、".svn" 和 ".hg"）和
node_modules除非指定了--with-node-modulesCLI 选项）中的文件
情况1
**/.git
**/.svn
**/.hg
**/node_modules
情况2
**/.git
**/.svn
**/.hg三. Vscode配套安装插件
配置下保存时格式化, 即可
四. 搭配Git Hooks
安装 husky和 lint-staged (已安装忽略)
npm install --save-dev husky lint-staged // 安装
npx husky init //初始化
node --eval "fs.writeFileSync('.husky/pre-commit','npx lint-staged\n')" //写入脚本将以下内容添加到你的 package.json
{
"lint-staged": {
"*.{js,ts,vue}": [
"eslint --fix", // 主动修复
"prettier --write", // 直接修改文件内容，格式化代码
"prettier --check", // 不会修改文件内容，只检查文件是否符合格式规范。
]
},
}好处:
无需我们手动通过命令行来格式化
设置预提交钩子以确保每次提交都已格式化