如何使用ESLint和Prettier进行代码分析和格式化

封面图 • 2025-10-21 • JavaScript

使用 **ESLint** 和 **Prettier** 可以帮助你统一代码风格、提高代码质量。它们通常一起使用，其中：

- **ESLint**：用于静态代码分析（检查语法错误、代码规范等）。
- **Prettier**：用于自动格式化代码（如缩进、空格、引号等）。

下面是一个完整的指南，教你如何在项目中配置和使用 ESLint 和 Prettier。

---

## ✅ 一、安装依赖

### 1. 安装 ESLint
```bash
npm install eslint --save-dev
```

### 2. 安装 Prettier
```bash
npm install prettier --save-dev
```

### 3. 安装 ESLint 插件（可选但推荐）
为了支持 Prettier 的格式化功能，你需要安装 `eslint-config-prettier` 来禁用 ESLint 中与 Prettier 冲突的规则：
```bash
npm install eslint-config-prettier --save-dev
```

还要安装 `eslint-plugin-prettier`，它将 Prettier 作为 ESLint 规则运行：
```bash
npm install eslint-plugin-prettier --save-dev
```

---

## ✅ 二、创建 ESLint 配置文件

在项目根目录下创建 `.eslintrc.js` 文件：

```js
// .eslintrc.js
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:prettier/recommended', // 合并 Prettier 的规则
  ],
  rules: {
    // 你可以在这里自定义 ESLint 规则
  },
};
```

> 如果你使用的是 TypeScript 或其他语言，可以扩展对应的配置，例如：
> ```js
> extends: [
>   'eslint:recommended',
>   'plugin:@typescript-eslint/recommended',
>   'plugin:prettier/recommended'
> ]
> ```

---

## ✅ 三、创建 Prettier 配置文件（可选）

在项目根目录下创建 `.prettierrc` 文件：

```json
{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "auto"
}
```

你也可以使用 `.prettierignore` 文件来忽略某些文件或目录。

---

## ✅ 四、运行 ESLint 和 Prettier

### 1. 检查代码问题（不修改文件）

```bash
npx eslint .
```

### 2. 自动修复可修复的问题（包括 Prettier 格式化）

```bash
npx eslint . --fix
```

> 这会自动修复 ESLint 可修复的规则，并调用 Prettier 来格式化代码。

---

## ✅ 五、配置 VS Code（可选）

如果你使用 VS Code，可以设置为保存时自动格式化：

1. 打开 VS Code 设置（`File > Preferences > Settings`）。
2. 搜索 `format on save`，勾选该项。
3. 确保默认格式化工具是 Prettier。

或者，在 `.vscode/settings.json` 中添加：

```json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"]
}
```

---

## ✅ 六、Git Hook（可选）

你可以使用 `husky` + `lint-staged` 在提交代码前自动运行 ESLint 和 Prettier。

### 安装 husky 和 lint-staged：

```bash
npm install husky lint-staged --save-dev
```

### 添加 Git Hook：

```bash
npx husky add .husky/pre-commit "npx lint-staged"
```

### 配置 `lint-staged`：

在 `package.json` 中添加：

```json
"lint-staged": {
  "*.{js,jsx,ts,tsx}": [
    "eslint --fix",
    "prettier --write"
  ]
}
```

---

## ✅ 七、总结

| 工具 | 功能 |
|------|------|
| ESLint | 静态代码分析，检查语法和风格 |
| Prettier | 自动格式化代码 |
| `eslint-config-prettier` | 禁用与 Prettier 冲突的 ESLint 规则 |
| `eslint-plugin-prettier` | 将 Prettier 作为 ESLint 规则运行 |
| VS Code | 可以设置自动格式化 |
| husky + lint-staged | 提交前自动检查和格式化 |

---

如果你需要针对特定框架（如 React、Vue、Next.js）的配置，我也可以提供更详细的步骤。是否需要？ 😊