How to change indentation in Visual Studio Code?
You might also want to set the editor.detectIndentation
to false, in addition to Elliot-J's answer.
VSCode will overwrite your editor.tabSize
and editor.insertSpaces
settings per file if it detects that a file has a different tab or spaces indentation pattern. You can run into this issue if you add existing files to your project, or if you add files using code generators like Angular Cli. The above setting prevents VSCode from doing this.
In the toolbar in the bottom right corner you will see a item that looks like the following: After clicking on it you will get the option to indent using either spaces or tabs. After selecting your indent type you will then have the option to change how big an indent is. In the case of the example above, indentation is set to 4 space characters per indent. If tab is selected as your indentation character then you will see Tab Size instead of Spaces
If you want to have this apply to all files and not on an individual file basis, then override the Editor: Tab Size
and Editor: Insert Spaces
settings in either User Settings or Workspace Settings depending on your needs
Edit 1
To get to your user or workspace settings go to Preferences -> Settings. Verify that you are on the User or Workspace tab depending on your needs and use the search bar to locate the settings. You may also want to disable Editor: Detect Indentation
as this setting will override what you set for Editor: Insert Spaces
and Editor: Tab Size
when it is enabled
To change the indentation based on programming language:
- Open the Command Palette (CtrlShiftP | macOS: ⇧⌘P).
- Type and select: Preferences: Configure Language Specific Settings... (command id:
workbench.action.configureLanguageBasedSettings
). - Select a programming language (for example TypeScript).
If Settings menu is opened (since 1.66.0):
4. Press → to place the cursor right beside the language filter (e.g.@lang:typescript
).
5. Type Tab Size and enter your preferred value in the text box.If settings.json file is opened:
4. Add this code:"[typescript]": { "editor.tabSize": 2 }
See also: VS Code Docs
You can change this in global User
level or Workspace
level.
Open the settings: Click the gear on the bottom left, then click Settings
as shown below.
Then, do the following 2 changes: (type tabSize
in the search bar)
- Uncheck the checkbox of
Detect Indentation
- Change the tab size to be 2/4 (Although I strongly think 2 is correct for JS. Haha :))