Prettier is not indenting as specified

Are you using .editorconfig? You might have to change (or set) to

"editor.tabSize" : 4

as well.

You can try the following to change indentation/tab width:

1. At the bottom of your Editor window, check for the 'Spaces: 2' (in case your code is getting indented with 2 spaces). Click on that and choose Indent using Tab and choose the value according to your need.

2. Alter Prettier options in Visual Studio Code settings: Go to the Visual Studio Code Setting by File > Preferences > Settings or pressing Ctrl + ,. Type 'Prettier' to bring up all the settings related to Prettier and look for Prettier: Tab Width. Change the value according to your need.

3. settings.json / User Settings file: Add the following lines to settings.json file which contains all the configurations associated with VS Code.

"prettier.tabWidth": 4,
"prettier.useTabs": true,

Depending on your platform, the user settings file / settings.json is located here:

Windows %APPDATA%\Code\User\settings.json
macOS $HOME/Library/Application Support/Code/User/settings.json
Linux $HOME/.config/Code/User/settings.json

visit https://code.visualstudio.com/docs/getstarted/settings for more info regarding User settings file / settings.json

4. If you have .editorconfig file: Check if you have a file named .editorconfig in the root of your project directory. In case you have that file, open it and make sure you change the values in the file according to your need. The below given code is for setting the indent_style Tab and the indent_size 4:

indent_style = tabs
indent_size = 4

5. If you do not have a .editorconfig file: In case you do not have a .editorconfig file in the root of your project directory, you can create a file named .prettierrc and add the following to the file

{
    "singleQuote": true,
    "printWidth": 80,
    "editor.formatOnSave": true,
    "proseWrap": "always",
    "tabWidth": 4,
    "requireConfig": false,
    "useTabs": false,
    "trailingComma": "none",
    "bracketSpacing": true,
    "jsxBracketSameLine": false,
    "semi": true
}

You can alter this based on your requirement