前端代码格式化标准：Prettier + ESLint 配置指南

统一的代码风格是团队协作的基础。本文介绍 Prettier 和 ESLint 的配置方法。

Prettier

Prettier 是一个代码格式化工具，支持多种语言。

安装

npm install --save-dev prettier

配置文件

// .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "bracketSpacing": true,
  "arrowParens": "always"
}

常用配置项

选项	默认值	说明
semi	true	是否加分号
singleQuote	false	是否用单引号
tabWidth	2	缩进空格数
trailingComma	“none”	尾逗号
printWidth	80	行宽

忽略文件

# .prettierignore
node_modules
dist
*.min.js

ESLint

ESLint 是代码检查工具，可以发现潜在问题。

安装

npm install --save-dev eslint @eslint/js

配置文件

// eslint.config.js
import js from '@eslint/js';

export default [
  js.configs.recommended,
  {
    rules: {
      'no-unused-vars': 'warn',
      'no-console': 'warn',
      'eqeqeq': 'error',
      'curly': 'error'
    }
  }
];

常用规则

规则	说明	级别
no-unused-vars	未使用的变量	warn
no-console	console 语句	warn
eqeqeq	使用 ===	error
no-var	禁止 var	error
prefer-const	优先使用 const	warn

Prettier + ESLint 集成

安装

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

配置

// eslint.config.js
import js from '@eslint/js';
import prettier from 'eslint-config-prettier';

export default [
  js.configs.recommended,
  prettier,  // 禁用与 Prettier 冲突的规则
  {
    rules: {
      // 自定义规则
    }
  }
];

Git Hooks

使用 husky + lint-staged 在提交前自动格式化。

安装

npm install --save-dev husky lint-staged
npx husky init

配置

// package.json
{
  "lint-staged": {
    "*.{js,ts,vue}": ["prettier --write", "eslint --fix"]
  }
}

VS Code 配置

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

常见问题

1. Prettier 和 ESLint 冲突

解决： 使用 eslint-config-prettier 禁用冲突规则

2. 格式化不生效

检查：

VS Code 设置是否正确
是否安装了 Prettier 扩展
配置文件是否在项目根目录

3. 忽略特定文件

# .prettierignore
*.min.js
dist/

总结

Prettier 负责格式化，ESLint 负责代码检查。两者配合使用，可以建立统一的代码风格，提升团队协作效率。