How to autocomplete tag.className in Visual Studio Code like Sublime Text - visual-studio-code

In sublime Text 2 writing div.panel then press tab, or the auto complete trigger, in the HTML document produces <div class="panel"></div>
I have tried to get the same result in Visual Studio Code version 1.17.1 but I could not able to get it.
I am using the following plugins:
Auto Close Tag
HTML CSS Support
HTML Snippets

settings.json Ctrl+,
"emmet.triggerExpansionOnTab": true,
"emmet.showSuggestionsAsSnippets": true,
"editor.snippetSuggestions": "top"

In the latest version of vs code, you need to go in seetings using Ctrl+, key and search for Emmet.
Tick the checkbox of Emmet: Show Suggestions As Snippets and Emmet: Triger Expansion On Tab and you will be able to use Emmet functionalities.

Add it at setting.json
"emmet.includeLanguages": {
"javascript": "javascriptreact"}
Do not forget to ADD A COMMA at the end of the closing bracket above this code.

Related

How to disable or make less visible the wavy underlines in VS Code? [duplicate]

I'm using Visual Studio Code (v1.11.2).
Is there any way to disable wavy underline at all?
To disable wavy/squiggly underline in vscode, go to preferences and set underline color to fully transparent:
{
"workbench.colorCustomizations": {
"editorError.foreground": "#00000000",
"editorWarning.foreground": "#00000000",
"editorInfo.foreground": "#00000000"
}
}
Though it may be better to make underline color just less vibrant:
{
"workbench.colorCustomizations": {
"editorError.foreground": "#ff000088",
"editorWarning.foreground": "#ffe60033",
"editorInfo.foreground": "#00ff0088"
}
}
In VSCode, those green squiggly lines mean a warning in your code.
VSCode performs background code analysis(Linting) in order to provide you feedback about syntax and compilation errors.
In your particular case it is caused because of an empty CSS ruleset (declaring a selector but no properties).
You can see the warning message by hovering mouse pointer over code with the green squiggly line underneath.
You can disable the wavyline by disabling linting for CSS.
Go to File --> Preferences --> Settings and then place following line in Settings.json
"css.validate": false
Alternatively you can also change default behavior of empty ruleset which is "css.lint.emptyRules": "warning" to ignore
There are also options to disable validating HTML and JavaScript code.
VSC Version: 1.45.1
Solution: Disable "JavaScript ESLint Enable" for JavaScript files.
Open Command Palette by 'Ctrl+Shift+P'.
From Command Palette find and click: 'Preferences: Open Workspace Settings'.
From 'Workspace Settings' into search field type 'javascript'. From left sidebar look for Extensions -> ESLint.
Click 'ESLint' and from right look for 'ESLint: Enable'.
Uncheck 'ESLint Enable'.
When using Python, the common advice is to use shift-ctrl/cmd-P, then set Python: Enable/Disable Linting > Disable and Python: Select Linter > Disable Linting. Neither of those was enough for me. Nor was I able to disable these by turning off the dozen or so linters listed under Settings > search > linting.
However, I was finally able to disable the wavy red underlines via Settings > Python: Language Server > None.
By the way, you can see where these underlines are coming from via View > Problems. In my case, they were coming from PyLance, and after I removed that extension, they came from Jedi instead. Even though I don't have the Jedi installed. It seems like Microsoft's own Python extension has Jedi somewhere inside and uses that unless you turn off the Language Server entirely.
Scenario: VScode 1.35.1 with installed extension "StandardJS - JavaScript Standard Style".
The extension in javascript files: underlines some code, checks for indent spaces, etc.
How to stop javascript code style validation ?
Solution: Disable "JavaScript Standard Style" for JavaScript files.
Open Command Palette by 'Ctrl+Shift+P'.
From Command Palette find and click: 'Preferences: Open Workspace Settings'.
From 'Workspace Settings' into search field type 'javascript'. From left sidebar look for Extensions -> JavaScript Standard Style.
Click 'JavaScript Standard Style' and from right look for 'Standard: Enable'.
Uncheck 'Standard Enable'.
with the extension When File you can make the squiggles transparent when the file is dirty.
Add this to your settings.json file (global or workspace/folder)
"whenFile.change": {
"whenDirty": {
"editorError.foreground": "#ff000020",
"editorWarning.foreground": "#ff000020",
"editorInfo.foreground": "#ff000020"
}
}
If you are using Ruby and those are the files that you want to disable the warnings for, open the preferences file settings.json and modify the ruby linting rules as follows:
"ruby.lint":
{
"rubocop": false
},
If in dart in the flutter project, blue wavy lines are coming all over the code in the dart file, then make sure that you have saved the file with a name that contains lowercase and underscore characters only.
Right Click in your editor window and select for 'Command Pallet' option
OR press CTRL+SHIFT+P and search for the option 'Enable Error Squiggle' and just click on it. That's it! If you want to Disable Red Wavy underlines showed after syntax error, just Follow the above procedure and search for 'Disable Error Squiggle' and click on it.
Disable wavy underline in VS Code in C on mac
Press command+shift+p (open command pallete)
Then type Disable Error Squiggles
And click on that Disable Error Squiggles
Your squiggles are no more
If you want to restart squiggles for some reason
then in command pallete type Enable Error Squiggles

How do I prevent autocomplete on spacebar in Visual Studio Code (VS Code)?

In Visual Studio Code when a highlighted quick suggestion appears, if I press SPACE, the suggestion is accepted and auto-completed.
How do I disable this feature so autocomplete only occurs on TAB and ENTER (the other default completion keybinds as of 2022.7.16)?
Add the following line to your VS Code settings JSON file.
"editor.acceptSuggestionOnCommitCharacter": false
Sourced from a similiar question about Visual Studio - source answer.

Visual Studio Code search only selected lines

Trying to figure out how to only search text within selected lines in visual studio code (version 1.17.2). I see lots of other options but not this which surely must be there.
Suggestions appreciated.
settings.json Ctrl+,
"editor.find.autoFindInSelection": "multiline" | "always"
Select text
Search will look in the selected text

Make the code folding icons always show in Visual Studio Code

Loving using Visual Studio Code but one peeve is that I always think my code isn't indented properly since the left edge of the actual editor is kind of far from the numbers.
Is there any way to show the code folding +/- icons by default? It only shows them if you hover over the gutter.
As an aside, if there is a way to change the color of the gutter so it looks distinct from the editor?
To change the color of the gutter, you can add following to the user settings:
"workbench.colorCustomizations": {
"editorGutter.background": "#abcdef"
}
And to show folding icons:
"editor.showFoldingControls": "always"
Note that this setting requires you to have at least 1.13.
You cannot make code folding icons appear persistently. It is discussed here on project github page however it is not implemented yet.
If you want proper indentation your best bet is indentation guides (the vertical lines that run down to matching indents).
Indentation guides are not displayed by default.To enable indent guides go to File --> Preferences --> Settings and then place following line in settings.json file,
"editor.renderIndentGuides": true
you can make code folding icons appear persistently by addding :
"editor.showFoldingControls": "always",
but not in the "workbench.colorCustomizations", just put it outside and it will work.
example:
"editor.showFoldingControls": "always",
"workbench.colorCustomizations": {
"editor.renderIndentGuides": true,
"scrollbarSlider.background": "#474552",
"scrollbarSlider.hoverBackground": "#295377",
},
and since the [+][-] icons were replaced with [>][v], you can use this extension to regain this feature: Minimalist Product Icon Theme
I know this is an old thread, but FWIW:
File > Preferences > Settings
User > Text Editor > Editor: Show Folding Controls
Select "Always"

Disable syntax highlighter visual studio code

I love Visual Studio Code, but I can't seem to figure out how to disable this syntax highlight popup:
http://imgur.com/a/cDvAe
I feel like I've disabled everything in the settings for editor. Is there a special setting to disable the syntax popup from just showing up??
The following did the trick for me:
"editor.parameterHints": false,