Prettier is not indenting as specified

Question

Prettier continues to format my code incorrectly. I desire 4 spaces for tabs (second picture) but it ignores the editor settings and does 2 (first picture).

I know it is prettier causing this because when I disable it vs code correctly indents for me. Unfortunately the other functionality of prettier is lost. I have already tried uninstalling and reinstalling.

So, what settings changes am I missing? I must be missing something. Any suggestions would be grand. Thanks.

Here are are all of prettier's settings I have changed.

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

Answer 1

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