VS Code indent or tabSize problem with error color

You can see in the image tab size problem or indent, why the red colour or error colour on the indent? How to fix the problem/error?

"[python]": {
      "editor.tabSize": 3,
      "editor.defaultFormatter": "ms-python.python",
      "editor.detectIndentation": false
   },
   "[django-html]": {
      "editor.quickSuggestions": {
         "other": true,
         "comments": true,
         "strings": true
      },
      "editor.defaultFormatter": "ms-python.python",
   }

you can see red color error

Answer

The problem is because you have the indent-rainbow extension installed, which makes multiple indents in your code highlighted in different colors. And the reason your indentation is showing red is that the number of indented spaces in your code is not a multiple of the tabSize you set. For example, the number of spaces represented by the tab character you set is 3, but the indentation in your code is not 3 or 6 spaces.

It’s very simple to fix this problem, you just need to add or delete spaces before your code indentation to make it match the tabSize you set, or modify the tabSize you set so that they match the number of spaces indented before your current code .

It is recommended that you set the tabSize in the future use before writing the code.

Add this configuration in setting.json to modify the number of spaces represented by tabs:

"editor.tabSize": 4

Adding this configuration in setting.json can modify what color is displayed when the number of indented spaces is not a multiple of tabSize:

"indentRainbow.errorColor": "#ff0000"

This setting will skip indentation error detection for the language you choose(use ‘*’ to deactivate errors for all languages).

"indentRainbow.ignoreErrorLanguages":"python"

Of course, the easiest solution is to just uninstall the extension if you don’t like it.