On VS Code, I installed the prettier extensions, and since it doesn't support EJS, I added"prettier.disableLanguages": [ "ejs", ".ejs" ] to the setting.json file. This also shows up in the regular settings under Prettier: Disable Languages. Despite this, prettier keeps on re-formatting my EJS, which is super frustrating. How do I stop prettier from modifying a certain language besides this method?
Since Prettier knows nothing about EJS, it doesn't understand what you wrote in prettier.disableLanguages. Also VS Code considers .ejs files HTML. This not exactly accurate conclusion is passed to the Prettier extension, which in turn passes it to Prettier, so Prettier tries to format your files as pure HTML.
Try adding *.ejs to the .prettierignore file. You can read more about it here: https://prettier.io/docs/en/ignore.html
Your can add this
"[html]": { "editor.formatOnSave": false },
in your settings.json file in VSCode it will prevent auto formating html files, prettier still not have any ignore for .ejs files.
As .ejs files are still taken as html files by prettier.
Related
I'm working with ejs files, but in order to reuse some code, I'm using the includes feature. Given that some opening/closing html tags are placed in other files, after I save my changes, something (I don't know if prettier extension or VS code editor) is including the closing tags into my code, causing several problems when I running it.
An other solution is to use a .prettierignore file and put in :
*.ejs
in your settings.json you should add these settings.
just instead of "[css]" type what you want. (the format of the file)
and just please ignore line 2 :) that's not related to this answer.
Edit
as #aegatlin said use this: "[html]".(if "[ejs]" didn't work for you)
I don't use EJS myself, but after playing around with it in VSCode, I noticed that my .ejs files were being treated as HTML files. You can see how your VSCode is interpreting the file by looking in the bottom right corner of the editor. You could search for EJS extensions as well.
You likely have the "Editor: format on save" option enabled. To disable that setting, go to Preferences, and in the search bar type "format on save". Find the setting. Uncheck the box. That should fix the problem.
If, as you mentioned, your closing HTML tags are in other files, then you have invalid HTML and the formatter (both Prettier's and the default one) will autocomplete the closing tag. (I would wager EJS also wouldn't like the lack of closing tags, but since I don't use it I'm not so sure, maybe it's fine.)
Zulhilmi Zainudin has the solution
https://medium.com/#zulhhandyplast/how-to-disable-vs-code-formatonsave-for-specific-file-extensions-c60e8f254243
In vscode setting file, associate ejs extentions files to a « language ». Then you can specify different rules for this that language :
.vscode/settings.json file content :
{
"files.associations": {
"*.ejs": "ejs" // this create the language « ejs » which refers to any .ejs file
},
"[ejs]": { // custom settings for the language « ejs »
"editor.formatOnSave": false
}
}
I work on multiple Projects (Javascript - React Native). Some use the default formatting that comes with VS Code out of the box and some use prettier.
I now want to set up VS Code, so when i save a file it applies prettier, when prettier is used in the project, else use the default styling format.
I have installed the prettier extension and have set "prettier.requireConfig": true in the settings, so that it only applies in projects with a .prettierrc file.
So right now the formatting works in the prettier projects as expected, but when i save in other projects no formatting is applied at all.
This is what i added in vs codes settings.json:
"editor.formatOnSave": true,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"prettier.requireConfig": true,
When i disable prettier and remove the defaultFormatter part, it will no longer apply prettier and use the vs code default style in all projects again.
So my question is, how can i set up vs code, so that i can use prettier properly in Projects that use it and when i have to do work in another Project i still have some basic formatting, but i don't reformat the whole file when i save.
If you have multiple extensions installed how do you determine which formatter is running on your document?
For instance I have a couple of HTML extensions that may format HTML but I'm not sure which one is actually formatting, or if multiple are. I'm not even sure which extensions may be contributing to the formatting honestly. Recently auto formatting in HTML and CSS have changed how they're formatting in ways that I do not care for, and I would like to know which extension is doing this so I may be able to change configuration or disable the extension. Currently I have something like 80-90 extensions so going through one by one is a ridiculously timely process that I would like to stay away from if there is a programmatic way of determining this. It seems that extensions have to register with the formatting service so that they can do their auto formatting, but I'm not sure if there's a way to debug, hook, or view those.
Starting with the 1.33 release (March 2019), attempting to format a file for which there are multiple formatters registered results in a popup like this:
Note that the notification is "silent" if formatting happened implicitly via "format on save" or "format on paste", meaning that you need to click the bell in the lower right for it to show up:
The Configure... menu then lists all the formatters available for the current language. One of them can be selected as a default formatter for Format Document and Format Selection:
Picking for instance "Prettier" here results in this being added to the global settings.json:
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
There are also two new commands for formatting a file with a specific formatter, Format Document With... and Format Selection With.... This can be useful for formatting a specific file with a formatter that's not set as the default formatter. The former is also available from the context menu:
In addition to the answer given by Gama11
You can got to settings.json on below given path
C:\Users\<username>\AppData\Roaming\Code\User\settings.json
I am using "prettier" formatter for my html files,
also you can find the formatter been used for other extensions if configured.
Look at https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
ctrl-shift-p > search "open json"
Add
{
"editor.defaultFormatter": null,
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
}
The default-level formater mentioned in rofrol's answer will soon be better managed, from issue 126187
It should be deprecated and banished for the sanity of developers everywhere.
Few days ago I ventured off the path of JS/TS/CSS/HTML/JSON and thought I try VScode with something new, ReScript.
I installed the plugin https://marketplace.visualstudio.com/items?itemName=chenglou92.rescript-vscode
But the formatting didn’t work.
Tried the same with a python formatter plugin, same problem.
After a little investigation I found that I had this configured at the top level of my settings.json. It also has a nice GUI pulldown.
"editor.defaultFormatter": "esbenp.prettier-vscode",
And this was apparently overriding the ReScript and python plugins.
It might have been overriding ALL plugins, even for languages that prettier is not even registered to use, which is a diabolical thing to do.
After some googling I found that I could add this and fix my problem
"[rescript]": {
"editor.defaultFormatter": "chenglou92.rescript-vscode"
}
Or I could just set defaultFormatter back to null and let the plugins take over.
But I was wondering how many users have had this same problem? And how many plugins have to deal with this? And why did I think adding a defaultFormatter to the top level was a good idea?
Well, with VSCode 1.61 (Sept. 2021), this will now show a modal dialog.
The "Configure" action will make you configure a default formatter for that specific language, not for all languages.
See commit afc8ab1
I am using VS Code to write some CSS for an exercise. When I attempt certain Emmet shortcuts, for example many two letter ones like mt - margin-top, the IntelliSense prompt overrides Emmet. I could dismiss the prompt, but I'm trying to reduce keystrokes here.
Is there a way to disable IntelliSense for particular files or even files types? Or perhaps another solution I have not thought of?
I don't know if it's too late but I found the answer:
Put this in your settings.json:
"[css]": {
"editor.quickSuggestions": false
}
Normaly now, you wont get intelliSense suggestions in your .css files.
VSCODE seems to be inserting spaces everywhere in my html code. I checked the settings and it's the following which is causing it: "editor.formatOnSave": true
Example:
How do I configure this to stop inserting spaces?
I have the following set :
"editor.formatOnSave": false,
"editor.insertSpaces": false
Now it is not inserting spaces. Hope it helps
Mine was caused by an extension JS/ CSS formatter, after i uninstalled and restart vscode works great.
After spending hours wondering why my django static links are broken smh
When saving, Visual Studio inserted a lot of spaces. This happened after an update of Visual Studio. This problem was because of an extension called Bracket Pair Colorizer. What I did was, uninstall and reinstall, and that solved the problem. I suggest to check all your extensions. It could be one of them.
I disabled the option of HTML formatting and no more space when saving files.
Settings > Extensions > HTML > Format: Enable
Enable/disable default HTML formatter.
What was the case with me is that I had the option Editor: Format on save mode to be set to file, this in combination with format on save would mean VS Code will try to format the entire file, resulting in spaces as defined in the formatter.
Change this to be modifictions, and VS Code will only save the lines you have made changes in.