Prettier has just stopped working and is not formatting HTML in my VSCode.
In the output I get:
["ERROR" - 5:00:45 PM] Error formatting document.
["ERROR" - 5:00:45 PM] Unexpected closing tag "p". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (62:90)
Does anyone know what I can do to get working again?
Ive checked my various settings and not been able to see anything wrong.
I had the same problem and finally solved it.
I have in settings the default formatter as esbenp.prettier-vscode, then what I have done is in the html file, Ctrl+Shift+P --> preferences: configure language specific settings... then you search html and then you should have open the settings.json. in there I just pasted this
{
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"editor.formatOnType": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
}
}
and I don't know why but works
Related
I have tried putting this in my settings.json file-
{
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {"django-html": "html"},
"files.associations": {
"**/templates/*.html": "django-html",
"**/templates/*": "django-txt",
"**/requirements{/**,*}.{txt,in}": "pip-requirements",
"*.html": "html"
}}
But it makes no changes vs code still only reads Django and not html. I am unable to get closing tags or autocomplete for html. I have tried every solution available on the internet but none works. Although every time I uninstall the django extension from vs code it starts reading html code again. I have tried all methods available on the internet but none work, sometimes it only read html and sometimes only django. Please help
According to Django Extension (I suppose you are using this one), below Usage section the appropriate settings to set are:
"files.associations": {
"**/*.html": "html",
"**/templates/**/*.html": "django-html",
"**/templates/**/*": "django-txt",
"**/requirements{/**,*}.{txt,in}": "pip-requirements"
},
Note: Copy and replace the code above with yours (which I think is the cause to your problem).
If you wanna take advantage of emmet, you should add the line below to your settings.json:
"emmet.includeLanguages": {"django-html": "html"},
Note: I don't think setting "emmet.triggerExpansionOnTab" to true is doing anything in your case.
Besides, django-html documents doesn't seem to get formatted properly with prettier formatter, so I suggest using the settings bellow to format django-html using beautify:
"beautify.language": {
"html": [
"django-html"
]
},
I am using vscode for my django project and for templates to get help with Django Template Language, I installed the Django extension.
Now after installing this extension the intelliSense for html tags is not working anymore. So, now I have to write whole html tags and its getting troublesome.
Anyway to enable html intelliSense for django-html type files too?
my project settings.json file code
{
"python.languageServer": "Pylance",
"files.associations": {
"**/*.html": "html",
"**/templates/**/*.html": "django-html",
"**/templates/*": "django-html",
"**/templates/**/*": "django-txt",
"**/requirements{/**,*}.{txt,in}": "pip-requirements"
},
"emmet.includeLanguages": {
"django-html": "html"
},
"beautify.language": {
"html": [
"htm",
"html",
"django-html"
]
},
}
If I change 'django-html' to 'html' in above code then the html intellisense works but then the help for DTL does not work anymore.
I have set the 'django-html' to 'html' for emmet but still it does not work.
I still can't directly auto complete html tags in django-html file but putting
"emmet.includeLanguages": {
"django-html": "html"
},
before file association has made possible to use emmet abbreviations default for html. This works too for me.
Like now typing "li" and selecting from suggestions puts the complete tags there by automatically
I've installed Django support in Visual Studio Code and associated */templates/*.html with django-html as the extension demands.
However, it can't auto-compete HTML Tags as I've done so.
And if I just associate HTML with itself, then it can't intellisense Django Template code.
How can I autocompleting both?
I managed to do so by:
installing the Django extension
adding the following configuration to my workspace settings.json file:
"emmet.includeLanguages": {
"django-html": "html",
}
Here is essentially the same fix, but using the VS Code UI which may make it easier for some people - especially if your new to this and your settings.json file has not been generated yet.
In VS Code go to File -> Preferences -> Settings
Once there you can switch to the 'Workspace' tab if you want this setting to only be for this project/workspace, or stick with the 'User' tab if you want this on all projects/workspaces.
Open the 'Extensions' item in the list and click on 'Emmet'.
Under 'Include Languages' click the 'Add Item' button. Fill it in with:
Item: django-html
Value: html
and click the 'OK' button.
This will add the setting for you to your settings.json file, or generate you a new settings.json file if you don't have one.
Note: To get the autocomplete/generate to work you might need to type your tag without the brackets e.g. li (not <li>), then press enter to get <li></li>
As namespace_Pt said, I tried it and it works. I will list which extensions are in my Visual Studio Code installation.
Django 1.2.0
Visual Studio IntelliCode (I tried, and it works without this one)
"emmet.includeLanguages": {
"django-html": "html",
}
I added it, at the end of the settings.json file. I find the file from the settings's search bar. Just undo what Visual Studio Code added itself and add the code above. Don't forget to add a comma.
Where you find the .json file in settings
How it looks like after I added it
Follow the steps:
Install this as your extension: Django
Write the lines of codes in settings.json of your Visual Studio Code:
"emmet.includeLanguages": {
"django-html": "html",
}
How can I get settings.json?
Answer: The menu command File → Preferences → *Settings (Code → Preferences → Settings on Mac) provides entry to configure user and workspace settings. You are provided with a list of Default Settings. Copy any setting that you want to change to the appropriate settings. JSON file.
Works for me (vs 1.62.3) :
in file settings.json before:
"emmet.includeLanguages": {
"django-html": "html",
}
include:
{
"files.associations": {
"**/*.html": "html",
"**/templates/**/*.html": "django-html",
"**/templates/**/*": "django-txt",
"**/requirements{/**,*}.{txt,in}": "pip-requirements"
},
Total file look like:
{
"files.associations": {
"**/*.html": "html",
"**/templates/**/*.html": "django-html",
"**/templates/**/*": "django-txt",
"**/requirements{/**,*}.{txt,in}": "pip-requirements"
},
"files.autoSave": "afterDelay",
"emmet.includeLanguages": {"django-html": "html"},
}
I tried everything that was listed above but nothing worked for me.
Then after much hustle I found the solution.
In your VS Code Go to..
--> File --> preferences --> settings --> workspace(if you want this setting to just be this workspace specific or "user" if you want it for all) --> extensions --> emmet--> now click on Edit in settings.json --> now in that file under the curly braces that's already given, write or copy paste this ->
"emmet.triggerExpansionOnTab": true,
"files.associations": {"*html":"html"},
and press ctrl + s to save.
It worked for me!! I hope it will work for you too.!
This question already has answers here:
How to disable VS Code auto-rename-tag / HTML mirror feature?
(2 answers)
Closed 3 years ago.
I saw some similar questions but none of them solve my problem.
Whenever I edit an HTML tag, VS Code always selects what it thinks is the matching tag and edits it along with what I am typing. This is very annoying because it often changes the incorrect tags. I want to completely disable this. I do not want anything else in the file to be modified when I am changing an HTML tag. I have diabled HTML > Format and HTML: Auto Closing Tags but it still automatically changes other tags when I want to do it manually. Is there any other setting that will completely prevent any auto changes in HTML?
Settings
Incorrect tag being automatically selected and changed
settings.json
{
"telemetry.enableTelemetry": false,
"telemetry.enableCrashReporter": false,
"workbench.editor.enablePreview": false,
"python.formatting.formatOnSave": false,
"typescript.updateImportsOnFileMove.enabled": "always",
"workbench.tree.indent": 16,
"html.format.enable": false,
"typescript.autoClosingTags": false,
"javascript.autoClosingTags": false,
"html.autoClosingTags": false
}
The solution is to add the following setting:
"html.mirrorCursorOnMatchingTag": false
The setting documentation
I am currently using VSCode and am not experiencing these issues, it's strange that it's still doing it even after disabling the setting.
Can you please follow these instructions and post your settings.json file? (this is the underlying file that vscode uses to define it's settings)
Settings file locations (from https://code.visualstudio.com/docs/getstarted/settings)
By default VS Code shows the Settings editor, but you can still edit the underlying settings.json file by using the Open Settings (JSON) command or by changing your default settings editor with the workbench.settings.editor setting.
Depending on your platform, the user settings file is located here:
Windows %APPDATA%\Code\User\settings.json
macOS $HOME/Library/Application Support/Code/User/settings.json
Linux $HOME/.config/Code/User/settings.json
There should be a line similar to:
"html.autoClosingTags": true,
OR
"html.mirrorCursorOnMatchingTag": true,
If you change this to false it may fix the problem but if you show your config file we should be able to see if there is another issue.
So the problem is that prettier does not format html very well.
for instance if I have this angular template:
<some-component
some-attribute
[ang-binding1]='someExpr'
[ang-binding2]='someExpr'
(someEvent)='someFunc($event)'>
</some-component>
prettier will format it to something like this:
<some-component some-attribute [ang-binding1]='someExpr' [ang-binding2]='someExpr' (someEvent)='someFunc($event)'>
</some-component>
how do I disable prettier formating for html templates ?
If you are using VS Code, you can prevent Prettier from running on HTML (or other specific languages) by adding the following to your settings:
"prettier.disableLanguages": ["html"]
You can find other VS Code specific options at the prettier/prettier-vscode GitHub page.
If you use prettier with pre-commit hook (for example, with husky), changing the editor settings will not help you.
You need to add file .prettierignore with the following content:
*.html
File format is similar to .gitignore. You can read more here: https://prettier.io/docs/en/ignore.html
If you would like to retain vscodes html formatter for html files, but leverage prettier for other files you can set the following in settings.json.
"editor.formatOnSave": true,
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
}
As of March 2021, you can no longer disable HTML in the Prettier extension settings.
Now, you can either use a .prettierignore file or use VS Code's editor.defaultFormatter settings, as detailed in the Default Formatter section of the Prettier docs.
I was able to disable Prettier (and any formatter) in HTML files by going into settings.json and changing this:
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
to this:
"[html]": {
"editor.defaultFormatter": null
},
Or, you can use VS Code's default HTML formatting with this (my preferred option because forward slashes aren't added at the end of self-closing/void tags):
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
And in case you want to ignore a specific line to be formatted inside file you can do that via adding prettier-ignore before the code.
<!-- prettier-ignore -->
<div class="x" >hello world</div >
Complete documentation: https://prettier.io/docs/en/ignore.html
If you are using VSCode, click File > Preferences > Settings and add "html.format.enable": false,
html.format.enable will turn off the default VS Code formatter. To exclude all html files in a project from being formatted you can add a .prettierignore file to the project root and ignore all html files.
*.html
in addition to what was already written you can also disable formatting on save. then you would need to explicitly format the document via CMD/CTRL + P > Format document
"[html]": {
"editor.formatOnSave": true
},
Prettier's inline ignoring syntax
For HTML,
<!-- prettier-ignore -->
or for JSX,
{/* prettier-ignore */}
or for Javascript,
// prettier-ignore
or for CSS,
/* prettier-ignore */
Note: Not a direct answer to OP's question, but sometimes when one is looking to just ignore inline for specific lines, Prettier's comment syntax is quite helpful.
Adding more information to what above mentioned:
Press Ctrl + ,
Type "prettier"
Go to "Prettier: Disable Languages" option
Add "html" to it
You can try on your ./package.json:
"scripts": {
"format": "prettier --write .js src !**.html",
...
}
If you are using VSCode, click Command + P (for Mac) to open the command palette.
Then type:
> settings
The > lets you enter VSCode commands.
From the results you can select Preferences: Open Settings (JSON) and this will open the settings JSON file so you can configure the settings fully. The Settings UI offers limited options.
In the settings file, add:
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
}
That will use the VSCode formatter for html files instead of Prettier, without disabling Prettier for other files.