The Intellisense window in VSCode is popping up suggestions without highlighting anything in the pop-up. Sometimes the suggestion window just pops up for a split second and closes itself immediately, also. This just started happening today as far as I've noticed. I can't select any of the suggestions unless I click on them. Tab closes the suggestion window and inserts a tab into my code. Enter also closes the suggestion window and inserts a newline into my code. The arrow keys also close the suggestion then move my cursor around in my code. If I hit ctrl+space while the suggestion window is showing or to trigger the suggestion window, the normal highlight shows in the suggestion window, tab or enter will insert the suggestion, and I can use arrow keys to move the highlighted suggestion like I'd expect.
Intellisense suggestions not highlighted
This is happening in an html file if I add an attribute and then an equal sign which auto-adds quotation marks which should contain a value e.g. type="". As soon as I press the equal key, it adds the quotation marks and the suggestion window flashes and closes. If I then start typing something between those quotation marks, an option displays in the intellisense suggestion window pop-up, but it can't be selected without clicking on it or hitting ctrl+space. This isn't the only time it happens, just an example. It also seems to be happening more frequently over time.
I tried disabling all extensions and re-installing VSCode but the behavior persists.
As asked by a commenter:
settings.json pasted below.
I tried removing everything and just leaving "{}" in settings.json. I also tried just removing the line that says - "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue", - This made no difference.
OS is Windows 10 with all updates installed.
VS Code version:
Version: 1.75.1 (user setup)
Commit: 441438abd1ac652551dbe4d408dfcec8a499b8bf
Date: 2023-02-08T21:32:34.589Z
Electron: 19.1.9
Chromium: 102.0.5005.194
Node.js: 16.14.2
V8: 10.2.154.23-electron.0
OS: Windows_NT x64 10.0.19044
Sandboxed: No
I tried uninstalling all of my extensions. This made no difference.
settings.json:
{
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"liveServer.settings.donotShowInfoMsg": true,
"git.enableSmartCommit": true,
"terminal.integrated.defaultProfile.windows": "Command Prompt",
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.linkedEditing": true,
"workbench.iconTheme": "material-icon-theme",
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"workbench.colorCustomizations": {
"titleBar.activeBackground": "#000000",
"titleBar.border": "#646464",
"activityBar.background": "#000000",
"menu.background": "#000000",
"editor.background": "#000000",
"sideBar.background": "#000000",
"peekViewEditor.background": "#111111",
"peekView.border": "#646464",
"peekViewTitle.background": "#272727"
},
"editor.semanticHighlighting.enabled": true,
"editor.wordWrap": "on",
"html.format.wrapAttributes": "force-aligned",
"editor.bracketPairColorization.enabled": true,
"typescript.updateImportsOnFileMove.enabled": "always",
"javascript.updateImportsOnFileMove.enabled": "always",
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.suggest.preview": true,
"editor.tabCompletion": "on",
"typescript.experimental.tsserver.web.enableProjectWideIntellisense": true
}
So, I'm using VS Code with an extension called Prettier. The problem is that after I hit save my code is being "refined" but also separated into 2 lines even despite the fact it's a very short line and I still have plenty of space on the right. Could you please advice what setting is responsible for this conversion? It seems to me that I have checked all available options but unfortunately couldn't find anything which causes it.
"prettier.printWidth": "80"
in your settings.json or search for print width setting in the UI
Increase or decrease this setting. This limits the number of characters prettier limits a line to, it it exceeds this, it will try to break it into smaller ones.
Search for settings.json in visual studio.
You will find a json file in this path AppData\Roaming\Code\User\settings.json if it is a windows machine.
Add the below JSON in the file, If you keep "editor.formatOnSave" as false formatting won't happen when you save the file.
If you want to have this setting just make a specific property as false just the way I did for javascript and HTML in the below section.
"editor.formatOnSave": false,
"[handlebars]": {
"editor.formatOnSave": true
},
"[javascript]": {
"editor.formatOnSave": false
},
"[html]": {
"editor.formatOnSave": false
},
"[less]": {
"editor.formatOnSave": true
},
Prettier extension on my VS code is unable to format HTML.
On load of VS code I am getting this error in my console -
On trying to format, I see this message in the bottom -
Note - TS files and SCSS files are being formatted properly. It is breaking only for HTML files.
Below is my HTML language based settings -
{
"tslint.rulesDirectory": "./node_modules/codelyzer",
"typescript.tsdk": "node_modules/typescript/lib",
"window.zoomLevel": 0,
"editor.formatOnSave": true,
"prettier.singleQuote": true,
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"files.associations": {
"*.html": "html"
}
}
These are the extensions installed and enabled -
Prettier version - 2.2.2
VS Code version (from About VS code section) :
Version: 1.38.1
Commit: b37e54c98e1a74ba89e03073e5a3761284e3ffb0
Date: 2019-09-11T13:31:32.854Z
Electron: 4.2.10
Chrome: 69.0.3497.128
Node.js: 10.11.0
V8: 6.9.427.31-electron.0
OS: Darwin x64 17.7.0
Please let me know how to get this issue fixed. Please leave a comment if any more info is needed. Thanks.
Same for me. I managed to solve it as follow:
{
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"editor.formatOnType": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
}
}
This allowed me to use prettier globally and use built in html formatter for html.
Also allowed the formatting to happen on save and while typing.
The part responsible for Prettier formatting html
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
I got the same issue, the cause can be updating the VS Code.
fixed it by setting the Default Formatter of Text Editor
Go to Settings (Ctrl+, for windows), search for 'Default Formatter'
Set the formatter in dropdown (esbenp.prettier-vscode) for prettier. this can change if you are using any other formatter.
Short Answer:
open Prettier from the button on right bottom corner
scroll up to see error list.
fix the wrong semantic you wrote.
ex:
photo for error example
Long Answer:
Most of the times the reason why Prettier doesn't work is that you have a markup error.
ex: you haven't close the angle braces or you close the tag more that one time
to know the error and fix it : look at short answer.
Firstly, you may want to solve the compilation error you have in regards to Vue.js. You may need to grab some extensions for VS-code as detailed here.
I have heard that Prettier has some issues formatting HTML at times, and VS Code itself already has HTML formatting support. You can stop prettier from formatting HTML specifically using the following command:
"prettier.disableLanguages": ["html"]
You could also change this line in your configs to enable VS code html language support instead.
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
}
Hope that helps!
For me i found that prettier was refusing to format files, however there was no errors in the output window in vs code. usually this happens when the html is not valid: missing tags, or tags closed twice, or tags that are not closed.
To see the errors, i ran prettier from the command line, and for each file it refused to format, it showed an error of what was wrong, like in the image below:
Had this problem crop up today after working fine with HTML previously.
Tried editing default formatter, format on save, reloading prettier etc.
Eventually tried the solution proposed above
edit settings.json
make sure "[html]": has default formatter line set to the below, found it on line 40.
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
Disabling "editor.formatOnSaveMode": "modifications" fixed the issue for me in Angular's .component.html files.
I had a lot of problems with getting Prettier to format on save. It turned out to be an issue with the default timeout settings in VSCode. Using these settings finally worked for me:
{
...
"editor.codeActionsOnSaveTimeout": 100000,
"editor.formatOnSaveTimeout": 100000,
...
}
For reference, here are all my settings concerning linting and formatting:
{
"editor.codeActionsOnSave": { "source.fixAll": true },
"editor.codeActionsOnSaveTimeout": 100000,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.formatOnSaveTimeout": 100000,
"editor.formatOnType": true,
"eslint.alwaysShowStatus": true,
"eslint.enable": true,
"html.format.enable": false,
"htmlhint.enable": true,
"prettier.requireConfig": false,
"prettier.useEditorConfig": true,
"stylelint.autoFixOnSave": true,
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
}
I use the following extensions (again limited to linting/formatting):
ESLint (dbaeumer.vscode-eslint)
Prettier (esbenp.prettier-vscode)
stylelint-plus (hex-ci.stylelint-plus)
HTMLHint (mkaufman.htmlhint)
You might want to make sure that all the npm packages needed by your extensions are installed. Locally if possible.
I sincerely hope this helps. Setting up linters and formatters is still a science in its own right.
P.S. I get an error like your 'cannot format' message whenever I try to format a file that is not inside the working directory. But looking at the path in your message suggests that this is not an issue in your case.
If the formatting fails, see if there are any errors in the Prettier console.
If not, use the following settings:
"[html]": {
// "editor.defaultFormatter": "esbenp.prettier-vscode"
"editor.defaultFormatter": "vscode.html-language-features"
},
Once the file has been formatted, put back the original settings:
"[html]": {
// "editor.defaultFormatter": "esbenp.prettier-vscode"
"editor.defaultFormatter": "vscode.html-language-features"
},
And try formatting again. This time Prettier will have better input to work with.
The requirePragma option should be false (it is by default) in .prettierrc or VS code prettier settings (dotfile overrides VS).
I simply solved it by right-clicking in the file, select 'Format Document with' and choose 'prettier'. I don't know how to permanently set it up but it's a quick workaround.
This is what worked for me.
In the settings.json, capitalize the h in [html]:
...
"[Html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
...
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
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSaveMode": "file"
},
Format selection works on several languages depending on what Prettier itself supports. The following languages currently are supported:
javascript
javascriptreact
typescript
typescriptreact
json
graphql
I just changed the default formatter for HTML to VScode's HTML formatter.
Open the command palette with Ctrl + Shift + P (or use ⌘ + Shift + P for Mac).
To open the user settings.json file search for and select the Open User Settings (JSON) option.
Make the following changes.
// "[html]": {
// "editor.defaultFormatter": "esbenp.prettier-vscode"
// },
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
Adding this to the bottom of my VSCode User settings did the job for me:
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
I have found Prettier to be annoying sometimes with HTML. Hence in my case this worked for me for HTML formatting-
user json file settings as follows-
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "lonefy.vscode-JS-CSS-HTML-formatter"
},
For HTML I use JS-CSS-HTML Formatter extension in VSCode as the default formatter (as you can see in code above). This formats the HTML code well.
I had the same issue and fixed it by navigating to the settings (ctrl + shift + ,)
type in the search default format
then check HTML -> format: enable box
For me, I had to check the notifications in the bottom right corner. Once I clicked on it, you can configure which formatter to use. For some reason, there are more than one editor. I'm gonna go on a limp and assume that it's conflicting somehow with the editors global config file.
To open the command palette, you can use COMMAND + SHIFT + P on macOS or CTRL + SHIFT + P on Windows.
In the command palette, search for format and then choose Format Document.
You may then be prompted to choose which format to use. To do so, click the Configure button. Then choose Prettier - Code Formatter or another prettier code formatter.
Your code is now formatted with spacing, line wrapping, and consistent quotes.
Simple and easy way to make it work.
Steps:
Open VSCode, go to Settings (Ctrl+, for windows), search for Default Formatter
Set the formatter in dropdown (esbenp.prettier-vscode) for prettier. this can change if you are using any other formatter.
Extra step, if you want to use it on the save file. Just search for Format on save, then check that it is TRUE
Restart your VSCode, and Happy coding. 🤗👏
One of my peers installed the following into the workspace vscode:
"prettier.disableLanguages": ["html"],
That would do it.
Use This as your config
"prettier.singleQuote": true,
"prettier.useEditorConfig": false,
"prettier.useTabs": true,
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
"[Html]": {
//"editor.defaultFormatter": "vscode.html-language-features"
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
this work for me
Try restarting VS Code
I've had Prettier stop formatting things when VS Code prompted me to restart to update. Closing and opening VS Code got it working again.