Menu
I have Prettier set up automatically formatting .js, .vue and other files on save. However, for some reason it is not triggering for .jsx files.
Clicking the "Prettier" item in the status bar shows:
["INFO" - 10:48:25 am] Enabling prettier for range supported languages
[
"graphql",
"javascript",
"javascriptreact",
"json",
"typescript",
"typescriptreact"
]
which seems correct.
What am I missing?
354
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.
Command+Shift+P to open it. It will show search bar with right arrow >, just start typing Format Document With, and you will come up with results as below. Select Format Document With and again you will be asked for few options. Select Prettier — Code Formatter and your file will be formatted.
This article will guide you through setting up Prettier to format your code in Visual Studio Code automatically. For demo purposes, here’s the sample code we will be formatting. If you’re picky about code formatting, you might pick up on some apparent missteps immediately.
With the Prettier extension installed, we can now leverage it to format our code. We’ll work more on this later, but to start, we can use the Format Document command. To open the command pallette, you can use Command + Shift + P on Mac or Control + Shift + P on Windows. In the command pallette search format, then choose Format Document.
prettier formatter doesn't support Format on selection or Formate On Save for HTML files - modification mode, So for this, you can set formatOnSaveMode:'html' for HTML files in settings.json Format selection works on several languages depending on what Prettier itself supports. The following languages currently are supported:
Prettier can format many languages: JavaScript, JSON, Markdown, HTML, CSS, etc. Here is formatting CSS for example. You can configure Prettier and its VSCode extension to format your JSON files. Since there is already a default JSON formatter built into VSCode, you need to tell VSCode to specifically use esbenp.prettier-vscode to format JSON files.
Ah, I found it. In VS Code's settings.json, each file type has to be individually enabled for formatOnSave:
{
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[vue]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
}
Note javascriptreact as the identifier for JSX.
174
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With