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

User · Answer

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

User · Answer

To change the indentation based on programming language   Open the Command Palette  CtrlShiftP   macOS    P   Preferences  Configure language specific settings     command id  workbench action configureLanguageBasedSettings   Select programming language  for example TypeScript   Add this code   quot  typescript  quot          quot editor tabSize quot   2      See also  VS Code Docs

User · Answer

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

User · Answer

You can change this in global User level or Workspace level  Open the settings  Using the shortcut Ctrl   or clicking File  gt  Preferences  gt  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

User · Answer

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

User · Answer

To set all existing files and new files to space identation to 2 just put it in your settingns json  in the root of json      typescript               editor defaultFormatter    vscode typescript-language-features            editor tabSize   2           editor insertSpaces   true           editor detectIndentation  false      you can add the language type of the configuration     javascript           editor tabSize   2       editor insertSpaces   true       editor detectIndentation  false

User · Answer

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 idividual file basis  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 - gt  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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Simplified explanation with pictures for those that googled  quot Change indentation in VS Code quot  Step 1  Click on Preferences  gt  Settings  Step 2  The setting you are looking for is  quot Detect Indentation quot   begin typing that  Click on  quot Editor  Tab Size quot   Step 3  Scroll down to  quot Editor  Tab Size quot  and type in 2  or whatever you need      Changes are automatically saved  Example of my changes

User · Answer

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

User · Answer

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

[formatting] How to change indentation in Visual Studio Code?

Examples related to formatting

Examples related to visual-studio-code