How to show certain files in Visual Studio Code - visual-studio-code

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
}
}

Related

How to preserve highlights after using `files.associations` on a specific file

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 to set appearance or color scheme for different vscode instances?

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",
}
}

How to format on save with the Deno VSCode extension?

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"
}

How can I ignore files with no extension/suffix in vs code on a Mac?

I know how to ignore most files in VScode as follows
"files.exclude": {
"**/*.pdf": true,
"**/*.out": true,
"**/*.exe": true,
"**/Music": true
},
But I also want to ignore files with no extension or suffix, for example the filename is smartPoint (which is generated after I run file smartPoint.cpp in VScode). Is there any way I can ignore this kind of Unix file on a Mac?
Since you have generated files with the same basename I was hoping that some form of hiding derived files would work. Example for typescript/javascript:
"files.exclude": {
**/*.js: { "when": "$(basename).ts" }
}
But what to put in the key **/.js? I tried
"**/*": { "when": "$(basename).cpp } // doesn't work
"**/$(basename)": { "when": "$(basename).ts" } // doesn't work
"**/[^.]*": { "when": "$(basename).ts" } // doesn't work
"**/*[^.]*": { "when": "$(basename).ts" } // doesn't work
"**/*[^.]{1,10}": { "when": "$(basename).ts" } // doesn't work
I really thought some version of the last would work - excluding files with no extension - but no.
WARNING: dirty hack follows. As a lark I tried
"**/[^.][^.][^.][^.][^.][^.][^.][^.][^.][^.]": {"when": "$(basename).cpp"},
since smartPoint has 10 characters. That works !! But not for new - 3 characters. But you can have both:
"**/[^.][^.][^.]": {"when": "$(basename).cpp"}, // works on 3 character file names
"**/[^.][^.][^.][^.][^.][^.][^.][^.][^.][^.]": {"when": "$(basename).cpp"}, // works on 10
so yes, unless someone comes up with a better solution, you could include all the versions you need for the number of characters (for 1...10, etc.) you might have.
Ugly, but simple.

Disable intellisense for css classnames in .tsx/.ts files

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.