VSCode not auto closing parenthesis in JavaScript files - visual-studio-code

I am using VSCode for coding my projects but while it adds parenthesis and curly braces in other types of files it doesn't auto adds in js files or JSX files
see here:
https://i.stack.imgur.com/Okl3d.gif
I have researched for it and I found that I need to change the Editor: Auto closing Brackets settings and I have set it to languageDefined but still it is not auto-closing the parenthesis
https://i.stack.imgur.com/eLOtJ.png
Please answer how to fix that

Actually, this is an issue defined by an extension... are you, by any chance, using copilot?

Apparently this is a bug in VSCode 1.57.x: https://github.com/microsoft/vscode/issues/127739
For similar issues just search "auto closing" in the issues: https://github.com/microsoft/vscode/issues?q=auto+closing

go to settings and edit settings.json
"editor.autoClosingBrackets": "always",
"[javascript]": {
"editor.autoClosingBrackets": "languageDefined"
},

Related

How to disable dot emmet intellisense for JS files in VS Code

I want to use emmet in a Javascript file that contains JSX code but I don't want IntelliSense to suggest an emmet whenever I use the dot (.) operator.
For example, I don't want the .rap emmet suggestion to show up:
I tried these settings:
"emmet.showSuggestionsAsSnippets": true,
"editor.snippetSuggestions": "bottom",
However, I get another problem:
Replacing "editor.snippetSuggestions" from "bottom" to "inline" also doesn't help.
The way i use emmet is, I have set a hotkey for emmet exapansion as ctrl+e and use that to expand in js/ts files.
And set emmet's settings like that -
"emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly",
"emmet.triggerExpansionOnTab": true,
as, this will not show emmet abbreviation(intellisense) in other than css and html files, and thus don't clutter other intellisense in js and ts files.
Thanks.
To disable emmet (that 'dot snippet' in your screenshot is one of the things emmet does) in javascript/react files you could try adding this to your settings.json file:
"emmet.excludeLanguages": [
"javascriptreact",
"javascript"
]

How to fix jsdoc autocomplete not working in vscode

I have a project where my jsdoc autocomplete doesn't work in vscode.
Any ideas why or settings I can check to figure out why hitting enter doesn't automatically add a line with a *?
These are my enabled extensions:
I had the same issue on my Angular project. What I did is to add "editor.autoClosingBrackets": "languageDefined" per language like this:
"[javascript]": {
"editor.autoClosingBrackets": "languageDefined"
},
"[typescript]": {
"editor.autoClosingBrackets": "languageDefined"
}
This works for me but it's annoying though because you have to do it per language. But I think they're working on this. github
I also had the same issue, I got it fixed by setting the showWords to true
"editor.suggest.showWords": true
Kind of a bummer though, I really wanted to disable word suggestions but keep using the JSDoc, but for now I will just filter them out.
Hopefully, this will help someone having this issue.
For everyone who has the same problem.
I found this answer useful. It looks like VSCode is treating comments on the same way like Brackets.
editor.autoClosingBrackets
I had this configuration on "never" and changed it to "languageDefined".
For me the culprit was the GitHub Copilot extension, like mentioned in this answer.
In summary, disable the extension,
or
open settings (f1 -> Open Settings(JSON)) and add
"editor.autoClosingBrackets": "languageDefined",
"[javascript]": {
"editor.autoClosingBrackets": "languageDefined"
},
"[typescript]": {
"editor.autoClosingBrackets": "languageDefined"
},
and other languages you use I guess
In my case, it was the editor.autoIndent preference setting that was set to none. Setting it to advanced or full fixes the issue with jsdoc indent autocompletion on Enter.

VS code doesn't gray out unused variables

As far as I know it seems this is the setting you enter in your settings.json to enable unused variables & imports that aren't used to appear grayed out.
"editor.showUnused": true,
I do get an underline and if you hover I get an underline and message on hover.
What am I missing?
In my settings.json apparently I commented that the following did the trick.
"javascript.validate.enable": true,
/* this controls having your unused imports or variables to appear grey */
* builtin language features extension solution:
I am adding this just in case someone gets stuck like me. I had the same issue and the following was the problem.
vscode has #builtin extensions. One of them is typescript and javascript language features. If it is disabled the features will not work. So just go to extension and search #builtin typescript and javacsrtipt language feature`, click the cog icon and enable the extension.
September 2020
For me, adding "editor.showUnused": true, in settings.json in the .vscode directory worked.
In my case deno extension was causing the problem. disabling it seems to fix the issue.

VSCode scope line mark detection

I just trying to switch my editor from NetBeans to VSCode, however there is one feature which i missed from NetBeans and seem not exist at VSCode. I am not sure what is the name of the feature, i just call it "Scope mark line". The detail is like picture attached.
My question is, is there any plugins can bring that feature to VSCode? Please let me know if any, thanks in advance.
I also had a hard time searching for this feature, and found this VS Code Extension on the Marketplace: guides which adds various indentation guide lines. This worked for me editing ruby and bash files on osx.
Some of the tags for the extension:
guides indentation indentation guides ruler
From Default indent line guide in Visual Code?
Enable in settings.json:
"editor.renderIndentGuides": true

Visual Studio Code editor: Disable IntelliSense for CSS files?

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.