I am using the vscode-deno extension and eventhough I turned on deno.enable, deno.lint and deno.unstable in my vscode settings, it does not format my code on save, which I suppose is the expected behavior.
I instead used the RunOnSave extension to hack my way into running a deno fmt on file save, but I was wondering if there was a way to do that with the Deno extension alone?
My .vscode/settings.json:
{
"deno.enable": true,
"deno.lint": true,
"deno.unstable": true,
"emeraldwalk.runonsave": {
"commands": [
{
"match": "\\.ts$",
"cmd": "deno fmt ${file}"
}
]
}
}
Found it, I have to turn on formatting on save and specifying the Deno extension as the default formatter
{
"deno.enable": true,
"editor.formatOnSave": true,
"editor.defaultFormatter": "denoland.vscode-deno"
}
Related
I used files.associations in .vscode/settings.json to override "editor.formatOnSave": false for one specific file:
{
"files.associations": {
"path/to/my/file.html": "no_format_on_save"
},
"[no_format_on_save]": {
"editor.formatOnSave": false,
}
}
but now I lost the highlights related to html how can I put it back ? I tried having two associations with array or coma separated but it doesn't seem to work.
Thank you
How do I disable the underlining of variables and their methods, like shown above? I find it quite distracting.
I don't think this is a duplicate of Disable wavy underline in VS Code because it's not a wavy underline.
{
"editor.semanticTokenColorCustomizations": {
"enabled": true,
"rules": {
"*.mutable": {
"underline": false,
}
}
}
}
Fixed it by dumping the above in settings.json
Try adding the following line to settings.json
"editor.semanticHighlighting.enabled": false,
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.
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",
},
I wish to hide .js file & .map file extensions, but to display some .js files that are important to my project.
When I use the following to hide:
{
"files.exclude": {
"**/*.js": true,
"**/*.js.map": true
}
}
Everything gets hidden. How can I display specific files while the rest are hidden?
You probably want to hide .js files only when there is a .ts file with the same name, so you need to add condition:
{
"files.exclude": {
"**/*.js": {
"when": "$(basename).ts"
},
"**/*.js.map": true
}
}