React项目编译出现prettier/spaced-comment格式错误该如何修复？

报错原因 #

你的项目开启了 ESLint + Prettier 强制代码格式校验，构建阶段会严格检查代码的缩进、空格、换行、注释格式、分号等规范，不符合规则就会直接中断编译，你看到的所有报错都是格式不匹配的问题，没有语法逻辑错误。

修复方案 #

方案1：一键自动修复所有格式问题（推荐） #

直接在项目根目录终端运行对应命令，Prettier会自动按照规则修正所有不符合要求的格式：

# 通用ESLint修复命令
npm run lint -- --fix
# 用yarn的话运行下方命令
yarn lint --fix
# 上面命令不生效的话，直接用prettier格式化整个src目录
npx prettier --write src/

运行完之后再重新启动项目/打包，绝大多数格式错误都会直接消失。

方案2：手动修改对应问题 #

如果不想用自动修复，按照报错提示逐行修改即可：

• 所有prettier/prettier开头的报错：按照提示增减空格、换行、缩进、分号即可，比如提示插入·就是加空格，提示删除⏎······就是删对应换行和缩进，提示插入;就是末尾加英文分号
• 所有spaced-comment开头的报错：在//后面加一个空格即可，比如把//注释改成// 注释

方案3：关闭强制校验（仅临时调试用，不推荐长期使用） #

如果不需要这套格式规则，也可以修改配置关闭校验：

1. 找到项目根目录的.eslintrc.js（或者.eslintrc.json等eslint配置文件）
2. 在rules节点里添加以下配置：

rules: {
  'prettier/prettier': 'off',
  'spaced-comment': 'off'
}

修改后重启项目即可。

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