Advertisement
Advertisement


How to change indentation in Visual Studio Code?


Question

For every typescript file visual studio code uses an auto indentation of 8 spaces. This is a bit too much for my taste but I can't find where to change it.

Maybe it's available as a setting but under a different name as I can't find anything related to indentation.

UPDATE

I'm currently using the Prettier code formatter and that solves all formatting problems by auto formatting on save (if there is no syntax error)

2019/11/21
1
387
11/21/2019 9:19:18 PM

Accepted Answer

You can change this in global User level or Workspace level.

Open the settings: Using the shortcut ctrl + , or clicking File > Preferences > Settings as shown below.

Settings on VS Code menu

Then, do the following 2 changes: (type tabSize in the search bar)

  1. Uncheck the checkbox of Detect Indentation
  2. Change the tab size to be 2/4 (Although I strongly think 2 is correct for JS :))

enter image description here

2020/04/19
172
4/19/2020 5:08:56 PM


To change the indentation based on programming language:

  1. Open the Command Palette (CtrlShiftP | macOS: P)
  2. Preferences: Configure language specific settings... (command id: workbench.action.configureLanguageBasedSettings)
  3. Select programming language (for example TypeScript)
  4. Add this code:

    "[typescript]": {
        "editor.tabSize": 2
    }
    

See also: VS Code Docs

2019/12/10

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.

2017/08/24

Code Formatting Shortcut:

VSCode on Windows - Shift + Alt + F

VSCode on MacOS - Shift + Option + F

VSCode on Ubuntu - Ctrl + Shift + I

You can also customize this shortcut using preference setting if needed.

column selection with keyboard Ctrl + Shift + Alt + Arrow

2018/12/27

In my case "EditorConfig for VS Code" extention is overriding VSCode settings. If you have it installed, then check .editorconfig file in the root folder of the project.

Here is an example config. The "indent_size" sets the number of spaces for a tab.

# editorconfig.org
root = true

[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false
2018/08/20

Simplified explanation with pictures for those that googled "Change indentation in VS Code"

Step 1: Click on Preferences > Settings

enter image description here

Step 2: The setting you are looking for is "Detect Indentation", begin typing that. Click on "Editor: Tab Size"

enter image description here

Step 3: Scroll down to "Editor: Tab Size" and type in 2 (or whatever you need).

enter image description here



Changes are automatically saved

enter image description here

Example of my changes

enter image description here

2020/06/20