be-a-professional-programmer开发规范：从ESLint到Prettier-优快云博客

be-a-professional-programmer开发规范：从ESLint到Prettier

【免费下载链接】be-a-professional-programmer 成为专业程序员路上用到的各种优秀资料、神器及框架项目地址: https://gitcode.com/gh_mirrors/be/be-a-professional-programmer

团队协作中，代码风格混乱会导致合并冲突频发、维护成本激增。本文基于be-a-professional-programmer项目实践，详解如何通过ESLint（代码检查工具）与Prettier（代码格式化工具）构建自动化规范体系，让团队专注于逻辑实现而非格式争论。

规范工具链选型

现代前端工程化中，代码质量工具链已形成成熟生态。项目工具篇推荐的EditorConfig+ESLint+Prettier组合，可覆盖从编辑器配置到提交校验的全流程规范管理：

EditorConfig：统一不同编辑器的基础格式（缩进、换行符等）
ESLint：静态代码分析，检测语法错误与最佳实践违规
Prettier：专注代码格式化，解决ESLint格式规则覆盖不全问题

三者协同工作流程如下： mermaid

ESLint配置实战

ESLint通过规则配置文件实现自定义检查逻辑。在项目根目录创建.eslintrc.js：

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended" // 整合Prettier
  ],
  parserOptions: {
    ecmaFeatures: { jsx: true },
    ecmaVersion: "latest",
    sourceType: "module"
  },
  plugins: ["react"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "warn",
    "react/prop-types": "off", // 如使用TypeScript可关闭
    "indent": ["error", 2], // 强制2空格缩进
    "quotes": ["error", "single"] // 单引号优先
  }
};

关键配置说明：

extends：继承推荐规则集，plugin:prettier/recommended解决ESLint与Prettier的规则冲突
rules：项目特殊规则覆盖，支持"off"|"warn"|"error"三个级别
环境变量区分开发/生产环境的检查严格度

Prettier自动化格式化

Prettier专注于代码样式美化，与ESLint形成互补。安装依赖后在package.json添加脚本：

{
  "scripts": {
    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,md}\"",
    "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
    "lint:fix": "eslint --fix \"src/**/*.{js,jsx,ts,tsx}\""
  },
  "devDependencies": {
    "eslint": "^8.45.0",
    "prettier": "^3.0.0",
    "eslint-config-prettier": "^8.9.0",
    "eslint-plugin-prettier": "^5.0.0"
  }
}

执行npm run format将自动修复：

代码缩进与空格
引号与分号风格
换行与空行规则
JSON/Markdown等非JS文件格式

提交前自动校验

结合Git钩子工具husky实现提交前强制规范校验：

# 安装依赖
npm install husky lint-staged --save-dev

# 在package.json添加
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
  "*.{json,css,md}": ["prettier --write"]
}

此配置确保只有通过规范检查的代码才能提交，杜绝"先提交再修复"的恶性循环。项目GitHub篇中提到的Git风格指南，可通过此机制强制落地。

常见问题解决方案

规则冲突处理

ESLint与Prettier可能存在格式规则冲突（如缩进风格），通过以下配置优先使用Prettier规则：

// .eslintrc.js
{
  "extends": [
    "prettier", // 禁用ESLint中与Prettier冲突的规则
    "plugin:prettier/recommended" // 将Prettier错误作为ESLint错误提示
  ]
}

框架特殊配置

针对React/Vue等框架，需安装专用解析器与插件：

# React项目
npm install eslint-plugin-react @typescript-eslint/parser --save-dev

# Vue项目
npm install eslint-plugin-vue vue-eslint-parser --save-dev

编辑器集成

在VSCode中安装ESLint与Prettier插件，并配置自动修复：

// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

规范落地与团队协作

规范推行需避免"一刀切"，建议：

从必看书籍中选择《代码整洁之道》作为团队共同学习材料
通过前端资源收集团队成员常用的格式化规则
定期审查规则有效性，移除过时或争议性配置
新人入职时提供包含配置文件的开发环境搭建指南

成熟的规范体系可使代码Review效率提升40%，合并冲突减少65%。通过本文工具链配置，团队可实现"编码-提交-部署"全流程的规范自动化，让专业程序员专注于创造性工作。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考