Alt + shift + f reformats my code, but I cannot find out how to alter how it reformats. Is there a way to personalize how it reformats my code and can someone please tell me, or would someone please recommend an extension that can do what I am asking for?
Thanks.
Videos
The code formatting is available in Visual Studio Code through the following shortcuts:
- On Windows Shift + Alt + F
- On Mac Shift + Option + F
- On Linux Ctrl + Shift + I
Alternatively, you can find the shortcut, as well as other shortcuts, through the submenu View / Command Palette, also provided in the editor with Ctrl + Shift + P (or Command + Shift + P on Mac), and then searching for format document.
For unsaved snippets
Open command palette (Win: F1 or Ctrl + Shift + P)
Find "Change Language Mode"
Select language e.g.
json. By now, the syntax should be highlighted.Format document (e.g. Open Command Palette -> "Format Document")
Unformat
- Select text
- Command Palette -> Join Lines
'Show the pics'
Code Formatting Shortcut:
Visual Studio Code on Windows - Shift + Alt + F
Visual Studio Code on MacOS - Shift + Option + F
Visual Studio Code on Ubuntu - Ctrl + Shift + I
You can also customize this shortcut using a preference setting if needed.
Code Formatting While Saving the File:
Visual Studio Code allows the user to customize the default settings.
If you want to auto format your content while saving, add the below code snippet in the work space settings of Visual Studio Code.
Menu File → Preferences → Workspace Settings
{
// Controls if the editor should automatically format the line after typing
"beautify.onSave": true,
"editor.formatOnSave": true,
// You can auto format any files based on the file extensions type.
"beautify.JSfiles": [
"js",
"json",
"jsbeautifyrc",
"jshintrc",
"ts"
]
}
Note: now you can auto format TypeScript files. Check my update.
So I keep seeing Prettier come up when I look for an auto-formatter but I'm a little worried as it says that it's opinionated.
My workplace has very specific coding standards and I'd prefer one that is configurable as possible.
Also preferably with the ability to share those settings with other members of my team.
Update
Solution A:
Press Ctrl+Shift+P
Then type Format Document With...
At the end of the list click on Configure Default Formatter...
Now you can choose your favorite code beautifier from the list.
If Format Document With... is not available:
Open a file in Visual Studio Code (the extension of the file is not important can be .js, .html, .txt, etc...) then repeat Solution A again.
Solution B:
Windows:
go to file -> preferences -> settings
Mac:
go to code -> preferences -> settings
in the search bar tpye format,
on the left side, click on Text Editor, the very first item on the right side is Editor: Default Formatter from the dropdown you can pick any document formatter which you've installed before.
If we are talking Visual Studio Code nowadays you set a default formatter in your settings.json:
// Defines a default formatter which takes precedence over all other formatter settings.
// Must be the identifier of an extension contributing a formatter.
"editor.defaultFormatter": null,
Point to the identifier of any installed extension, i.e.
"editor.defaultFormatter": "esbenp.prettier-vscode"
You can also do so format-specific:
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[sass]": {
"editor.defaultFormatter": "michelemelluso.code-beautifier"
},
Also see here.
You could also assign other keys for different formatters in your keyboard shortcuts (keybindings.json). By default, it reads:
{
"key": "shift+alt+f",
"command": "editor.action.formatDocument",
"when": "editorHasDocumentFormattingProvider && editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly"
}
Lastly, if you decide to use the Prettier plugin and prettier.rc, and you want for example different indentation for html, scss, json...
{
"semi": true,
"singleQuote": false,
"trailingComma": "none",
"useTabs": false,
"overrides": [
{
"files": "*.component.html",
"options": {
"parser": "angular",
"tabWidth": 4
}
},
{
"files": "*.scss",
"options": {
"parser": "scss",
"tabWidth": 2
}
},
{
"files": ["*.json", ".prettierrc"],
"options": {
"parser": "json",
"tabWidth": 4
}
}
]
}