如何在VS Code中为Expo React-Native快速配置保存时自动格式化？

当前最佳实践是单独安装ESLint和Prettier扩展，而非依赖第三方组合扩展（比如Prettier ESLint v5.1.0），这种方式更灵活、冲突更少。以下是针对新项目、现有项目的统一配置步骤，以及自定义规则指南：

一、项目核心依赖安装 #

在项目根目录执行命令（npm/yarn任选其一）：

# npm
npm install eslint prettier eslint-plugin-react eslint-plugin-react-native eslint-config-prettier eslint-plugin-prettier --save-dev

# yarn
yarn add eslint prettier eslint-plugin-react eslint-plugin-react-native eslint-config-prettier eslint-plugin-prettier --dev

各包作用：

• eslint：代码语法/风格检查核心工具
• prettier：代码格式化核心工具
• eslint-plugin-react/eslint-plugin-react-native：针对React/React-Native的专属检查规则
• eslint-config-prettier：关闭ESLint与Prettier冲突的规则
• eslint-plugin-prettier：将Prettier格式化规则转为ESLint可识别的规则

二、项目配置文件设置 #

1. 生成并修改ESLint配置 #

执行命令生成基础配置：

npx eslint --init

按以下步骤选择：

1. 选择「To check syntax, find problems, and enforce code style」
2. 选择「JavaScript modules (import/export)」
3. 选择「React」
4. 若使用TypeScript，选择「Yes」，否则「No」
5. 选择「Browser」+「Node」（覆盖React-Native运行环境）
6. 选择「Use a popular style guide」→「Airbnb」
7. 选择「JSON」作为配置文件格式

生成.eslintrc.json后，修改extends字段，加入Prettier集成规则：

{
  "extends": [
    "airbnb",
    "airbnb/hooks",
    "plugin:react/recommended",
    "plugin:react-native/all",
    // 以下两行是Prettier集成关键
    "plugin:prettier/recommended",
    "eslint-config-prettier"
  ],
  "env": {
    "react-native/react-native": true
  }
}

2. 创建Prettier配置文件 #

在项目根目录新建.prettierrc，写入基础格式化规则：

{
  "singleQuote": true,
  "semi": false,
  "trailingComma": "es5",
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false
}

3. 创建忽略文件 #

分别新建.eslintignore和.prettierignore，写入忽略路径：

node_modules/
build/
dist/
*.config.js

三、VS Code 编辑器配置 #

1. 安装扩展 #

仅需安装两个官方扩展：

• ESLint（Microsoft 开发）
• Prettier - Code formatter（Prettier 官方）

注意：如果之前装了第三方组合扩展（比如Prettier ESLint v5.1.0），请立即卸载，避免冲突。

2. 修改编辑器设置 #

打开VS Code设置（快捷键Ctrl+,），点击右上角「打开设置(JSON)」，加入以下配置：

{
  // 保存时自动格式化
  "editor.formatOnSave": true,
  // 指定默认格式化工具为Prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 保存时自动执行ESLint修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // 让ESLint识别React/React-Native文件类型
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  // 禁用VS Code自带的JavaScript格式化，避免冲突
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

四、现有项目适配步骤 #

1. 卸载所有冲突的扩展（如第三方Prettier-ESLint组合扩展）
2. 删除项目根目录旧的.eslintrc、.prettierrc等配置文件
3. 执行「一、项目核心依赖安装」和「二、项目配置文件设置」步骤
4. 批量修复现有代码问题：

npx eslint . --fix

五、自定义配置指南 #

1. ESLint规则自定义 #

在.eslintrc.json的rules字段中添加/修改规则，示例：

{
  "rules": {
    // React 17+无需导入React，关闭强制导入规则
    "react/react-in-jsx-scope": "off",
    // 允许console.log，仅警告console.error以外的调用
    "no-console": ["warn", { "allow": ["log"] }],
    // 禁止未使用的变量，允许下划线开头的变量（如_id）
    "no-unused-vars": ["error", { "argsIgnorePattern": "^_" }]
  }
}

2. Prettier规则自定义 #

修改.prettierrc文件，常用自定义选项：

{
  "singleQuote": false, // 改为双引号
  "semi": true, // 开启分号
  "trailingComma": "all", // 所有对象/数组都加尾逗号
  "printWidth": 80, // 换行宽度改为80
  "arrowParens": "avoid" // 箭头函数单个参数省略括号
}

六、常见问题排查（保存格式化不生效） #

• 检查扩展：确保只装了官方ESLint和Prettier扩展，无冲突扩展
• 检查配置文件：项目根目录必须有.eslintrc.json和.prettierrc，且配置正确
• 检查VS Code设置：formatOnSave和source.fixAll.eslint必须设为true
• 检查ESLint状态：打开一个jsx/tsx文件，看右下角ESLint图标（灰色=未激活，红色=有错误，绿色=正常），若未激活，重启VS Code
• 检查文件类型：确保VS Code识别文件为javascriptreact或typescriptreact（看右下角状态栏）

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