当前位置：首页 > article >正文

Eslint 和 Prettier 工具的使用

article 2025/3/3 21:24:39

一. Eslint

1.安装 Eslint

2.配置Eslint

配置规则 (以9.0.0 之后的版本为例) 项目的根目录下 eslint.config.js

配置插件

配置自定义解析器

配置忽略文件

二. Prettier 工具

安装 Prettier

创建一个空的配置文件

创建忽略文件

三. Vscode配套安装插件

四. 搭配Git Hooks

一. 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-modules CLI 选项）中的文件

情况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", // 不会修改文件内容，只检查文件是否符合格式规范。
    ]
  },
}