如何在Expo React Native项目中配置ESLint+Prettier及Airbnb规范（VS Code）

前置准备 #

如果你的项目还没初始化npm环境，先执行以下命令：

# 创建项目文件夹（已有项目可跳过此步）
mkdir react-eslint-demo && cd react-eslint-demo
# 初始化npm项目（-y 参数使用默认配置，无需手动填写信息）
npm init -y

初始化ESLint配置 #

新版本ESLint已将配置引导独立为--init命令，替代了旧版安装时的交互式提问，执行以下命令启动配置向导：

npx eslint --init

配置向导选项选择（针对React项目） #

按以下步骤选择适配React的配置：

• How would you like to use ESLint? → 选择 To check syntax, find problems, and enforce code style（语法检查、问题排查、代码风格统一）
• What type of modules does your project use? → 选择 ES modules (import/export)（React项目默认使用ES模块）
• Which framework does your project use? → 选择 React
• Does your project use TypeScript? → 根据项目实际情况选 Yes 或 No
• Where does your code run? → 勾选 Browser（React代码运行在浏览器环境）
• How would you like to define a style for your project? → 选择 Use a popular style guide（使用主流风格指南）
• Which style guide do you want to follow? → 推荐选择 Airbnb（行业广泛使用的规范），也可根据偏好选 Standard 或 Google
• What format do you want your config file to be in? → 选择 JSON（新手更易阅读和修改）
• 最后会提示安装所需的依赖包，输入 Yes 确认，工具会自动安装所有依赖

验证配置有效性 #

1. 在项目中创建测试文件 src/App.js，写入一段不符合规范的代码：

import React from 'react';

const App = () => {
  const unusedVar = 'test' // 未使用的变量，缺少分号
  return <div>Hello World</div>
}

export default App;

2. 执行ESLint检查命令：

npx eslint src/App.js

若配置成功，命令行会输出未使用变量、缺少分号等错误提示。

配置便捷npm脚本 #

为了日常使用更方便，在项目的 package.json 中添加以下脚本：

"scripts": {
  "lint": "eslint src/",
  "lint:fix": "eslint src/ --fix"
}

• 运行 npm run lint：检查整个 src 目录下的代码规范问题
• 运行 npm run lint:fix：自动修复可修正的代码规范问题（比如缩进、分号缺失等）

内容的提问来源于stack exchange，提问作者user24883913