Reputation: 39320

How to change indentation in Visual Studio Code?

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)

Upvotes: 828

Answers (24)

Aviw

Reputation: 1095

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

Upvotes: 38

elliot-j

Reputation: 12128

In the toolbar in the bottom right corner you will see an 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

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

Upvotes: 1155

Martin Schneider

Reputation: 15388

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
}
```

I like these settings for indentation you can modify them according to need.

You can open VScode setting.json file by typing CTRL+SHIFT+P and paste below the JSON setting

setting.json

"[javascript]": {
  "editor.defaultFormatter": "vscode.typescript-language-features",
  "editor.formatOnSave": true,
  "editor.tabSize": 4,
  "editor.insertSpaces": false,
  "editor.detectIndentation": false,
  "editor.wrappingIndent": "deepIndent",
  "editor.autoIndent": "full"
},
"[typescript]": {
  "editor.defaultFormatter": "vscode.typescript-language-features",
  "editor.formatOnSave": true,
  "editor.tabSize": 4,
  "editor.insertSpaces": false,
  "editor.detectIndentation": false,
  "editor.wrappingIndent": "deepIndent",
  "editor.autoIndent": "full"
}

Upvotes: 2

ejabu

Reputation: 3147

I had a hard time to set it for Go Lang.

Finally I was able to enforce space instead of tab and 2 tab size by below steps.

Command Pallette -> Preferences Open User Settings (JSON)
Then insert below config

{
  ...,
  "[go]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "editor.detectIndentation":false,
  },
  ...
}

Upvotes: 1

ame

Reputation: 851

Place these lines into .editorconfig:

[*]
indent_style = space
indent_size = 2

Then install "Prettier - Code formatter" in VS Code

Then press Option + Shift + F on Mac, or Alt + Shift + F on Windows

Upvotes: -1

Giles Bonner

Reputation: 55

If youre trying to change your default spacing, you need to change the "editor.insertSpaces" (boolean) key in settings.json. Otherwise this only works per file.

"editor.tabSize" will allow you to set the tab size you want (2, 4, 6 etc)

Upvotes: 1

Xin

Reputation: 36600

You can change this in global User level (all your projects if not deliberately set) or Workspace level (only for the current working project).

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 :))

Upvotes: 556

VonC

Reputation: 1328122

With VSCode 1.75 (Jan. 2023), indentation is also customizable on VSCode terminals, not just VSCode views.

See issues 170432: "Add a terminal tab stop size (editor.tabSize) setting"

When a tab is printed in the terminal, it has a tab size of 8 spaces, regardless of the tab size setting.

Therefore, PR 170733 adds a new setting:

terminal.integrated.tabStopWidth: The number of cells in a tab stop

Upvotes: 0

Nacho

Reputation: 388

Check tabWidth if you are using a formatter, that was the issue in my case. It represents the number of spaces used in tabs.

Upvotes: 3

Vaska Raminashvili

Reputation: 1

First, check if you have installed "EditorConfig for VS Code". It was overriding my editor settings. I spent all day correcting this problem.

In the project find .editorconfig file and ones changed there it will work.

Upvotes: -1

Andres Riofrio

Reputation: 10367

The following search-and-replace regex changes the number of spaces per indentation level from 4 to 2 in existing files. It's relatively easy to understand, reliable, and doesn't require installing anything.

Instructions

Press CtrlH (or ⌥⌘F on macOS).
Make sure regex matching is on by clicking on the .* button in the search popup or pressing AltR (or ⌥⌘R on macOS).
In the Find field, enter ^(?:( ) )?(?:( ) )?(?:( ) )?(?:( ) )?(?:( ) )?(?:( ) )?(?:( ) )?(?:( ) )?(?:( ) )?
In the Replace field, enter $1$2$3$4$5$6$7$8$9
Finally press CtrlEnter (or ⌘Enter on macOS) to apply to the current file.

You could also use this in the Search pane on the left to do this across all files in your project. However, note that this should only be run once per file. It will mess up the indentation of files that already use 2 spaces.

Extra Credit: How It Works

The way the regular expression works is it matches groups (?: ... ) of four spaces at a time at the beginning ^ ... of each line, only capturing ( ... ) the first two spaces. Each indentation level is optional ... ?, so it works for as many indentation levels as the pattern is repeated and there are in each line. Then it replaces the whole pattern with only the captured spaces $1, $2, ..., effectively replacing every four-space indentation level with two spaces.

This pattern only works up to 9 indentation levels (I'm not sure if $10 would work, but if so this could be expanded indefinitely).

Extra Extra Credit: Extending

You could adapt the pattern to decrease the number of spaces per indentation level in a file from any original number to another lower target number.

Put the target number of spaces inside the inner parenthesis. Then, put the remaining original number of spaces in the outer parenthesis, so the total number of spaces in the pattern is the original.

For example, if you want to change the indentation level from 6 to 4, repeat this search pattern as many times as you like:

^(?:( ) )? or ^(?:( {4}) {2})?

And use the same number of $1, $2 in the replacement pattern.

Upvotes: -2

Anand Raja

Reputation: 3126

Step 1: Open settings.json in vscode

Step 2: Add the lines as below for the programming language (an example is below)

For typescript and javascript

"editor.detectIndentation": false,
"[typescript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features",
        "editor.tabSize": 2,
        "editor.insertSpaces": true,
        "editor.detectIndentation":false
 },
"[javascript]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "editor.detectIndentation":false
}

Upvotes: 7

Carlos Soriano

Reputation: 729

For me it was docs-markdown andDocs Authoring Pack. Microsoft's many modules messing with each other yet again! Disabled the extensions and now good to go again 😀

Upvotes: 1

Hexodus

Reputation: 12965

Setting the indentation in preferences isn't allways the solution. Most of the time the indentation is right except you happen to copy some code code from other sources or your collegue make something for you and has different settings. Then you want to just quickly convert the indentation from 2 to 4 or the other way round.

That's what this vscode extension is doing for you

Upvotes: 8

Adhil Muhammed

Reputation: 17

The Problem of auto deintending is caused due to a checkbox being active in the settings of VSCode. Follow these steps:

goto preferences
goto settings
search 'editor:trim auto whitespace'
Uncheck The box

Upvotes: -1

casual234

Reputation: 811

How to turn 4 spaces indents in all files in VS Code to 2 spaces

Open file search
Turn on Regular Expressions
Enter: ( {2})(?: {2})(\b|(?!=[,'";\.:\*\\\/\{\}\[\]])) in the search field
Enter: $1 in the replace field

How to turn 2 spaces indents in all files in VS Code to 4 spaces

Open file search
Turn on Regular Expressions
Enter: ( {2})(\b|(?!=[,'";\.:\\*\\\/{\}\[\]])) in the search field
Enter: $1$1 in the replace field

NOTE: You must turn on PERL Regex first. This is How:

Open settings and go to the JSON file
add the following to the JSON file "search.usePCRE2": true

Hope someone sees this.

Upvotes: 24

JGallardo

Reputation: 11383

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

Step 1: Click on Preferences > Settings

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

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

Changes are automatically saved

Example of my changes

Upvotes: 15

Sujatha Girijala

Reputation: 1209

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

Upvotes: 71

shacker

Reputation: 15371

Problem: The accepted answer does not actually fix the indentation in the current document.

Solution: Run Format Document to re-process the document according to current (new) settings.

Problem: The HTML docs in my projects are of type "Django HTML" not "HTML" and there is no formatter available.

Solution: Switch them to syntax "HTML", format them, then switch back to "Django HTML."

Problem: The HTML formatter doesn't know how to handle Django template tags and undoes much of my carefully applied nesting.

Solution: Install the Indent 4-2 extension, which performs indentation strictly, without regard to the current language syntax (which is what I want in this case).

Upvotes: 6

Wompinalong

Reputation: 141

Adding on: yes, you can use the bottom-right UI to configure the space settings. But if you have existing code that's not formatted to the new spacing, then you can right-click anywhere within the file and click Format Document. Took me a while to figure this out until I stumbled on this issue.

Format Document menu

Upvotes: 0

Rounak

Reputation: 611

I wanted to change the indentation of my existing HTML file from 4 spaces to 2 spaces.

I clicked the 'Spaces: 4' button in the status bar and changed them to two in the next dialog box.

I use 'vim' extension. I don't how to re-indent without vim

To re-indent my current file, I used this:

gg

=

G

Upvotes: 4

RMuesi

Reputation: 3072

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.

Upvotes: 65

How to change indentation in Visual Studio Code?

Answers (24)

I like these settings for indentation you can modify them according to need.

Instructions

Extra Credit: How It Works

Extra Extra Credit: Extending

Related Questions