VS Code Prettier扩展与@react-native-community/eslint-config集成问题

核心冲突原因 #

• @react-native-community/eslint-config 内置了默认Prettier校验规则，默认不会主动读取项目根目录的.prettierrc自定义配置，这是两边规则不一致的核心原因
• .prettierignore会同时被VS Code Prettier扩展和ESLint中的prettier插件读取，一旦误配置了源码目录的忽略规则，两边的格式处理都会同时失效

分步配置流程 #

• 补全缺失依赖
  之前安装的依赖缺少ESLint和Prettier联动的必要包，执行以下命令安装：

npm i -D eslint-plugin-prettier eslint-config-prettier

其中eslint-plugin-prettier负责将Prettier规则嵌入ESLint校验流程，eslint-config-prettier负责关闭ESLint内置的、和Prettier冲突的格式类规则。

• 修改.eslintrc配置
  替换原有配置为以下内容，强制ESLint读取项目本地的Prettier配置文件，同时关闭冲突规则：

{
  "extends": [
    "@react-native-community",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "prettier/prettier": ["error", {}, { "usePrettierrc": true }]
  }
}

• 统一规则源
  在项目根目录新建.prettierrc文件，写入你需要的格式规则，示例配置适配React Native常用开发习惯：

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

配置完成后，ESLint的prettier/prettier校验和VS Code Prettier扩展会读取同一份规则文件，不会再出现规则不一致的报错。

• 修复.prettierignore配置
  .prettierignore语法和.gitignore完全一致，注意不要将源码目录（比如根目录、src/、app/等）误加入忽略列表，React Native项目标准忽略配置参考：

node_modules/
android/
ios/
build/
dist/
*.lock
*.png
*.jpg
*.jpeg
*.gif
*.svg

• 校验VS Code本地设置
  打开VS Code设置项，确认以下配置正确，避免重复格式化或规则冲突：
  • 将Prettier设置为默认格式化器："editor.defaultFormatter": "esbenp.prettier-vscode"
  • 开启保存自动格式化："editor.formatOnSave": true"
  • 关闭ESLint自带的格式化能力，避免重复处理："eslint.format.enable": false"
  • 确认ESLint校验范围覆盖所有React Native代码文件：

"eslint.validate": [
  "javascript",
  "javascriptreact",
  "typescript",
  "typescriptreact"
]

生效验证 #

所有配置修改完成后，按Ctrl+Shift+P调出命令面板，执行ESLint: Restart ESLint Server重启ESLint服务。随便打开一个源码文件故意写错格式，保存时会自动按照Prettier规则修正格式，同时ESLint不会抛出格式相关的冲突报错。

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