React Native切换原生Android后出现大量缩进错误，求解决方案

编辑器层面自动格式化 #

• VS Code：安装ESLint和Prettier - Code formatter插件，打开设置（Ctrl+,）并编辑JSON配置：

  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
  "editor.tabSize": 2
  

  保存文件时会自动统一缩进、换行等格式。

• WebStorm/IntelliJ：进入Settings -> Editor -> Code Style -> JavaScript，将缩进大小设为2，取消勾选Use tab character（用空格缩进）；再开启Settings -> Tools -> Actions on Save里的Reformat code选项，保存时自动格式化代码。

项目添加格式化配置文件 #

1. 安装依赖：

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

2. 根目录创建.prettierrc文件，定义统一格式化规则：

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

3. 创建.eslintrc.js文件，让ESLint与Prettier配合校验：

   module.exports = {
     env: {
       browser: true,
       es2021: true,
       node: true
     },
     extends: [
       'eslint:recommended',
       'plugin:react/recommended',
       'plugin:prettier/recommended'
     ],
     parserOptions: {
       ecmaFeatures: {
         jsx: true
       },
       ecmaVersion: 'latest',
       sourceType: 'module'
     },
     plugins: ['react', 'prettier'],
     rules: {
       'prettier/prettier': 'error',
       'react/react-in-jsx-scope': 'off' // React 17+无需手动引入React
     }
   };
   

   配置后编辑器会实时提示格式错误，也可执行npx eslint --fix .批量修复现有文件的格式问题。

Git钩子拦截不合规代码 #

安装husky和lint-staged，确保提交代码前自动格式化：

npm install --save-dev husky lint-staged

在package.json中添加：

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.{js,jsx,ts,tsx}": ["prettier --write", "eslint --fix"]
}

每次提交代码前，会自动对改动文件执行格式化修复，避免格式错误进入代码库。

批量修复现有代码 #

如果已有大量缩进错误的文件，可执行以下命令批量修复：

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

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