ESLint配置与Prettier格式化教程

想让团队代码风格统一、质量可控又省心？这篇指南手把手教你如何将ESLint与Prettier深度协同——从配置原理（.eslintrc.js精准控制规则，.prettierrc定义格式细节）、解决冲突（eslint-config-prettier禁用冗余规则，eslint-plugin-prettier将格式化纳入ESLint检查流），到真正落地（VS Code保存自动修复、npm脚本一键校验、Husky + lint-staged拦截不规范提交），帮你把“写得规范”变成“不得不规范”，大幅提升可读性、可维护性与协作效率。

在现代前端开发中，保持代码的一致性和可读性至关重要。ESLint 和 Prettier 是两个广泛使用的工具：ESLint 用于检测代码中的潜在问题并 enforce 编码规范，Prettier 则专注于代码格式化。将两者结合使用，可以实现既严格又统一的代码风格。

ESLint 配置详解

ESLint 能帮助开发者发现代码中的错误、不规范写法和潜在 bug。一个典型的 ESLint 配置文件（.eslintrc.js）通常包括以下几个部分：

• env：指定代码运行环境，如浏览器、Node.js 等，以便识别全局变量
• extends：继承已有的规则集，比如推荐配置或第三方规范（如 airbnb、standard）
• plugins：引入额外的插件，如 react、vue、import 等
• rules：自定义具体规则的开启/关闭及严重程度（"error"、"warn"、"off"）
• parserOptions：指定语法解析选项，如支持 ES2022、JSX、TypeScript 等

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended'
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true
    }
  },
  plugins: ['react'],
  rules: {
    'no-console': 'warn',
    'eqeqeq': ['error', 'always'],
    'semi': ['error', 'never']
  },
  settings: {
    react: {
      version: 'detect'
    }
  }
};

Prettier 基础配置

Prettier 是一个“开箱即用”的代码格式化工具，它会强制统一代码样式，减少团队间的格式争议。其核心配置通过 .prettierrc 文件定义。

• semi：是否在语句末尾加分号
• singleQuote：是否使用单引号代替双引号
• tabWidth：缩进空格数
• useTabs：是否使用制表符而非空格
• printWidth：每行最大长度，超过则换行
• trailingComma：对象或多参数末尾是否保留逗号

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 80,
  "trailingComma": "es5"
}

ESLint 与 Prettier 协同工作

直接同时启用 ESLint 和 Prettier 可能导致规则冲突（例如分号、引号）。为避免此类问题，建议使用 eslint-config-prettier 和 eslint-plugin-prettier 进行整合。

• eslint-config-prettier：关闭所有与 Prettier 冲突的 ESLint 规则
• eslint-plugin-prettier：将 Prettier 作为 ESLint 规则运行，格式错误会在 ESLint 中提示

npm install --save-dev eslint-config-prettier eslint-plugin-prettier prettier

extends: [
  'eslint:recommended',
  'plugin:react/recommended',
  'prettier' // 关闭冲突规则
],
plugins: ['react', 'prettier'],
rules: {
  'prettier/prettier': 'error' // 启用 Prettier 格式检查
}

这样，ESLint 不仅检查代码质量，还会报告格式问题，统一通过编辑器或命令行修复。

集成到开发环境

为了让规范真正落地，应将 ESLint 和 Prettier 集成到编辑器和项目流程中。

• 在 VS Code 中安装 ESLint 和 Prettier 插件，保存时自动格式化
• 配置 .vscode/settings.json 实现保存时自动修复
• 添加 npm 脚本进行批量检查与修复

"scripts": {
  "lint": "eslint src/**/*.js",
  "lint:fix": "eslint src/**/*.js --fix",
  "format": "prettier --write src/**/*.{js,jsx,json}"
}

结合 Git Hooks（如 Husky + lint-staged），可在提交代码前自动校验和格式化，防止不符合规范的代码进入仓库。

基本上就这些。合理配置 ESLint 与 Prettier，不仅能提升代码质量，还能增强团队协作效率。关键是统一标准，并让工具自动执行，减少人为干预。不复杂但容易忽略。

本篇关于《ESLint配置与Prettier格式化教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！