TypeScript React Native格式化错误求助：代码可运行但格式异常

可能的根源 #

• 编辑器格式化工具（如Prettier）与项目代码规范（如ESLint）规则冲突
• 项目未配置统一的格式化规则文件，导致编辑器自动格式化时不符合预期
• 编辑器的格式化插件未正确启用或配置路径错误
• 代码文件的语法或格式不符合当前配置的规则，但不影响运行（比如缩进、引号类型、换行符等）

配置解决步骤 #

1. 统一项目格式化规则

   • 在项目根目录创建或完善 .prettierrc（或 .prettierrc.json）文件，定义格式化规则：

     {
       "singleQuote": true,
       "semi": false,
       "tabWidth": 2,
       "endOfLine": "lf"
     }
     

   • 若使用ESLint，确保安装 eslint-config-prettier 和 eslint-plugin-prettier，并在 .eslintrc.js 中配置：

     module.exports = {
       extends: [
         "eslint:recommended",
         "plugin:prettier/recommended"
       ]
     }
     

2. 编辑器配置

   • 在VS Code中，打开设置（快捷键 Ctrl+,），搜索 Format On Save 并勾选，确保保存时自动格式化
   • 配置默认格式化工具为Prettier：搜索 Default Formatter，选择 esbenp.prettier-vscode

3. 安装依赖

   • 执行命令安装所需依赖：

     npm install --save-dev prettier eslint eslint-config-prettier eslint-plugin-prettier
     

4. 验证格式化

   • 打开有错误的代码文件，执行快捷键 Shift+Alt+F 手动触发格式化，查看是否修复错误
   • 运行命令检查并修复所有文件：

     npx prettier --write .
     npx eslint --fix .
     

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