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
Related
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
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
// }
},
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.
We can use the "split editor" option to make two views into one file.
I'm looking for an option to open the same file in separated tabs like I can do in Sublime Text (open new view of file). Is that possible?
Note: I want to do this without splitting the view, so there should be two tabs for the same file within the same view container.
I couldn't find anything built-in that lets you do this, nor an existing extension in the marketplace. I thought it should be quite trivial to implement a "Duplicate Tab" command yourself in a custom extension, but it turns out VSCode only allows the same resource to be opened once within the same view column.
It's still possible to do this on Windows or macOS, but only by abusing this bug:
Issues with not case/fragment-normalizing file paths (macOS, Windows) #12448
Here's what the code for the extension looks like:
'use strict';
import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
vscode.commands.registerCommand("duplicateTab", () => {
var activeEditor = vscode.window.activeTextEditor;
if (activeEditor == null) {
return;
}
// HACK!
const sameFileNameButDifferent = activeEditor.document.fileName.toUpperCase();
vscode.workspace.openTextDocument(sameFileNameButDifferent).then(document => {
vscode.window.showTextDocument(document, {preview: false});
});
});
}
In package.json:
"contributes": {
"commands": [
{
"title": "Duplicate Tab",
"command": "duplicateTab"
}
]
},
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",
},