VSCode中React/React Native缩进错误排查与修复求助

Hey there, let's work through this indentation problem you're facing. The "expected indentation of 10 spaces but found 20" error usually pops up when there's a conflict between your ESLint rules, Prettier settings, and VSCode's default editor indentation preferences. Let's break down the fixes step by step:

1. Align VSCode Editor Settings with Your ESLint Config #

First, make sure VSCode's indentation behavior matches what you've set in .eslintrc. Open your VSCode settings.json (you can access it via Ctrl/Cmd + Shift + P > "Open Settings (JSON)") and add these configurations:

{
  // Use tabs instead of spaces (matches your ESLint rule)
  "editor.insertSpaces": false,
  // Set tab size to your preferred space equivalent (e.g., 2 spaces per tab)
  "editor.tabSize": 2,
  // Disable automatic indentation detection to avoid unexpected conflicts
  "editor.detectIndentation": false,
  // Enable auto-formatting when saving files
  "editor.formatOnSave": true,
  // Let ESLint auto-fix issues on save for your target file types
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}

2. Resolve ESLint + Prettier Conflicts #

Since you're using both ESLint (with Airbnb config) and Prettier, you need to ensure they work in sync. The Airbnb config has default indentation rules that clash with your tab-based setup—here's how to fix it:

Step 2.1 Install Required Bridge Packages #

Run this command in your project root to install packages that bridge ESLint and Prettier:

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

Step 2.2 Update Your .eslintrc #

Modify your existing .eslintrc to include Prettier extensions, which disable conflicting ESLint rules and align both tools:

{
  "env": {
    "browser": true,
    "es2020": true,
    "node": true
  },
  "extends": [
    "plugin:react/recommended",
    "airbnb",
    // Add these lines to integrate Prettier
    "prettier",
    "prettier/react"
  ],
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 11,
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "@typescript-eslint",
    // Add Prettier as an ESLint plugin
    "prettier"
  ],
  "rules": {
    "indent": [2, "tab", { "SwitchCase": 1, "VariableDeclarator": 1 }],
    "no-tabs": 0,
    "react/prop-types": 0,
    "react/jsx-indent": [2, "tab"],
    "react/jsx-indent-props": [2, "tab"],
    // Enforce Prettier rules through ESLint
    "prettier/prettier": "error"
  }
}

3. Verify and Test #

• Save all your config files, then restart VSCode (this ensures new settings take full effect).
• Open a React/React Native file with indentation issues, save it, and check if the error messages disappear.
• If issues persist, run npx eslint . --fix in your project root to manually auto-fix all indentation problems across your codebase.

Why This Works #

The Airbnb ESLint config defaults to 2-space indentation, which was conflicting with your tab-based setup. By adding the Prettier extensions, we disable those conflicting Airbnb rules and align both tools to follow your tab indentation preference. VSCode's settings ensure the editor itself uses tabs instead of spaces, so you don't get mismatched indentation as you type.

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