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
},
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
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'm trying to modify a ZSH theme but there's something wrong with colors
I can see everything ok in windows terminal:
I also can see everything ok when I connect to my WSL with the vscode remote tool:
But when i'm in a local context this happens:
This is the relevant part of my vscode config:
"terminal.integrated.fontFamily": "DejaVuSansMono Nerd Font",
"terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\wsl.exe",
"files.exclude": {
"**/.git": false
},
"terminal.integrated.shell.linux": "/usr/bin/zsh",
"gitlens.views.repositories.branches.layout": "list",
"window.zoomLevel": 0,
"workbench.colorCustomizations": {
"terminalCursor.background":"#C5C8C6",
"terminalCursor.foreground":"#C5C8C6",
// "terminal.ansiBlack":"#1D1F21",
"terminal.ansiBlue":"#27aecf",
"terminal.ansiBrightBlack":"#969896",
// "terminal.ansiBrightBlue":"#81A2BE",
// "terminal.ansiBrightCyan":"#8ABEB7",
// "terminal.ansiBrightGreen":"#B5BD68",
// "terminal.ansiBrightMagenta":"#B294BB",
// "terminal.ansiBrightRed":"#CC6666",
// "terminal.ansiBrightWhite":"#FFFFFF",
// "terminal.ansiBrightYellow":"#F0C674",
// "terminal.ansiCyan":"#8ABEB7",
"terminal.ansiGreen":"#438b43",
// "terminal.ansiMagenta":"#B294BB",
// "terminal.ansiRed":"#CC6666",
"terminal.ansiWhite":"#ffffff",
"terminal.ansiYellow":"#9e983c"
},
"materialTheme.accent": "Cyan",
"terminal.external.linuxExec": "zsh",
"python.terminal.activateEnvInCurrentTerminal": true
}
I'd love to fix the color of those triangles.
I've tried almost everything in my hand but now I have no clue of what to do...
Thanks in advance!
Okey I fixed it,
My problem was that in I needed to add a color for foreground in the vscode setting
"terminal.foreground":"#ffffff"
apparently the default color for this is some kind of grey and that's what it draw when you don't specify any color.
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",
},