Configuring Indentation Settings in Visual Studio Code

Introduction

Indentation is a fundamental aspect of code readability and organization. Visual Studio Code (VSCode) provides versatile options to customize indentation settings, including tab size, spaces per indent, and language-specific configurations. This tutorial guides you through the steps to adjust these settings to suit your coding preferences.

Default Indentation Settings

By default, VSCode might use a different tab size or number of spaces for indentation based on your file type or previous editor settings. Understanding how to modify these can help maintain consistency across your projects and align with team coding standards.

Changing Global and Workspace Indentation Settings

Step 1: Access Settings

1. Open VSCode.
2. Click the gear icon in the bottom left corner.
3. Select "Settings" from the dropdown menu.

Alternatively, you can open settings using Ctrl + , (Windows/Linux) or Cmd + , (Mac).

Step 2: Adjust Tab Size and Spaces

1. In the search bar at the top of the Settings pane, type tabSize.

2. Uncheck "Detect Indentation" to prevent VSCode from automatically adjusting indentation settings based on file content.

3. Set your desired tab size (e.g., 2 or 4). This value will apply globally unless overridden in workspace-specific settings.

{
  "editor.tabSize": 2,
  "editor.insertSpaces": true, // Use spaces for indentation
  "editor.detectIndentation": false
}

Language-Specific Indentation Settings

VSCode allows you to define indentation rules specific to a programming language. This is particularly useful if your project involves multiple languages with different conventions.

Step-by-Step Configuration

1. Open the Command Palette using Ctrl + Shift + P (Windows/Linux) or Cmd + Shift + P (Mac).

2. Type and select: Preferences: Configure Language Specific Settings…

3. Choose a language, such as TypeScript.

4. If you are in the "Settings" menu:

   • Navigate to the language filter (e.g., @lang:typescript).
   • Use the arrow key (→) to place your cursor beside it.
   • Type Tab Size and enter your desired value.

5. Alternatively, if editing the settings.json file directly:

   • Add or modify the language-specific settings:

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

Using Prettier for Code Formatting

If you’re using Prettier as a code formatter, it can automatically handle indentation based on your configuration. Ensure that Prettier is set up to format files on save:

{
  "editor.formatOnSave": true,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Additional Tips

• Customizing Shortcuts: Use keyboard shortcuts like Shift + Alt + F (Windows) or Shift + Option + F (Mac) to format your code quickly.

• Column Selection: To select columns of text, use Ctrl + Shift + Alt + Arrow.

By configuring these settings, you can tailor VSCode’s behavior to match your coding style and project requirements.