如何修复React Native项目中Prettier提示Insert ;等格式校验报错

• React Native项目持续触发prettier/prettier规则校验，反复提示Insert ;、Insert enter类格式错误
• App.js文件存在明确报错：第1行第9列提示Replace 'View,.Text' with '.View, .Text.'（prettier/prettier）
• 已安装ESLint及相关依赖，未在VSCode中安装ESLint、Prettier扩展，长期排查未定位根因

.eslintrc.js #

module.exports = {
    root:true,
    extends:'@react-native-community'
}

Prettier配置文件（当前命名为prettier.js） #

module.exports = {
    arrowParens:'avoid',
    bracketSameLine:true,
    bracketSpacing:false,
    singleQuote:true,
    trailingComma: 'all',
}

App.js首行代码 #

import {View , Text} from 'react-native'

1. Prettier配置文件命名不符合规范：当前命名为prettier.js，ESLint集成的Prettier校验默认无法识别该命名的配置文件，会 fallback 到Prettier默认规则，与自定义规则产生冲突，触发无规律格式报错。
2. ESLint配置缺失冲突处理逻辑：未引入eslint-config-prettier关闭ESLint内置与Prettier重复/冲突的格式规则，双重校验导致报错提示不符合预期。
3. 代码本身不符合自定义Prettier规则：当前App.js首行大括号内View与逗号间存在多余空格，行尾缺少分号，不符合配置的格式要求。

1. 修正Prettier配置文件名
   将根目录下的prettier.js重命名为.prettierrc.js，确保Prettier可正常读取自定义规则。
2. 安装依赖并补全ESLint配置
   项目根目录执行命令安装冲突处理依赖：
   npm install eslint-config-prettier --save-dev
   （Yarn用户执行yarn add eslint-config-prettier -D）
   修改.eslintrc.js内容如下，关闭与Prettier冲突的规则：

module.exports = {
  root: true,
  extends: [
    '@react-native-community',
    'prettier'
  ]
}

3. 执行自动修复
   项目根目录执行命令批量修复所有存量格式问题：
   npx eslint . --fix
4. 清除校验缓存
   执行命令清除ESLint旧缓存，避免旧配置残留导致报错不消失：
   rm -rf .eslintcache
   （Windows用户可直接删除项目根目录下的.eslintcache文件）

修复完成后重新执行校验，所有prettier/prettier类格式报错将按自定义规则正常校验，不会再出现不符合预期的提示。

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