How to format file in Visual Studio Code (hotkeys)?

Question

How to format file | project folder | all project files (using hot keys AND using menu) in Visual Studio Code?

Emmerich

Answer 1

If you're on Windows use Shift + Alt + F to make your code "pretty".

(This is similar to Ctrl + K + D in Visual Studio)

You will have to do this for each individual file though. I don't know of a way to format all files at once.

Ladle

I'm not on Windows but Shift + Alt + F works for me. – Emmerich

Cool. You can find the hotkey by searching (Shift+Ctrl+P) for "Format Document". I'm on Windows so that's what I can speak to. What are you running @Sergii? – Ladle

macOS Sierra. – Emmerich

Good to know. For some reason I thought a mac keyboard didn't have an alt key. – Ladle

Answer 2

Try with this hotkeys

Ctrl + Shift + i

Fabian

I have everything default. Should I customize something? (...it does not work) – Emmerich

Try install editorconfig extension and try again Ctrl+Shift+I – Fabian

How to install it? – Emmerich

If you know how to, I need more details please... (I've installed but it doesn't work, may be I've installed something else or incorrectly....) – Emmerich

Look at code.visualstudio.com/docs/getstarted/settings and in File > Preferences > Keyboard Shortcut in Format Document look at what is the keybinding – Fabian

Answer 3

@Sergii

Your question looks like you are looking for a way to format your entire code in VSCode. If this is the case, a VSCode extension like Prettier should meet the three requirements you've listed (file | project folder | all project files). Bear in mind though that formatting all project files is a bit unclear and you probably want to be specific about formatting all *.ts or all *.js files etc.

The below may be of help to you:

• Read about prettier because it provides ability to format entire code base
• Install prettier-vscode extension to your VSCode and enable settings that you want
• Alternatively, you can use prettier from the CLI, npm build script or via its API in build task - the choice is yours.

The one I found most useful is adding it as a git pre-commit hook for staged files.

I hope above points you in the right direction.

SOJ

Boulanger

Answer 4

In case you are not able to format your code with any of these commands it's maybe because you did not set up your formatter configuration

I recommend you to use Prettier (install from Extensions)

1. open the command palette (CTRL + SHIFT + P - on windows)
2. search for prettier: Create Configuration File
3. hit Enter and choose your project directory folder path
4. if you can see a .prettierc file added into your directory, you must be able to use SHIFT + ALT + F to format your code

+1. also you are able to set your environment to automatically format your file at save.
You can do it writing this line in settings.json:

"editor.formatOnSave": true

Hint: Access it using the command palette again and writing settings.json, and select
Preference: Open Settings (JSON)

Tildy