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
Related
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"
}
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.
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
}
}
How to set tab size is already answered here.
But how to have different settings for different file types?
E.g. I want the tab size for HTMLs to be 2, but for other files to be 4.
VS Code configures language specific settings in settings.json
Shortcut is: Command Palette (⇧⌘P) then: Preferences: Configure Language Specific Settings
Example of setting.json changing tabsize
{
"[sass]": {
"editor.tabSize": 2
},
"[html]": {
"editor.tabSize": 4
},
"[javascript]": {
"editor.tabSize": 2
}
}
These are not nested inside any other object, they are defined at the root.
With vscode v1.63 you will be able to "group" languages in language-specific settings like this:
"[sass][javascript]": {
"editor.tabSize": 2
},
"[html]": {
"editor.tabSize": 4
}
This already can be done in the colorCustomizations setting like:
"workbench.colorCustomizations": {
"[GitHub Sharp][GitHub Sharp Dark]": {
"editorPane.background": "#d6d0d01a",
"sideBarSectionHeader.border": "#D3D3D3",
}
}
See Multiple languages specific editor settings
In addition to the other answers, you can set a default, and then set file-specific sizes.
"editor.tabSize": 2, // default
"[elm]": { // specific only to .elm files
"editor.tabSize": 4
},