Is there a way to enable intellisense autocomplete in quotes without using key binding (Ctrl + Space) in Visual Studio Code - autocomplete

I want to develop an extension for Visual Studio Code.
I'v registered a CompletionItemProvider for typescript, when I'm trying to write in quotes the auto completion does not work.
For example I have this code:
function buildProvider(language : vscode.DocumentSelector, label : string, text : string | vscode.CompletionItemLabel){
return vscode.languages.registerCompletionItemProvider('typescript', {
provideCompletionItems(document: vscode.TextDocument, position: vscode.Position, token: vscode.CancellationToken, context: vscode.CompletionContext) {
const simpleCompletion = new vscode.CompletionItem('', vscode.CompletionItemKind.Text);
simpleCompletion.label = label;
simpleCompletion.insertText = text.toString();
return [
simpleCompletion,
];
}
});
}
If I write in typescript the auto completion work:
Auto completion works
If I write in quotes it doesn't work without using Ctrl + Space.
Auto completion does not works
What can I do to enable the auto completion in quotes?

That behaviour, not working in strings, is probably a result of the setting:
editor.quickSuggestions.
Try setting it like this:
"editor.quickSuggestions": {
"other": true,
"comments": false,
"strings": true // this is the key setting, default is false3
}
That will fix it for you or anyone with the same "strings": true setting.
You can change a user's default settings in an extension like this in your `package.json - beware they may not like you changing their settings!!:
> #### Configuration Defaults Overrides
>
>
> You can now override defaults of other registered configurations
> through `configurationDefaults` contribution point in `package.json`.
> For example, the following snippet overrides the default behavior of
> `files.autoSave` setting to auto save files on focus change.
```jsonc
"contributes": {
"configurationDefaults": { // applies to all languages
"files.autoSave": "onFocusChange"
}
}
Note: Configurations with application or machine scopes cannot be
overridden.
From https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_63.md#configuration-defaults-overrides

Related

VS Code emmet isn't working properly in jsx files

When I try to call a built-in function on an object or use autocomplete it only recommends html elements, but when used in a function it doesn't seem to work at all
const renderUsers = data.map // returns <data className="map">|</data>
function renderUsers() {
return data.map //doesn't show anything
}
instead of
data.map()
I remember using it when I started out with react. Is this intended or this just isn't even a thing? Am I missing something?
Here are my emmet settings from my json.
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
"emmet.syntaxProfiles": {
"javascript": "jsx"
},
"emmet.excludeLanguages": ["markdown"],
I looked up emmet settings for jsx but haven't been lucky. Also disabled all my extensions but still didn't work

How make Veture extension in VS code format .vue file so that html attributes are preserved on a single line?

I am using VS Code and Veture extension when writing .vue files.
Currently the formatter automatically places all html attributes on a new line. Like so
<v-item-group
class="shopCategoriesImageGroup"
multiple
v-for="(item, index) in getProductCategoryIcons"
:key="index"
>
I would like to keep them on one line. Desired result:
<v-item-group class="shopCategoriesImageGroup" multiple v-for="(item, index) in getProductCategoryIcons":key="index" >
From VS Code setting panel Veture has these formatting options:
none
prettyhtml
js-beutify-html
prettier
Following the docs:
https://vuejs.github.io/vetur/formatting.html
I tried using prettier, configured html whitespacing, no luck there. These does not seem to be a configuration option that allows for html attribute preservation on a single line.
The desired effect appears only if I use none as a formatter. But that requires me to manually format the code.
Any idea what configuration options I should set so that the code formats on a single line automatically on save ?
Or should I try another extension ?
Solved It !!!
You have to set the print width property to a bigger number. Like this:
"vetur.format.defaultFormatterOptions": {
"prettyhtml": {
"printWidth": 250, // No line exceeds 250 characters
}
}
Found the information here: https://github.com/vuejs/vetur/issues/114 thanks to Phill's comment.
UPDATED
VETUR changed default html formatter to "prettier", it says in documentation...
// settings.json from vscode
"vetur.format.defaultFormatterOptions": {
"prettier": {
"printWidth": 120
}
// "prettyhtml": {
// "printWidth": "80",
// "wrapAttributes": true,
// "sortAttributes": true
// }
},

Disable intellisense for css classnames in .tsx/.ts files

Whenever I enter a . after a object the autocomplete dropdown contains a lot of unnecessary css classnames as options:
Is it possible to ignore css files for ts/tsx intellisense, so i only get relevant options?
VS Code version: 1.37.1
"[typescript]": {
"editor.suggest.showClasses": false
},
"[typescriptreact]": {
"editor.suggest.showClasses": false
}
Basically the same as Mark's answer but it looks like "editor.suggest.filteredTypes" has been deprecated since VSCode >= 1.40 in favor of settings like "editor.suggest.showClasses".
Try something like this in your settings:
"[typescript]": {
"editor.suggest.filteredTypes": {
"class": false,
}
},
"[typescriptreact]": {
"editor.suggest.filteredTypes": {
"class": false,
}
}
[it would be nice if you could combine these but [typescript, typescriptreact] didn't work for me.
From types of completions it looks like it is class that you want to filter out.
And see create language-specific settings to see how to create settings for specific languages.
You will have to reload vscode to see these changes take effect.

How to format Blazor code correctly in VS code? [duplicate]

Anyone have a good solution for formatting Razor files inside of VSCode? I've tried making it work with prettify-vscode and beautify. But in both cases it can't tell that cshtml files. I don't want to change my razor to html as I'll lose a lot of the razor-ness.
You can introduce them as HTML files (File -> Preferences -> Settings) without any 3rd party extensions:
{
"editor.formatOnSave": true,
"emmet.includeLanguages": {
"aspnetcorerazor": "html"
},
"files.associations": {
"*.cshtml": "html"
}
}
Update: v1.17.0 of C# for Visual Studio Code add-on added preview Razor (cshtml) language service with support for C# completions and diagnostics.
There is an extension that we can switch between Language Modes by shortcuts quickly: changeLanguageMode.change
I use these shortcuts for js, html, and cshtml:
{
"key":"ctrl+k j",
"command":"changeLanguageMode.change",
"args": {
"languageId":"javascript"
}
},
{
"key":"ctrl+k h",
"command":"changeLanguageMode.change",
"args": {
"languageId":"html"
}
},
{
"key":"ctrl+k k",
"command":"changeLanguageMode.change",
"args": {
"languageId":"aspnetcorerazor"
}
}
To open keybindings.json and add these shortcuts:
open up the control palette with CTRL +SHIFT + P and select Preferences: Open Keyboard Shortcuts File.
Then use Ctrl + K, Ctrl + F to Format Selection only.
Firstly: open file setting.json, which is in .vscode folder, then add next block:
{
"editor.formatOnSave": true,
"emmet.includeLanguages": {
"razor": "html"
},
"files.associations": {
"*.cshtml": "html"
}
Sometimes is necessary restart vscode
Finally: in the file to format Ctrl + k , Ctrl + f

How can I set up VSCode to put curly braces on the same line?

By default this
{path: '/post/:postId', component: Post},
are converting to this
{
path: '/post/:postId',
component: Post
},
How can I disable this behavior?
UPD. I am coding in JavaScript, last time in vuejs with vetur plugin
UPD2. Code expample.
// before
export default new Router({
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/todo', component: Todo },
]
})
// after formatting (curly braces are moved on new line)
export default new Router({
routes: [{
path: '/',
component: Home
},
{
path: '/about',
component: About
},
{
path: '/todo',
component: Todo
},
]
})
UPD 3. Maybe Prettier will be useful to solve this task?
UPD 4. In my case, the problem was in the additional plugin for formatting. Beautify was installed as the default option for formatting and all settings for vscode formatter was not working.
The solution is set vscode formatter or prettier by default.
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
},
Thanks all. Especially for maven87.
The settings you are looking for are:
{
// Defines whether an open brace is put onto a new line for control blocks or not.
"javascript.format.placeOpenBraceOnNewLineForControlBlocks": false,
// Defines whether an open brace is put onto a new line for functions or not.
"javascript.format.placeOpenBraceOnNewLineForFunctions": false
}
Please refer to the User and Workspace Settings article. It covers similar settings for other languages too.
If that doesn't provide enough control you may also choose to use Beautify
and specify a .jsbeautifyrc
with a setting for brace style as follows:
{
"js": {
"brace_style": "collapse,preserve-inline"
}
}
Please refer to this to see all possible values.
UPDATE
It was pointed out that there is another degree of control where if you would like to change the formatter completely, you do so by installing the correct VS Code plugin and then configuring the appropriate formatter (see User and Workspace Settings article). For example:
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
}
In this case the formatter being used is Prettier - Code formatter
In VS Code go to settings:
"File->Preferences->Settings"
In settings search "curly".
It will search below settings, unckeck them and verify if it works as expected.
enter image description here
In my case, the problem was in the additional plugin for formatting. Beautify was installed as the default option for formatting and all settings for vscode formatter was not working.
The solution is set vscode formatter or prettier by default.
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
},