How do you format code on save in VS Code
Visual Studio-CodeVscode SettingsCode FormattingVisual Studio-Code Problem Overview
I would like to automatically format TypeScript code using the build-in formatter when I save a file in Visual Studio Code.
I'm aware of the following options, but none of them is good enough:
- Format manually
Shift + Alt + F
- Format on type
"editor.formatOnType": true
- It formats the line when you press enter. Unfortunatelly, it leaves it unformatted when you mouse-click another line or press up/down arrow.
- Use existing extension
- I tried this one, but it does not seem to work too well.
- Use beautify
"beautify.onSave": true
- It does not work with TypeScript
- Write custom extension
- It's tricky if you want to handle autosaves and builds correctly.
Visual Studio-Code Solutions
Solution 1 - Visual Studio-Code
As of September 2016 (VSCode 1.6), this is now officially supported.
Add the following to your settings.json
file:
"editor.formatOnSave": true
Solution 2 - Visual Studio-Code
No need to add commands anymore. For those who are new to Visual Studio Code and searching for an easy way to format code on saving, kindly follow the below steps.
- Open Settings by pressing
[Cmd+,]
in Mac or using the below screenshot.
- Type 'format' in the search box and enable the option 'Format On Save'.
You are done. Thank you.
Solution 3 - Visual Studio-Code
If you would like to auto format on save just with Javascript source, add this one into Users Setting
(press CmdShiftP or CtrlShiftP then type Open Settings (JSON)
to open settings.json
file)
"[javascript]": { "editor.formatOnSave": true }
Solution 4 - Visual Studio-Code
For eslint:
"editor.codeActionsOnSave": { "source.fixAll.eslint": true }
Solution 5 - Visual Studio-Code
For neet formatting for any language you can use Prettier - code formatter
.
After applying this you can format code Alt + Shift + f
Solution 6 - Visual Studio-Code
For MAC user, add this line into your Default Settings
File path is: /Users/USER_NAME/Library/Application Support/Code/User/settings.json
"tslint.autoFixOnSave": true
Sample of the file would be:
{
"window.zoomLevel": 0,
"workbench.iconTheme": "vscode-icons",
"typescript.check.tscVersion": false,
"vsicons.projectDetection.disableDetect": true,
"typescript.updateImportsOnFileMove.enabled": "always",
"eslint.autoFixOnSave": true,
"tslint.autoFixOnSave": true
}
Solution 7 - Visual Studio-Code
For me formatOnSave
wasn't working because I had prettier installed and hadn't yet chosen between the built-in and prettier as my default formatter.
To trigger the selection dialog I had to press Alt + Shift + f
on my json file.
Solution 8 - Visual Studio-Code
After hours of struggle... below steps worked.
Full details below.
- Install this extension
https://marketplace.visualstudio.com/items?itemName=pucelle.run-on-save
- Add below json, to below file:
File:
<your-project-directory>\.vscode\settings.json
OR
%UserProfile%\AppData\Roaming\Code\User\settings.json
JSON:
NOTE: Make sure commas before and after below block.
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 1000,
"runOnSave.statusMessageTimeout": 3000,
"runOnSave.commands": [
{
"match": ".*\\.*",
"command": "editor.action.formatDocument",
"runIn": "vscode"
}
],
Now, when the code is changed, after 1 second, it gets formatted & saved automatically.
Solution 9 - Visual Studio-Code
In addition to enabling setting Format On Save
, for python developers, you may need to install autopep8 package which is used by vscode as default to format the python code when the code is saved.
pip install autopep8
and then, press ctrl + s
to see changes.