How to Format Code in VS Code

When typing in commands in VS Code, trying to be neat can sometimes be the last thing on your mind. Although formatting isn’t required for a program to run, it helps greatly during debugging and trying to locate errors.

In this article, we’ll show you how to format code in VS Code along with other helpful tips for keeping your code well organized.

How to Format Code

VS Code has built-in commands to arrange currently typed code to the standard format. These shortcut keys require no additional extensions and can be used at any time. The shortcuts are as follows:

For PC

Format the entire document:

1. Open the file with the code that you wish to format.
   
2. Press “Shift + Alt + F”.
   
3. Save the changes by clicking on “File” in the upper left corner then choosing “Save,” or by pressing “Ctrl + S”.
   

Formatting selected code only:

1. On the file with the lines of code that you wish to format, select the lines by highlighting them with your mouse.
   
2. Press “Ctrl + K”.
   
3. Press “Ctrl + F”.
   
4. Save the changes either by choosing “Save” on the File menu in the upper left corner or by pressing “Ctrl + S”.
   

Note that if you press “Ctrl + F” without first pressing “Ctrl + K” you’ll open up the Find Menu. If this happens, just close the clicking the “x” button or pressing Esc.

Move lines up or down:

1. Move your cursor to the beginning of the line that you wish to move.
   
2. Hold down the Alt Key.
   
3. To move the line upwards, press the up arrow. To move it down, press the down arrow.
   
4. Save your file by choosing it from the File menu in the upper left corner of the window or by pressing “Ctrl + S”.
   

Change indentation of a single line:

1. Move your cursor to the beginning of the line in which you want to change the indention.
   
2. Press “Ctrl + ]” to increase the indentation.
   
3. Press “Ctrl + [“ to decrease the indent.
   
4. Save changes by selecting Save from the File menu or by pressing “Ctrl + S”.
   

For Mac

Format the entire document:

1. Open the file with the code that you wish to format.
2. Press “⇧ + ⌥ + F.”
   
3. Save your changes by clicking “File” on the upper left then choosing “Save” or pressing “⌘ + S”.

Formatting selected code only:

1. Highlight the part of the document that you wish to format.
2. Press “⌘ + K”.
   
3. Press “⌘ + F”.
   
4. Save your file by pressing “⌘ + S” or by choosing “Save” from the File menu on the upper left corner of the window.
   

Note that using “⌘ + F” without pressing “⌘ + K” beforehand will only open the Find Menu. To close the Find Menu just press “x” on the right side or press Esc.

Move lines up or down:

1. Place your cursor at the beginning of the line you want to edit.
2. Hold down the “⌥” Key.
   
3. To move a line up, press the up arrow. To move it down, press the down arrow.
   
4. Save your changes by choosing “Save” from the File menu or by pressing “⌘ + S”.
   

Change indentation of a single line:

1. Move your cursor to the beginning of the line in which you want to change the indention.
2. Press “⌘ + ]” to increase the indentation.
   
3. Press “⌘ + [“ to decrease the indent.
   
4. Save the file by pressing “⌘ + S” or by choosing “Save” from the File menu on the upper left corner of the window.
   

VS Code Format Code on Save

VS Code doesn’t have a native command that formats your document on save. Instead, this can be done by installing a formatting extension onto your VS Code application. The most popular of these extensions is Prettier which provides a lot of formatting functionality to VS Code. Prettier can be installed by doing the following:

1. Open VS Code.
   
2. Click on the Extensions button located on the left menu. This is the icon that looks like four boxes. Alternatively, you can press “Ctrl + Shit + x” for PC or “⌘ + ⇧ + x” on Mac.
   
3. In the search bar at the top of the menu, type in Prettier.
   
4. Click on the Install button on the bottom right corner of the Prettier icon.
   
5. Wait for the extension to finish the installation.
   

Before Prettier can begin to automatically format your document on save, you’ll have to set up the extension to activate the feature. This is done by doing the following:

1. Open the settings window by pressing “Ctrl +,” on PC or “⌘ +,” on Mac.
   
2. On the search bar type in formatter. This should bring up several formatting settings.
   
3. On the Editor: Default Formatter setting, make sure that the selected extension is Prettier. If there’s no default formatter or VS Code is using another formatter by default, press the dropdown arrow. Select “Prettier – Code Formatter” from the list. Alternatively, Prettier may appear on the list as “esbenp.prettier-vscode”.
   
4. Make sure that the “Editor: Format On Save” option has been checked. If not, toggle the checkmark.
   
5. Type “Prettier” in the settings search bar.
   
6. Scroll down until you find the line “Prettier: Require Config”. Make sure that the checkbox has been ticked. This setting prevents Prettier from formatting documents without a config file. This is handy when you’re looking at downloaded code that may have its own formatting rules. This prevents you from overwriting formatting options unintentionally. Note that untitled files will still be formatted automatically even if this setting is checked.
   
7. You can edit specific Prettier settings depending on your preferences. Once you’re done, you can exit this menu.

As you’ve configured Prettier to automatically format only when there’s a config file, you must create one for each project. This is done by following these steps:

1. Select the root of your project on the left menu.
   
2. Click on the new file button to create a config file.
   
3. Name this file “.prettierrc.”
   
4. On the file, just enter {}.
   
5. Prettier will now automatically format your document whenever you save it.

Tips for Keeping Code Organized

1. Although indentation isn’t necessary for a program to run, it can help debugging by compartmentalizing code into manageable modules. If-Then statements or nested cases, for example, can benefit from this by making each alternative option visually distinguishable from one another. This comes in handy when you’re dealing with logic errors instead of syntax ones.
2. If you’re naming modules or short lines of code, make it a habit in using descriptive titles rather than simply calling it module 1, module 2, etc. This makes it easier to know which part of the code does a particular function.
3. It’s always a good idea to use comments to your advantage. Whether you’re including a quick description, or just adding a note for yourself, comments help immensely during debugging.

Organizing Code

Keeping your projects properly formatted not only makes it easier to read, it also helps in identifying errors and keeps your code organized. Although not necessary for a program to run, knowing how to format your files in VS Code is a definite advantage.

Do you know of other ways to format your files in VS Code? Feel free to share your thoughts in the comments section below.