‌ESLint+Prettier：双剑合璧，优化React Native开发体验‌

# ‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌ESLint+Prettier：双剑合璧，优化 React Native 开发体验

在 React Native 项目中，保持代码风格一致、及时发现潜在错误对于提高开发效率和代码质量至关重要。**ESLint** 和 **Prettier** 是目前最常用的两款工具，前者负责静态代码分析并规范代码质量，后者负责统一代码格式并减少“样式讨论”带来的时间浪费。本文将从原理、安装配置、实战示例和图解流程四个方面，全面讲解如何将 ESLint 与 Prettier 在 React Native 项目中“双剑合璧”，以优化开发体验。

---

## 目录

1. [工具概览与核心原理](#一-工具概览与核心原理)  
   1. [ESLint：静态代码分析与代码规范](#11-eslint静态代码分析与代码规范)  
   2. [Prettier：自动代码格式化](#12-prettier自动代码格式化)  
   3. [为何要同时使用 ESLint 与 Prettier](#13-为何要同时使用-eslint-与-prettier)  
2. [React Native 项目中安装与配置](#二-react-native-项目中安装与配置)  
   1. [初始化 React Native 项目](#21-初始化-react-native-项目)  
   2. [安装 ESLint 与相关插件](#22-安装-eslint-与相关插件)  
   3. [安装 Prettier 与相关插件](#23-安装-prettier-与相关插件)  
   4. [集成 ESLint + Prettier 配置示例](#24-集成-eslint--prettier-配置示例)  
3. [实战示例：代码格式化与代码检查](#三-实战示例代码格式化与代码检查)  
   1. [示例文件：有格式和风格问题的组件](#31-示例文件有格式和风格问题的组件)  
   2. [使用 Prettier 一键格式化](#32-使用-prettier-一键格式化)  
   3. [使用 ESLint 检查并修复](#33-使用-eslint-检查并修复)  
   4. [VSCode 编辑器中实时集成](#34-vscode-编辑器中实时集成)  
4. [ASCII 图解：ESLint + Prettier 工作流程](#四-ascii-图解-eslint--prettier-工作流程)  
5. [进阶：CI 集成与 Hook 预提交检查](#五-进阶-ci-集成与-hook-预提交检查)  
   1. [CI 环境中自动执行 ESLint 与 Prettier](#51-ci-环境中自动执行-eslint-与-prettier)  
   2. [Husky + lint-staged 预提交检查示例](#52-husky--lint-staged-预提交检查示例)  
6. [常见问题与最佳实践](#六-常见问题与最佳实践)  
7. [总结](#七-总结)  

---

## 一、工具概览与核心原理

### 1.1 ESLint：静态代码分析与代码规范

**ESLint**（“E S Lint”）是 JavaScript 领域最流行的静态代码分析工具，通过定义“规则”来检查代码质量、避免潜在错误，并可对某些简单问题进行自动修复。ESLint 的核心原理如下：

- **基于 AST（抽象语法树）**：ESLint 先将源代码解析为 AST，然后针对节点树进行规则匹配。  
- **可插拔规则**：社区提供大量规则包（如 `eslint-plugin-react`、`eslint-plugin-react-native`），可以根据项目需要进行定制。  
- **自动修复**：某些规则支持 `--fix` 模式，ESLint 会在符合约定的地方自动修正代码。  
- **配置层级**：可在项目根目录下 `.eslintrc.js`、`.eslintrc.json` 等文件中写入自定义配置，或继承社区预设（如 `eslint-config-airbnb`）。  

在 React Native 场景中，常见 ESLint 插件与规则包括：  
- `eslint-plugin-react`：针对 React 代码风格和最佳实践。  
- `eslint-plugin-react-native`：React Native 特有 API 的使用限制（例如 `StyleSheet.create` 强制样式定义方式）。  
- `eslint-plugin-import`：管理 `import` 路径合法性，检测未使用或错误导入。  
- `eslint-plugin-jsx-a11y`：检测无障碍相关问题（可选）。  

### 1.2 Prettier：自动代码格式化

**Prettier** 是一款“**Opinionated**”的代码格式化工具，意味着它在格式化规则上并不提供过多的可定制项，而是以“最常见的”或“业界约定俗成”的格式为默认标准。其核心特点：  
- **一键格式化**：只需要运行 `prettier --write`，就能自动将代码调整为统一风格，比如缩进、引号、分号、换行位置等。  
- **配置简单**：通过 `.prettierrc` 文件可配置 `tabWidth`、`singleQuote`、`trailingComma` 等少量选项。  
- **多语言支持**：不仅支持 JavaScript、JSX，还支持 TypeScript、JSON、CSS、Markdown 等多种文件类型。  
- **与 ESLint 不冲突**：Prettier 专注于格式化，ESLint 专注于代码质量检查，可以通过插件让二者协同工作。  

### 1.3 为何要同时使用 ESLint 与 Prettier

- **职责分工不同**：ESLint 着重“**代码质量**”和“**潜在错误**”（如未使用变量、无法识别的 API、潜在逻辑错误或规范问题），而 Prettier 关注“**代码格式**”层面（对齐、缩进、换行、逗号位置等）。  
- **减少摩擦**：如果仅使用 ESLint 的格式化规则（如 `eslint --fix`），需要大量自定义规则才能与团队风格保持一致，成本高且易出争议。Prettier 以“零配置”著称，适合绝大多数团队快速统一格式。  
- **互相补充**：Prettier 解决“风格争议”，ESLint 解决“代码错误与规范”。两者结合后，开发者可以专注功能开发，无需纠结格式；CI 环境可以更简单地做“质量门槛”把控。  

---

## 二、React Native 项目中安装与配置

### 2.1 初始化 React Native 项目

假设你已经在本地安装了 Node.js、Yarn/ npm 以及 React Native CLI。可以使用以下命令快速初始化一个基础项目：

```bash
# 使用 React Native CLI 创建项目
npx react-native init RNESLintPrettierDemo
cd RNESLintPrettierDemo

项目目录结构示例：

RNESLintPrettierDemo/
├── android/
├── ios/
├── node_modules/
├── src/
│   └── App.js
├── .gitignore
├── App.js
├── package.json
└── ...

我们将以此项目为基础，添加 ESLint 和 Prettier。

2.2 安装 ESLint 与相关插件

在项目根目录下，执行下面命令安装 ESLint 及常用插件（以使用 Yarn 为例）：

# 安装 ESLint 核心
yarn add -D eslint

# 安装 React、React Native 专用插件与扩展
yarn add -D eslint-plugin-react eslint-plugin-react-native eslint-plugin-import eslint-plugin-jsx-a11y

# 选择一个社区规则集（可选，例如 Airbnb）
yarn add -D eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks

# 如果使用 TypeScript，还需安装
# yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

安装完成后，在根目录创建 .eslintrc.js（或 .eslintrc.json），示例内容如下：

// .eslintrc.js
module.exports = {
  // 指定解析器选项，支持最新 ECMAScript 语法
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },

  // 环境配置：React Native 默认会使用 ES6、Node、JSX 全局变量
  env: {
    browser: true,
    es6: true,
    'react-native/react-native': true,
  },

  // 继承社区规则：这里以 Airbnb 为示例，也可自行定制
  extends: [
    'airbnb',                  // Airbnb JavaScript 风格
    'plugin:react/recommended', // React 推荐规则
    'plugin:react-native/all',  // React Native 推荐规则
  ],

  // 使用 React 插件与 React Native 插件
  plugins: ['react', 'react-native', 'import', 'jsx-a11y'],

  // 全局变量（根据项目需要自行定义）
  globals: {
    __DEV__: 'readonly', // React Native 全局 __DEV__
  },

  // 自定义规则：可根据团队风格进行微调
  rules: {
    // 允许在 JSX 中使用 .js 文件扩展名
    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
    // 关闭 React 17 以后自动导入 React 的错误提示
    'react/react-in-jsx-scope': 'off',
    // 允许使用 console.log，仅在开发环境
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // 关闭 prop-types 检测（若不使用 propTypes）
    'react/prop-types': 'off',
    // React Native 中允许使用 inline styles
    'react-native/no-inline-styles': 'off',
    // 禁止使用未使用的变量
    'no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
    // 导入排序规则（可自行选择是否启用）
    'import/order': [
      'warn',
      {
        groups: [['builtin', 'external'], ['internal'], ['parent', 'sibling', 'index']],
        'newlines-between': 'always',
        alphabetize: { order: 'asc', caseInsensitive: true },
      },
    ],
  },

  settings: {
    react: {
      version: 'detect', // 自动检测 React 版本
    },
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx'],
      },
    },
  },
};

关键说明

parserOptions.ecmaFeatures.jsx：开启对 JSX 语法的支持。
extends：使用社区知名的规则集，如 airbnb、plugin:react/recommended、plugin:react-native/all，保证规范度。
plugins：声明要使用的插件列表，这里包括 react-native、react、import、jsx-a11y。
rules：对部分规则进行覆盖或关闭，根据项目需要自定义。
settings：import/resolver 配置，用于解决导入路径识别。

2.3 安装 Prettier 与相关插件

同样在项目根目录下执行以下命令，安装 Prettier 及 ESLint 与 Prettier 协同的插件：

# 安装 Prettier
yarn add -D prettier

# 安装 ESLint 与 Prettier 集成插件
yarn add -D eslint-plugin-prettier eslint-config-prettier

# 若使用 VSCode，可安装 Prettier 插件：esbenp.prettier-vscode

eslint-plugin-prettier：将 Prettier 作为 ESLint 规则，当代码不符合 Prettier 格式时，ESLint 将报错或警告。
eslint-config-prettier：关闭所有与 Prettier 冲突的 ESLint 规则，保证二者不重复发号施令。

根目录创建 .prettierrc.js 或 .prettierrc.json，示例内容：

// .prettierrc.js
module.exports = {
  printWidth: 100,           // 单行最大长度
  tabWidth: 2,               // 缩进宽度
  useTabs: false,            // 使用空格缩进
  semi: true,                // 末尾使用分号
  singleQuote: true,         // 使用单引号
  trailingComma: 'all',      // 尾随逗号（包括对象、数组、函数参数等）
  bracketSpacing: true,      // 对象字面量属性是否留空格：{ foo: bar }
  arrowParens: 'always',     // 箭头函数参数总是带括号
  jsxSingleQuote: false,     // JSX 中使用双引号
  proseWrap: 'never',        // Markdown 不自动折行
  endOfLine: 'auto',         // 根据系统使用 LF 或 CRLF
};

同时，为了让 ESLint 与 Prettier 协同工作，需要更新前面创建的 .eslintrc.js 中的 extends 和 plugins 项：

// .eslintrc.js
module.exports = {
  ...
- extends: [
-   'airbnb',
-   'plugin:react/recommended',
-   'plugin:react-native/all',
- ],
+ extends: [
+   'airbnb',
+   'plugin:react/recommended',
+   'plugin:react-native/all',
+   'plugin:prettier/recommended', // 将 Prettier 作为最后一个扩展
+ ],

  plugins: ['react', 'react-native', 'import', 'jsx-a11y', 'prettier'],

  rules: {
    ...
+   // 当代码与 Prettier 规则冲突时，报错
+   'prettier/prettier': 'error',
  },
  ...
};

关键说明

plugin:prettier/recommended：
- 作用等同于同时引入 eslint-plugin-prettier 和 eslint-config-prettier，并将 prettier/prettier 规则设为 error。
- 必须放在 extends 数组最后，确保 Prettier 覆盖其他规则冲突。
'prettier/prettier': 'error'：
- 当代码不符合 Prettier 规则时，ESLint 会报错。配合 VSCode 或其他编辑器，可以实现“保存自动修复”或“保存自动格式化”。

2.4 集成 ESLint + Prettier 配置示例

经过上面步骤，我们在项目根目录中应有以下配置文件：

RNESLintPrettierDemo/
├── .eslintrc.js
├── .prettierrc.js
├── package.json
└── ...

package.json 中可添加如下脚本方便日常使用：

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

yarn lint：检查 src 下的所有 JS/JSX 文件是否有 ESLint 错误或警告。
yarn lint:fix：自动修复可修复的 ESLint 问题。
yarn format：使用 Prettier 格式化项目中所有常见文件类型。

三、实战示例：代码格式化与代码检查

3.1 示例文件：有格式和风格问题的组件

假设在 src/components/Counter.js 中有如下示例文件，存在混乱缩进、不规范引号、缺少分号、多个空行等问题：

// src/components/Counter.js

import React, {useState} from 'react'
import {View,Text,Button,StyleSheet} from 'react-native'


  const Counter = () => {

    const [count,setCount] = useState(0)

    const  increment =  () => {
        setCount(count + 1)
    }

    const decrement=()=>{
      setCount(count - 1)
    }

    return (
      <View style={styles.container}>
        <Text style={styles.text}>Count: {count}</Text>
        <View style={styles.buttonRow}>
          <Button title="-" onPress={decrement}/>
          <Button title="+" onPress={increment}/>
        </View>


      </View>
    )
  }


 const styles = StyleSheet.create({
    container:{
   flex:1, justifyContent:'center',alignItems:'center'
   },
  text:{
       fontSize: 32
      },
  buttonRow:{
    flexDirection:'row',
     justifyContent:'space-between',
      width:100
  }
})

 export default Counter

可以看到，上面的代码存在：

{useState} 导入时没有空格；
行尾缺少分号；
缩进不一致；
多余空行；
样式对象没有统一逗号位置与缩进；
export default Counter 与顶端没有留空行。

3.2 使用 Prettier 一键格式化

在项目根目录运行：

yarn format

Prettier 会依据 .prettierrc.js 中的规则，将上述文件自动格式化为一致风格，示例如下：

// src/components/Counter.js

import React, { useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Count: {count}</Text>
      <View style={styles.buttonRow}>
        <Button title="-" onPress={decrement} />
        <Button title="+" onPress={increment} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 32,
  },
  buttonRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: 100,
  },
});

export default Counter;

格式化细节

空格与逗号：在 import 中、函数参数与对象属性处统一加上空格，行末自动添加分号。
缩进：统一使用 2 个空格缩进。
多余空行：Prettier 自动删除多余的空行，并保证逻辑模块之间留一行空行分隔。
箭头函数：在箭头前后自动保留空格。

这一步极大减少了“谁的缩进格式对谁的审美”的无谓争论，让团队成员能够专注于业务逻辑。

3.3 使用 ESLint 检查并修复

在格式化之后，再运行 ESLint 检查代码规范及潜在错误：

yarn lint

如果代码中存在留用的 console.log()、变量未使用、React Hook 依赖数组缺失等问题，ESLint 会展示具体报错信息。例如：

/src/components/Counter.js
  12:3  warning  Unexpected console statement  no-console
  15:10 warning  'count' is already declared in the upper scope  no-shadow
  ...

若想自动修复简单问题（如缺少分号、单引号替换、行尾多余空格等），可执行：

yarn lint:fix

ESLint 会尝试对可修复的规则进行自动修正，修复后仅留下需要人为判断的警告或错误。

3.4 VSCode 编辑器中实时集成

为了提升开发体验，可以在 VSCode 中安装相应插件，并在配置中启用“保存自动修复”与“保存自动格式化”功能。

安装 VSCode 插件
- ESLint 插件：dbaeumer.vscode-eslint
- Prettier 插件：esbenp.prettier-vscode

在工作区或用户设置中添加如下配置（.vscode/settings.json）：

{
  // 保存时自动格式化 (Prettier)
  "editor.formatOnSave": true,

  // 保存时自动修复 ESLint 错误
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

  // 指定默认格式化工具为 Prettier
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

editor.formatOnSave：启用后，保存文件即自动执行 Prettier 格式化。
source.fixAll.eslint：启用后，保存文件时若 ESLint 可以自动修复规则，则自动应用修复。
editor.defaultFormatter：在 JS/JSX 文件中使用 Prettier 作为默认格式化工具。

保存文件时的执行顺序：
1. Prettier 自动格式化 → 2. ESLint 自动修复 → 3. 最终将格式化和修复后的结果保存到磁盘。

这样就实现了在开发过程中，“保存即得到一份既符合格式规范又符合代码质量要求”的代码，大大提高开发效率与协作体验。

四、ASCII 图解：ESLint + Prettier 工作流程

下面用简易的 ASCII 图解展示开发者编写代码到最终提交的整个流程，卷入 ESLint 与 Prettier 的协作机制。

┌───────────────────────────────────────────────┐
│             开发者在编辑器中编写代码          │
└───────────────────────────────────────────────┘
                     │
                     ▼
┌───────────────────────────────────────────────┐
│      (1) 保存触发 Prettier 格式化 → 自动调整  │
│           - 缩进统一、空格调整                 │
│           - 引号、分号、逗号位置规范           │
│         预期结果：代码层面风格一致             │
└───────────────────────────────────────────────┘
                     │
                     ▼
┌───────────────────────────────────────────────┐
│    (2) 保存触发 ESLint 自动修复 → 修复简单错误  │
│           - 修复缺少分号、多余空格等            │
│           - 修复可自动修复的规则               │
│    预期结果：无常见语法错误、风格冲突            │
└───────────────────────────────────────────────┘
                     │
                     ▼
┌───────────────────────────────────────────────┐
│       (3) 手动或 CI 执行 `yarn lint` 检查       │
│           - 报告剩余的警告与错误                │
│           - 需开发者手动修改不可自动修复的规则    │
└───────────────────────────────────────────────┘
                     │
                     ▼
┌───────────────────────────────────────────────┐
│        (4) 手动或 CI 执行 `yarn format`         │
│           - 对所有文件进行 Prettier 格式化      │
│           - 确保没有遗漏的文件                  │
└───────────────────────────────────────────────┘
                     │
                     ▼
┌───────────────────────────────────────────────┐
│          (5) 提交到 Git 仓库或触发 CI           │
│           - CI 自动再次执行 ESLint 与 Prettier   │
│           - 若有错误，可阻断合并（Quality Gate）  │
└───────────────────────────────────────────────┘
                     │
                     ▼
┌───────────────────────────────────────────────┐
│               代码质量与风格达标               │
└───────────────────────────────────────────────┘

如上流程示意：开发者保存时即触发 Prettier → ESLint 自动修复，再执行人工或 CI 检查。通过“前端门禁”+“CI 护栏”两层把控，确保代码在各个阶段始终符合团队规范。

五、进阶：CI 集成与 Hook 预提交检查

在实际团队开发中，仅仅依靠开发者本地配置还不够，还应在 CI 与 Git Hook 层面做“双保险”，防止遗漏和人为疏忽。

5.1 CI 环境中自动执行 ESLint 与 Prettier

示例以 GitHub Actions 为例，在项目根目录创建 .github/workflows/lint.yml：

# .github/workflows/lint.yml

name: "Lint and Format"

on:
  pull_request:
    branches: [ main ]
  push:
    branches: [ main ]

jobs:
  lint:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 16

      - name: Install dependencies
        run: yarn install --frozen-lockfile

      - name: Run Prettier (check only)
        run: yarn prettier --check "src/**/*.{js,jsx,ts,tsx,json,css,md}"

      - name: Run ESLint
        run: yarn lint

关键说明

yarn prettier --check：
- 在 CI 中使用 --check 模式，仅检查文件是否符合格式，而不进行自动写入。若格式不符则返回非零退出码，失败 CI。
yarn lint：
- 仅检查 ESLint 报告中是否有 error 级别的问题。如存在，则 CI 失败，让开发者修复后再合并。
结合分支保护策略：
- 在 GitHub 的“分支保护”设置中，开启“必需通过 CI 检查”，保证任何 Pull Request 在合并前都通过上述检查。

5.2 Husky + lint-staged 预提交检查示例

为防止开发者本地提交未格式化或有质量问题的代码，可以使用 Husky 和 lint-staged 在 Git 提交时拦截。

安装依赖：
```
yarn add -D husky lint-staged
```

在 package.json 中添加以下配置：

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx}": [
      "prettier --write",
      "eslint --fix",
      "git add"
    ],
    "src/**/*.{json,css,md}": [
      "prettier --write",
      "git add"
    ]
  }
}

初始化 Husky 钩子：

npx husky install
npx husky add .husky/pre-commit "npx lint-staged"

流程说明

lint-staged：只对本次提交的临时更改文件执行配置的命令，避免全量扫描。
流程：当执行 git commit 时，Husky 拦截并调用 lint-staged：
1. 对所有被修改的 .js/.jsx/.ts/.tsx 文件依次执行 prettier --write → eslint --fix → git add，保证提交的文件已格式化并修复可自动处理的 ESLint 问题。
2. 同时对 .json/.css/.md 文件仅执行 prettier --write → git add。
3. 如果 Prettier 或 ESLint 修复后文件仍存在问题（如 ESLint 报错不可自动修复），提交会被阻止，让开发者先手动修复。

这样就保证了“提交门槛”上有一层“双保险”：预提交钩子自动修复并防止不合规范代码进入代码库；CI 再次把关，确保质量一致。

六、常见问题与最佳实践

ESLint 与 Prettier 规则冲突
- 使用 eslint-config-prettier 可以自动关闭与 Prettier 冲突的 ESLint 规则，避免“谁说了算”的困扰。一定要将 'prettier' 或 'plugin:prettier/recommended' 放在 extends 数组最后。
配置冗余与性能问题
- 初次集成时，如果同时启用了过多插件（如 eslint-plugin-jsx-a11y、eslint-plugin-security 等），会导致 lint 扫描速度变慢。可根据项目实际需求有选择地只保留必要的插件。
编辑器自动格式化后 ESLint 报错
- 如果 VSCode 中仅启用了 Prettier 格式化，但未自动修复 ESLint 问题，则保存后可能出现 ESLint 报错。建议同时在保存时启用 source.fixAll.eslint，二者按顺序执行：
  1. Prettier 格式化 → 2. ESLint 自动修复 → 3. 保存。
团队协作时的配置统一
- 将 .eslintrc.js、.prettierrc.js、.vscode/settings.json 等配置文件加入版本控制。
- 在团队代码库 README 中写明“开发规范”与“约定”，帮助新人快速上手并了解 lint/format 流程。
CI 环境与本地配置不一致
- 确保 CI 与本地使用一致的 Node 版本、依赖版本（锁定 yarn.lock 或 package-lock.json）。
- 若 CI 中的 yarn lint 报错但本地不报错，检查是否本地跳过了某些文件或未安装新版依赖。
使用 TypeScript 时的注意
- 安装 @typescript-eslint/parser 和 @typescript-eslint/eslint-plugin，在 .eslintrc.js 中设置 parser: '@typescript-eslint/parser'，并在 plugins 中添加 '@typescript-eslint'。
- Prettier 对 .ts/.tsx 文件会自动识别，需在 lint-staged 中也包含相应扩展名。

七、总结

使用 ESLint + Prettier 协同工作，可以让 React Native 项目在以下方面大幅优化：

代码风格一致性：所有开发者无需再为缩进、单引号/双引号、逗号位置等小细节产生分歧。
提前捕获潜在错误：ESLint 在编译前就能发现未使用变量、潜在逻辑错误或不符合团队规范的写法。
开发体验提升：VSCode 中“保存即格式化+修复”让代码编辑流畅度更高，减少低级别错误的来回修改。
团队协作质量保障：通过 Husky + lint-staged + CI 的多层检查，实现“代码质量门槛”自动化，减少人为疏漏。

只需几步简单配置，就能让项目从此摆脱“谁的缩进对谁的审美”的横生枝节，让团队专注于业务逻辑与产品功能的实现。希望本文提供的配置示例、图解流程与实践建议，能够帮助你快速在 React Native 项目中集成 ESLint + Prettier，打造高效、规范、优雅的开发体验。

‌ESLint+Prettier：双剑合璧，优化React Native开发体验‌

2.2 安装 ESLint 与相关插件

关键说明

2.3 安装 Prettier 与相关插件

关键说明

2.4 集成 ESLint + Prettier 配置示例

三、实战示例：代码格式化与代码检查

3.1 示例文件：有格式和风格问题的组件

3.2 使用 Prettier 一键格式化

格式化细节

3.3 使用 ESLint 检查并修复

3.4 VSCode 编辑器中实时集成

四、ASCII 图解：ESLint + Prettier 工作流程

五、进阶：CI 集成与 Hook 预提交检查

5.1 CI 环境中自动执行 ESLint 与 Prettier

关键说明

5.2 Husky + lint-staged 预提交检查示例

流程说明

六、常见问题与最佳实践

七、总结

评论已关闭

推荐阅读