I have a question about the VSCode CSS/HTML suggestions. I would like it to work like in WebStorm.
First problem: when I type whole property name there are no suggestions.
But when I type di and select correct property and press tab/enter I have suggestions but in WebStorm it's always. Even if I press backspace and space again. In VSCode after backspace I cant see any suggestions any more.
Second problem: in HTML I don't see any suggestions (.css saved)
Extensions which I use:
IntelliSense for CSS, SCSS class names in HTML, Slim and SCSS, HTML CSS Support and SCSS IntelliSense
These are my user settings.
{
"explorer.confirmDragAndDrop": false,
"explorer.confirmDelete": false,
"workbench.iconTheme": "material-icon-theme",
"material-icon-theme.folders.theme": "specific",
"material-icon-theme.hidesExplorerArrows": false,
"material-icon-theme.folders.color": "#90a4ae",
"editor.formatOnSave": true,
"editor.wordWrap": "on",
"eslint.enable": false,
"git.autofetch": true,
"git.enableSmartCommit": true,
"files.autoSave": "off",
"workbench.editor.enablePreview": false,
"html-css-class-completion.enableEmmetSupport": true,
"trailing-spaces.trimOnSave": true,
"workbench.colorTheme": "Atom One Dark",
"php.validate.run": "onType",
"php.suggest.basic": true,
"editor.formatOnPaste": true,
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
"blade": "html",
"javascript": "javascriptreact"
},
"editor.tabCompletion": "on",
"editor.find.autoFindInSelection": true,
"editor.snippetSuggestions": "top"
}
I wonder if it's the fault of my configuration or the lack of any extensions or maybe I have too many of them (21).
Related
Deno format on save isn't working for me. Initially my .vscode/settings.json was this:
{
"deno.enable": true
}
Then based on this Stack Overflow question I tried this and it didn't work.
{
"deno.enable": true,
"editor.formatOnSave": true,
"editor.defaultFormatter": "denoland.vscode-deno"
}
I also tried this based on this comment in a GitHub issue and it didn't work.
{
"deno.enable": true,
"deno.lint": true,
"deno.unstable": false,
"editor.formatOnSave": true,
"[typescript]": { "editor.defaultFormatter": "denoland.vscode-deno" },
}
This is my ~/Library/Application Support/Code/User/settings.json.
{
"editor.minimap.enabled": false,
"editor.tabSize": 2,
"editor.fontSize": 14,
"eslint.validate": ["javascript", "typescript"],
"workbench.startupEditor": "none",
"workbench.colorTheme": "One Dark Pro Darker",
"atomKeymap.promptV3Features": true,
"editor.multiCursorModifier": "ctrlCmd",
"editor.formatOnPaste": true,
"terminal.explorerKind": "external",
"gitlens.currentLine.enabled": false,
"gitlens.hovers.currentLine.over": "line",
"gitlens.codeLens.enabled": false,
"gitlens.statusBar.enabled": false,
"gitlens.hovers.enabled": false,
"gitlens.blame.avatars": false,
"gitlens.blame.heatmap.enabled": false,
"gitlens.changes.locations": [
"gutter",
"overview"
],
"javascript.updateImportsOnFileMove.enabled": "always",
"editor.lightbulb.enabled": false,
"editor.scrollBeyondLastLine": false,
"breadcrumbs.enabled": false,
"security.workspace.trust.untrustedFiles": "open",
"explorer.confirmDragAndDrop": false,
"files.insertFinalNewline": true,
"typescript.updateImportsOnFileMove.enabled": "always",
"window.restoreWindows": "none",
"explorer.autoReveal": false,
"editor.formatOnSaveMode": "modifications",
"editor.formatOnSave": true
}
Commenting out "editor.formatOnSave" doesn't fix it.
The docs aren't very helpful and googling around hasn't been either.
I've tried quitting and re-opening VSCode before trying all of this.
Running deno fmt in the command line does work.
You have configured a user setting which is preventing formatting: "editor.formatOnSaveMode"
The description for the setting is this:
Controls if format on save formats the whole file or only modifications. Only applies when #editor.formatOnSave# is enabled.
The setting has three options as of VS Code v1.71.2:
"file": Format the whole file.
"modifications": Format modifications (requires source control).
"modificationsIfAvailable": Will attempt to format modifications only (requires source control). If source control can't be used, then the whole file will be formatted.
You have currently configured it to "modifications".
I guess that — in your Deno workspace — there is either no source control configured or the file(s) that you are saving are not eligible change candidates, so no formatting action occurs when you save the file(s).
In order to get the behavior that you want, you need to configure the following settings:
"editor.formatOnSave": Set to true (This is already configured in your user settings.)
"editor.formatOnSaveMode": Set to either "file" or "modificationsIfAvailable" (Because you configured this to "modifications" in your user settings, I'm guessing that the one you'll want is "modificationsIfAvailable", and you can either update your user setting or override this value in the workspace settings.)
"deno.enable": Set to true (This should be configured in the workspace.)
"editor.defaultFormatter": Set to "denoland.vscode-deno" (This should be configured in the workspace.)
If you just want something to copy + paste, use this for your workspace settings:
{
"deno.enable": true,
"editor.defaultFormatter": "denoland.vscode-deno"
"editor.formatOnSave": true,
"editor.formatOnSaveMode": "modificationsIfAvailable"
}
Install Deno extension: https://github.com/denoland/vscode_deno
Then on your .vscode/setting.json add the following settings
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.organizeImports": true
},
"editor.defaultFormatter": "denoland.vscode-deno",
"editor.formatOnSave": true,
"editor.formatOnPaste": false,
By doing a fresh install of vscode_deno the above should work without any further configuration.
The LiveServer in my VSCode is somehow not working correctly and stably, I have to manually refresh. I can say that I tried all the solutions I found, but I could not get a definite result. Below I am sharing the settings.json, I hope I can find a solution with your help.
{
"typescript.validate.enable": false,
"javascript.validate.enable": false,
"workbench.colorTheme": "One Dark Pro",
"liveServer.settings.donotVerifyTags": true,
"liveServer.settings.donotShowInfoMsg": true,
"editor.wordWrap": "on",
"files.exclude": {
"**/.git": false
},
"liveServer.settings.ChromeDebuggingAttachment": false,
"liveServer.settings.useWebExt": false,
"liveServer.settings.CustomBrowser": "chrome",
"liveServer.settings.port": 0,
"window.zoomLevel": 0,
"workbench.startupEditor": "none",
"emmet.useInlineCompletions": true,
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"[css]": {
"editor.defaultFormatter": "vscode.css-language-features"
},
"workbench.iconTheme": "vscode-icons",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
}
Besides this problem, I also started getting Uncaught Error in Console, it doesn't block the stream, but it's annoying to just sit there. The error I get is as follows:
Uncaught (in promise) Error: "undefined" is not valid JSON
at A (content.js:1:9544)
Even if this 2nd problem is not solved, I will be very happy if I can find a solution for LiveServer.
It could be caused by a browser plugin cause. I had this problem too, but after uninstall this plugin, it was fixed:
I've installed prettier in my code but it is not working in my javascript and CSS. I've also set the default formatter to prettier. but nothing happened. please tell me what's going on
try adding this in settings.json
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
Here is what I did :
Search for 'Prettier Path' in settings > select 'Edit in settings.json' and add the following config :
{
"editor.minimap.enabled": false,
"editor.fontSize": 12,
"editor.formatOnSave": true,
"editor.tabSize": 2,
"liveServer.settings.donotShowInfoMsg": true,
"editor.wordWrap": "on",
"emmet.triggerExpansionOnTab": true,
"emmet.showSuggestionsAsSnippets": true,
"editor.snippetSuggestions": "top",
"[javascript]": {
// "editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.formatOnPaste": true
},
"workbench.colorTheme": "Monokai",
"window.zoomLevel": 0,
"editor.columnSelection": false,
"explorer.compactFolders": false,
"typescript.updateImportsOnFileMove.enabled": "always",
"javascript.updateImportsOnFileMove.enabled": "always",
"liveServer.settings.donotVerifyTags": true,
"prettier.prettierPath": "/usr/local/lib/node_modules/prettier"
}
Make sure prettier is installed at the given path : "prettier.prettierPath": "/usr/local/lib/node_modules/prettier"
You can make prettier the default also by uncommenting the code : "editor.defaultFormatter": "esbenp.prettier-vscode"
It has my custom settings of visuals, so review those and then set, for beginners try pasting as-is!
I have simple project, just a few html and js files. Installed ESLint extension to VS code and set ESLint to be a default formater:
also, this setting is turned to all
And here is my settings.json file:
"window.zoomLevel": 1,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": ["javascript"],
"git.enableSmartCommit": true,
"eslint.alwaysShowStatus": true,
"files.autoSave": "off",
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"editor.formatOnType": true,
"git.ignoreWindowsGit27Warning": true,
"eslint.options": {
"eslint brace-style": [
"error",
"allman",
{
"allowSingleLine": true
}
]
},
"eslint.codeAction.showDocumentation": {
"enable": true
},
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"eslint.format.enable": true
}
When pressing save ESLint does not work on my js file (no brackets, spacing, etc. is corrected). I used ESLint before in React application, so it worked a year ago.
I have found an answer to my own question :)
I got a notification later on that
ESLint is disabled since its execution has not been approved or denied yet. Use the light bulb menu to open the approval dialog.eslint
So I pressed here:
on ESLint and allowed this extension to do its job.
I've disabled every setting that appears to cause the suggestions and tool tips similar to the one below:
screenshot of the tool-tip
Here is a my settings.json:
{
"editor.acceptSuggestionOnCommitCharacter": false,
"editor.fontSize": 24,
"editor.hover.enabled": false,
"editor.hover.sticky": false,
"editor.quickSuggestions": {
"other": false,
"comments": false,
"strings": false
},
"editor.quickSuggestionsDelay": 10,
"editor.snippetSuggestions": "none",
"editor.suggestOnTriggerCharacters": false,
"editor.acceptSuggestionOnEnter": "off",
"editor.wordWrap": "on", "editor.hover.enabled": false,
"editor.parameterHints": false,
"editor.acceptSuggestionOnCommitCharacter": false,
"editor.wordBasedSuggestions": false
}
Is there any other setting that would stop these suggestions/tool-tips?
Here is another screenshot showing similar pop-up even after adding code suggested by P.W
You should add one more option in your settings.json file.
"editor.suggest.snippetsPreventQuickSuggestions": false,
Put it somewhere after
"editor.parameterHints.enabled": false,
And see if it works.