代码规范：ESLint配置与Prettier格式化

ESLint 与 Prettier 结合可统一代码风格并提升质量。1. ESLint 检测代码问题，通过 .eslintrc.js 配置环境、规则、插件等；2. Prettier 负责格式化，通过 .prettierrc 定义缩进、引号、分号等样式；3. 使用 eslint-config-prettier 禁用冲突规则，eslint-plugin-prettier 将 Prettier 作为 ESLint 规则；4. 集成到编辑器（如 VS Code）实现保存自动修复；5. 配置 npm 脚本进行 lint 和 format；6. 结合 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 不仅检查代码质量，还会报告格式问题，统一通过编辑器或命令行修复。

MacsMind

电商AI超级智能客服

131

查看详情

集成到开发环境

为了让规范真正落地，应将 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格式化的详细内容，更多请关注php中文网其它相关文章！