前端代码规范 ESLint 和 Prettier 最佳实践

28256_
137 阅读5分钟

工具

ESLint

代码质量检查工具

  • 检查 JavaScript/TypeScript 代码中的错误
  • 发现潜在问题（未使用变量、错误的 API 使用等）
  • 强制执行代码规范
  • 包含代码格式相关的规则（如缩进、引号等）

安装和使用

  • 安装
npm install eslint -D
  • 使用
    • 在项目目录下创建 eslint.config.js 文件，配置 ESLint 相关规则（具体参考官网）
    • 创建 index.js 测试文件，编写测试代码
    • 在控制台通过 npx eslint index.js 检测当前文件是否符合规范
    • 如果不符合规范，通过 npx eslint --fix index.js 修复当前文件不符合规范的地方

Prettier

代码格式化工具

  • 自动格式化代码（缩进、换行、引号等）
  • 保持团队代码风格一致
  • 不检查代码逻辑错误

安装和使用

  • 安装
npm install prettier -D
  • 使用
    • 在项目目录下创建 .prettierrc 文件，可以配置相关规则，也可以不写（为空也行，后续再添加）
    • 使用上面的 index.js 文件进行测试
    • 在控制台通过 npx prettier index.js --check 检测当前文件是否符合规范
    • 如果不符合规范，通过 npx prettier index.js --write 修复当前文件不符合规范的地方

解决两者的冲突

eslint-config-prettier 官方地址

关闭所有与 Prettier 冲突的 ESLint 规则。

具体说明：

  1. 为什么需要它：

    • ESLint 有很多代码格式相关的规则（如 indent、quotes、semi 等）
    • Prettier 也会处理这些格式问题
    • 两者规则可能会冲突，导致 ESLint 报错但 Prettier 又能自动修复

  2. 它的作用：

    • 自动关闭所有可能与 Prettier 冲突的 ESLint 规则
    • 让 Prettier 专心负责格式化
    • ESLint 专注于代码质量检查（如未使用变量、错误的 API 使用等）

  3. 使用方式：

// eslint.config.js (flat config)
import eslintConfigPrettier from "eslint-config-prettier";

export default [
  // ...其他配置
  eslintConfigPrettier, // 必须放在最后，覆盖前面的格式规则
];
  1. 实践

未配置的情况下：

image.png

抛出了自定义的不合法规则。

image.png

配置之后，原来的自定义规则的报错也没了。关闭了 ESLint 和 Prettier 冲突的规则。

eslint-plugin-prettier 官方地址

将 Prettier 作为 ESLint 规则运行。

具体来说：

  1. 集成 Prettier 到 ESLint：让你可以在 ESLint 的规则体系中使用 Prettier 的代码格式化规则
  2. 统一代码检查和格式化：不需要单独运行 Prettier，ESLint 就能同时做代码质量检查和格式化
  3. 配合 eslint-config-prettier 使用：通常还会配合 eslint-config-prettier 来关闭所有与 Prettier 冲突的 ESLint 规则

简单说，它让你能在 ESLint 工作流中无缝使用 Prettier 的格式化能力，一次运行同时搞定代码质量和格式。

image.png

配置之后，抛出的错误提示里面指出了 Prettier 的规则。

使用 npx eslint --fix index.js 修复之后，以 Prettier 为准了，即使两者冲突了，还是以 Prettier 的标准修复了代码。

为什么要使用

eslint-config-prettier 只做一件事：

  • 关闭与 Prettier 冲突的 ESLint 规则
  • 不会把 Prettier 集成到 ESLint 中

eslint-plugin-prettier 做的事：

  • 把 Prettier 作为 ESLint 规则运行
  • 在 ESLint 运行时自动格式化代码
  • 可以在 ESLint 检查中看到 Prettier 的错误
最佳实践
  • 两个一起使用：既能使用规则又能解决提示的报错
  • 只使用 eslint-config-prettier 可能会导致规则遗漏
  • 只使用 eslint-plugin-prettier 某些报错可能还是提示

推荐配置顺序：在 ESLint 配置文件中，eslint-config-prettier 必须放在配置数组的最后，这样才能覆盖前面的格式规则。

结合 VS Code 编辑器使用

通过终端输入命令行来执行操作也可以，但是很频繁，很麻烦。因此结合编辑器的插件，可以实现代码保存时自动检查和修复代码不符合规范的地方。

VS Code 编辑器需要安装以下两个插件：

ESLint 插件

image.png

安装之后，在 index.js 测试文件中，直接会有红色提示，不用通过命令行来查看不符合规范的地方。

image.png

会有红色波浪线提示。

通过修改编辑器的配置文件 settings.json 文件，配置如下：

{
  // 开启编辑器保存自动格式化
  "editor.formatOnSave": true,
  // 保存文件时，自动执行某些操作，比如：代码修复
  // 这个操作可以避免逐个手动修复
  "editor.codeActionsOnSave": {
     // 自动修复 eslint 抛出的问题
    "source.fixAll.eslint": "explicit"
  },
}

按照以上配置，保存代码时，会自动使用 ESLint 来检查和修复代码不符合规范的地方。

Prettier 插件

image.png

安装插件之后，通过配置 settings.json 文件可以实现保存时自动格式化代码。

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
     // 自动修复 prettier 抛出的问题
    "source.fixAll.prettier": "explicit"
  },
}

推荐配置方案

项目上安装

npm install eslint prettier eslint-plugin-prettier eslint-config-prettier --save-dev
  • 基础依赖（ESLint + Prettier 核心）
  • eslint-plugin-prettier：将 Prettier 规则转为 ESLint 规则
  • eslint-config-prettier：禁用 ESLint 中与 Prettier 冲突的格式规则（必装，否则会报重复错误）

项目上配置

  • 创建 ESLint 配置文件 eslint.config.js ESLint 9.x版本
// eslint.config.js - ESLint 9.x 扁平配置（推荐新项目使用） 
import js from "@eslint/js";
import globals from "globals";
import { defineConfig } from "eslint/config";
import eslintConfigPrettier from "eslint-config-prettier/flat";
import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";

export default defineConfig([
  {
    files: ["**/*.{js,mjs,cjs}"],
    plugins: { js },
    extends: ["js/recommended"],
    languageOptions: { globals: globals.browser },
    rules: {
      "semi": ["error", "always"], // 冲突规则（会被 Prettier 禁用）
      "prettier/prettier": ["error", {
        semi: false, // Prettier 强制去分号
        endOfLine: "lf" // 统一换行符（避免跨平台问题）
      }]
    }
  },
  eslintPluginPrettierRecommended,
  eslintConfigPrettier,
]);

VS Code 编辑器中
安装ESLint插件，让 VS Code 识别项目中 ESLint 配置并实时校验代码
修改VS Code配置文件settings.json增加相关配置

{
    // 保存时自动格式化
    "editor.formatOnSave": true,
    // 保存时通过 ESLint 修复所有可自动修复的问题（含 Prettier 格式）
    "editor.codeActionsOnSave": {  // 执行顺序从上到下 
        "source.fixAll.eslint": "explicit", // 先执行 
    },
}

这样配置，保存文件时会自动执行 ESLint 检查和修复，同时通过 eslint-plugin-prettier 集成 Prettier 的格式化功能，一次操作完成代码质量检查和格式化。
（不是需要，可以不用安装编辑器的Prettier - Code formatter插件）

avatar
文章
阅读
粉丝