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.
Related
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
I'm using Visual Studio Code for my project. Sometimes I need to work on different git branches simultaneously, therefore I'll have multiple project copies in different folders with different branches, and open VS Code in each folder.
However, it bothers me that all VS Code instances look the same, therefore I can't distinguish which workspace I'm switching to immediately.
Is it possible to save IDE appearance or color scheme in VSCode workspace setting?
Thanks.
The simplest solution might be using the Peacock extension. It changes the color of your workspace (including titlebar, activitiy bar and status bar) using a single command:
Peacock: Change to a favorite color.
This is limited to a pre-defined color set, though.
With the extension When File you can color parts of the window based on the file path or languageId
A sample from the README
"whenFile.change": {
"byLanguageId": {
"python": {
"workbenchColor": {
"editor.background": "#ddddff"
}
},
"html": {
"workbenchColor": {
"editor.background": "#ddffdd"
}
}
},
"/projects/server/": {
"workbenchColor": {
"activityBar.background": "#509050"
}
},
"/projects/client/": {
"workbenchColor": {
"activityBar.background": "#905080"
}
},
"/.*\\.log$": {
"workbenchColor": {
"activityBar.background": "#acad60"
}
}
}
You can have workspace settings. Open them by using the Preferences: Open Workspace Settings (JSON) command:
Customize your theme there, e.g. change your status bar colour to red:
{
"workbench.colorCustomizations": {
"statusBar.background": "#9f2323",
}
}
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
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",
},
Does anyone know how to remove compression of javascript file in sencha cmd?
I want that my production app.js file what fully readable.
And I want to configure this in my app.json if possible.
I did this:
/**
* Settings specific to production builds.
*/
"production": {
"compressor": null, // compressor null
"output": {
"js": {
"optimize": false, // optimize false
},
"appCache": {
"enable": false,
"path": "../cache.appcache"
}
},
"loader": {
"cache": "${build.timestamp}"
},
"cache": {
"enable": false
}
}
But whereas the compressor option work, at the end my file is still "compressed" (not minified but still in one line).
I try the optimize method in the ideal situation, I would like all Sencha Cmd optimization to be perform except to shrink everything in one line...
If somebody know.
Thanks in advance!
thanks to #bnz, the proposed answer was not fully right but it helps me found the solution.
So, to disable the last compression of the app.js file during the build process, you have to go to your <appFolder>/.sencha/app/production.properties and this directive:
enable.resource.compression=false
I did not found yet how to set this in the app.json
No answer worked for me, but I found further possible solutions at Sencha Forum (that worked): https://www.sencha.com/forum/showthread.php?315722-How-to-ignore-compression-in-production-build
I leave it here for future people reaching this thread :)
[copied from the link]
Sencha Cmd v6.5.3.16:
app.json:
"production": {
"compressor": {
"type": "none"
}
}
To disable optimizations:
"output": {
"js": {
"optimize": false
}
}
Sencha Cmd 6.2.2.36 (change all the following):
app.json:
"production": {
"compressor": {
"type": "none"
}
}
.sencha/app/production.properties:
enable.resource.compression=false
Using app.json you can add
"debug" : {
"enable":false/true
}
to your production build object.
If you wanna disable this in general, until the next app upgrade,
you can have a look under
.sencha/app/production.defaults.properties
OR better to overwrite the settings
.sencha/app/production.properties
You need to set
build.options.debug=true
there.