How to indent/format a selection of code in Visual Studio Code?

In Visual Studio Code, you can use several methods to indent or format selected code. These features are crucial for maintaining code cleanliness and readability, especially in collaborative projects. Next, I will detail several common methods:

1. Using Shortcuts

Visual Studio Code provides several shortcuts to quickly indent and format selected code:

• Format selected code: Use Shift + Alt + F (Windows and Linux) or Shift + Option + F (macOS) to format the selected code.
• Increase indentation: Select the code and use Ctrl + ] (Windows and Linux) or Cmd + ] (macOS) to increase indentation.
• Decrease indentation: Use Ctrl + [ (Windows and Linux) or Cmd + [ (macOS) to decrease indentation.

2. Using the Right-click Menu

In addition to shortcuts, you can access formatting options by right-clicking on the selected code:

• After selecting the code, right-click on it and choose "Format Selection". This will format the selected code according to your settings.

3. Configuring Editor Settings

To ensure code consistency, you can configure the default formatter in Visual Studio Code. For example, you can set Prettier as the default formatter for JavaScript code. This can be done by editing the settings.json file:

json
{
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

After setting this, every formatting operation will use Prettier rules to format JavaScript code.

Example: Formatting JavaScript Code

Suppose you have the following JavaScript code snippet:

javascript
function hello(name){
console.log("Hello, " + name);
}

After selecting this code and using Shift + Alt + F, the formatted code will appear as follows:

javascript
function hello(name) {
    console.log("Hello, " + name);
}

By using these methods, you can ensure that your code structure is clear and adheres to team or project coding standards. This not only enhances code maintainability but also improves overall code quality.