Customising the application name in a vscode workspace - visual-studio-code

As directed by the VSCode github repo - I have an simple ask. Is it possible to set a human readable application name for a VSCode Workspace?
At the moment, my .code-workspace file looks like.
{
"folders": [
{
"name": "Some project",
"path": "../some-project"
}
]
}
Having a look through the Settings (File->Preferences->Settings) for the Workspace there is a plethora of settings. Curiously there is an appName environment variable - but surely there should be a way of customising this.
The title bar looks like the following with acme.app (Workspace):
Curiously the workspace filename is called acme.app.code-workspace.

I spotted window.title in settings when having a look earlier. You can customise it in the code-workspace. I am not sure whether this would be the best way. Would be nice if we could set an environment variable workspaceName or something and use that - if we needed to use elsewhere.
If you add the settings section - then add the window.title it will default the value to ${dirty}${activeEditorShort}${separator}${rootName}${separator}${appName}.
{
"folders": [
{
"name": "Some project",
"path": "../some-project"
}
]
"settings": {
"window.title": "${dirty}${activeEditorShort}${separator}${rootName}${separator}${appName}"
}
}
Here you can see the following:
dirty - displays an indicator of whether the current file has changed
activeEditorShort - the current file
separator - configured separator i.e. '-'
rootName - defaults to acme.app (Workspace)
appName - defaults to Visual Studio Code
So you could change the rootName to be the human-readable text:
"window.title": "${dirty}${activeEditorShort}${separator}MY SUPER PROJECT${separator}${appName}"
Which gives us:

Related

How do I remove a custom terminal profile from Visual Studio Code?

How do I delete the custom profile "New 1" as shown in the picture?
I'm using Zsh, so I suggest configuration
"terminal.integrated.profiles.osx": {
"zsh": {
"path": "/bin/zsh",
"icon": "star",
"env": {
"TESTING_VAR": "abc"
}
}
},
"terminal.integrated.defaultProfile.osx": "zsh",
As described in the Configuring profiles section of the VS Code docs), when you create a custom terminal profile, it adds an entry to your settings.json file:
The recommended way to create a new profile is to run the Terminal: Select Default Profile command and activate the configure button on the right side of the shell to base it on. This will add a new entry to your settings that can be tweaked manually in your settings.json file.
...
"terminal.integrated.profiles.windows": {
"PowerShell -NoProfile": {
"source": "PowerShell",
"args": ["-NoProfile"]
}
},
"terminal.integrated.profiles.linux": {
"zsh (login)": {
"path": "zsh",
"args": ["-l"]
}
}
So open your User settings and you'll find the terminal.integrated.profiles.<OS> setting with an added entry for your custom profile under your corresponding OS. It is better to open the settings.json file directly, or open it from the UI "Edit settings.json":
settings UI
settings.json
"terminal.integrated.profiles.osx": {
"1": {
"path": "bash"
}
}
(I'm using a Mac OS so I have it in .osx. It gets added correspondingly to .linux or .windows)
To remove your custom profile:
Simply delete your custom profile ("1": {...}) from terminal.integrated.profiles
Reload/Restart VS Code
When VS Code reloads/restarts, the removed custom profiles should be gone. (It seems these custom profiles are read and loaded one-time during VS Code startup).
Note though that this only works for custom profiles. For built-in profiles, you'll have to set the profile to null instead:
To remove profile entries from the dropdown, set the name of the profile to null. For example, to remove the Git Bash profile on Windows, use this setting:
"terminal.integrated.profiles.windows": {
"Git Bash": null
}

problem loading in ${localEnv:TOKEN} into devcontainer.json

In my devcontainer.json for vscode, I am trying to load in a build variable. This variable is on my local machine's environment, my code looks like the following:
//build arguments
"build": {
"args": {
"TOKEN": "${localEnv:TOKEN}"
}
}
It seems like it works when I put in a direct string, or something like "${localEnv:HOME}", but it is not picking up this custom one. which is strange because I can do 'printenv TOKEN' and it prints out correctly.
any ideas on what I may be doing wrong?
Add your export BLA=1 to .profile, this was the only way VScode was able to pass through env variables to the devcontainer.
.devcontainer:
{
"name": "devcontainer",
"build": {
"dockerfile": "${localWorkspaceFolder}/Dockerfile",
"context": "${localWorkspaceFolder}",
},
"remoteEnv": {
"FOO": "${localEnv:FOO}",
"BAR": "${localEnv:BAR}",
}
}
First, ensure that you have the VS Code Terminal -> Integrated: Inherit Env setting set to true. This is described on the Advanced Container Configuration page:
Workarounds
If that doesn't fix your problem (it didn't for me), here are some of the workarounds that I have found:
Set the variables in your ~/.bashrc file (or export them temporarily in the terminal) and start VS Code from a bash prompt (the executable is code).
$ export TOKEN=tokenvalue
$ code
Set the variables in your ~/.pam_environment file (these are available session wide and are inherited by applications started with the launcher). You will need to logout and login or reboot for these to apply.
TOKEN=tokenvalue
Set the environment variables in one of your VS Code settings files (user or workspace) using the Terminal -> Integrated Env: Linux setting:
// Object with environment variables that will be added to the VS Code process to be used by the terminal on Linux. Set to `null` to delete the environment variable.
"terminal.integrated.env.linux": {
"TOKEN": "tokenvalue"
},

Visual Studio Code Run On Save Extension not running

I installed the Run On Save extension for VS Code. I made a Workspace setting for it, and if I change a file then resave, it does not seem to run. "I run for all files" does not show up in the console or terminal.
When I chose to edit the command configuration in my Workspace settings, it automatically edited the file with the comment "Place your settings in this file to overwrite default and user settings." so it looks like this:
// Place your settings in this file to overwrite default and user settings.
{
"editor.mouseWheelZoom": false,
"emeraldwalk.runonsave": {
"commands": [
{
"match": ".*",
"isAsync": true,
"cmd": "echo 'I run for all files'"
}
]
}
}
I'm new to configuring Workspace settings, so I'm not sure if this is okay or not. I ensured that Run On Save is enabled by selecting it on the command palette.
Here is the site for the extension: https://marketplace.visualstudio.com/items?itemName=emeraldwalk.RunOnSave
In order to see the console output, you have to be in the Output tab and select the Run On Save option in the dropdown. The extension was created before the integrated terminal existed and hasn't seen a major update in a while.
Regarding the comment that was added to your config:
// Place your settings in this file to overwrite default and user
settings.
is unrelated to this particular extension. It is just vscode letting you know the purpose of the workspace level configuration. It allows you to override a subset of your more global user / default settings. This allows you to keep reasonable default preferences but to customize certain specific things in any given workspace.
Regarding the original RunOnSave extension, feel free to file an issue here https://github.com/emeraldwalk/vscode-runonsave/issues if you have any questions or problems. I would also welcome pull requests if anyone is interested.
I had the exact same issue. I removed that extension and am using this one instead:
https://marketplace.visualstudio.com/items?itemName=wk-j.save-and-run
It is a fork based on RunOnSave. This one works for me when I set its configuration in my user settings and then run the command "Save and Run: Enable".
This one uses the bulit-in powershell terminal.
HTH
In addition to our dear #bingles, I have accidentally discovered that the commands should be added to .vscode/settings.json file instead of .vscode/emeraldwalk.runonsave as said in the plugin documentation
Add it to settings.json and everything should work as expected.
For the extension to work on Workspace you must put the emeraldwalk.runonsave inside settings:
{
"settings": {
"emeraldwalk.runonsave": {
"commands": [
{
"match": ".*",
"isAsync": true,
"cmd": "echo 'I run for all files'"
}
]
}
}
}
A related one:
Previously I used RunOnSave, this time around I used Code Runner.
Code Runner - https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner
Below are it's settings I used:
File: %AppData%\Code\User\keybindings.json
{
{
"key": "ctrl+s",
"command": "code-runner.run"
}
}
File: .vscode\settings.json
{
"code-runner.saveFileBeforeRun": true,
"editor.codeActionsOnSave": [
"code-runner.executorMap"
]
"code-runner.executorMap": {
"javascript": "node a.js"
},
}
If possible, you could use Code Runner with the above settings, or use a similar to the above settings for the RunOnSave.
Note that RunOnSave has its own tab which is time-consuming to switch to another tab.
With Code Runner I can see the output in the Output tab itself which is a very nice thing, saves time.

Use csscomb for VS Code

I'm trying VS Code for a few days and I've installed csscomb extension. It works fine when I put .csscomb.json on my work directory.
But I wish it worked even on file I open outside of my work directory.
Could you tell me how to configure VS Code and/or csscomb to work like this?
I use Windows 10 Pro.
According to the csscomb page on VS Code's Marketplace...
They have "Supported settings"
csscomb.preset
Type: Object or String
Defaut: {}
Config's name. Should be one of the
following: csscomb, zen, yandex or an object containing custom
configuration or path to config.
And the following warning:
Warning!
If you want to specify a file in the current directory, the path must
begin with a ./ or ../ if relative to the current directory. Also you
can use HOME directory as ~ symbol.
In other words, since there is no default, you have to set either a preset config or path to a custom config.
To configure csscomb in VS Code:
Go to File > Preferences > Settings
Select the "User Settings" tab in the right window (to apply the config globally)
Expand the options for "CSScomb configuration"
Click the pencil to the left of "csscomb.preset"
Click "Copy to Settings"
Enter the path to your custom config or choose a preset
{
"csscomb.preset": "~/.vscode/.csscomb.json"
}
OR one of ("csscomb", "zen", "yandex")
{
"csscomb.preset": "csscomb"
}
Next, you need to create the .csscomb.json file in that location. I chose the C:\Users\username\.vscode directory because that's where VS Code also downloads extensions on Windows.
Here's the config I created using csscomb's config generator:
{
"always-semicolon": true,
"color-case": "upper",
"block-indent": " ",
"color-shorthand": true,
"element-case": "lower",
"eof-newline": false,
"leading-zero": false,
"quotes": "double",
"sort-order-fallback": "abc",
"space-before-colon": "",
"space-after-colon": " ",
"space-before-combinator": " ",
"space-after-combinator": " ",
"space-between-declarations": "\n",
"space-before-opening-brace": " ",
"space-after-opening-brace": "\n",
"space-after-selector-delimiter": " ",
"space-before-selector-delimiter": "",
"space-before-closing-brace": "\n",
"strip-spaces": true,
"tab-size": true,
"vendor-prefix-align": true
}
You can also include an option for sorting tags (or copy it from one of their presets on git):
{
"sort-order": [
[
"font",
"font-family",
"font-size",
"font-weight",
"font-style"
],
[
"position",
"z-index"
]
]
}
Now you should be able to format CSS within VS Code by typing ctrl+shift+p then typing "CSScomb" then enter.
"Formatter" extensions are supposed to be recognized by the default formatting keyboard shortcut shift+alt+f, however I haven't gotten that to work. I think it's something the developer has to configure.
Instead, you can create your own keyboard shortcut in VS Code:
Go to File > Preferences > Keyboard Shortcuts
Click the link at the top to edit keybindings.json
Add your custom keybinding
{
"key": "ctrl+shift+c",
"command": "csscomb.execute"
}
Now you should be all set!

Visual Studio Code: Treat other extensions as HTML

For the purposes of syntax highlighting and colouring and intellisense is it possible to treat other extensions (tpl, master, etc) as HTML?
I know it's possible on a file by file basis by pressing CTRL+SHIFT+P and selecting "Change Language Mode" BUT I want it to work off file extension, and not have to redo it every time I open a new file.
I also know it's possible for some languages by editing the json files in the plugins directory, BUT there doesn't seem to be one for HTML.
Update for VS Code 1.0:
There is a setting files.associations that can be used to assign file patterns to languages. For example:
"files.associations": {
"*.tpl": "html",
"*.master": "html"
}
Previous answer:
This is a commonly asked feature request and we are looking into this issue for the future.
As a workaround if you need to have a solutio now:
close VS Code
open C:\Users\<your name>\AppData\Local\Code\app-<latest-version>\resources\app\server\lib\mime.js
find the object literal knownTextMimes
for the file extension you want add the proper mime type
for example '.tpl': 'text/html'
save and restart code
Note: this change will not survive automatic updates but the hopes are that there is a better solution in the future update :)
(Tested on version 1.59.1)
It is also possible to set Associations through GUI:
Go to Settings->Text Editor->Files->Associations.
Set Item (file extension) and Value (language).
Open notepad as admin (just in case) by right clicking run as admin.
Click file => open => copy and paste C:\Program Files (x86)\Microsoft VS Code\resources\app\extensions\html in box.
select view all file types at bottom right.
Open package.json
Copy and paste
{
"name": "html",
"version": "0.1.0",
"publisher": "vscode",
"engines": { "vscode": "*" },
"extensionDependencies": [
"html"
],
"contributes": {
"languages": [{
"id": "html",
"aliases": ["pd"],
"extensions": [".pd"]
}]
}
}
replace everything with that.
save and quit
restart vs code.
I resolve the issue for my with installing Smarty Extension 1.1.1 + adding this settings into Settings.json
"files.associations": {
"*.tpl": "smarty",
"*.master": "smarty"
}
Jesse's answer is correct. I don't have enough reputation points to comment on his answer, but the path for Mac users is:
cd /Applications/Visual\ Studio\ Code.app/Contents/Resources/app/extensions/html/
Note that there will already be some extensions so instead of copying and pasting the code snippets wholesale, simply add the extension you'd like to the extensions and aliases array like so:
{
"name": "html",
"version": "0.1.0",
"publisher": "vscode",
"engines": { "vscode": "*" },
"contributes": {
"languages": [{
"id": "html",
"extensions": [ ".html", ".htm", ".shtml", ".mdoc", ".jsp", ".asp", ".aspx", ".jshtm", ".ejs" ],
"aliases": [ "HTML", "htm", "html", "xhtml", "ejs" ],
"mimetypes": ["text/html", "text/x-jshtm", "text/template", "text/ng-template"]
}],
"grammars": [{
/* "language": "html", not yet enabled*/
"scopeName": "text.html.basic",
"path": "./syntaxes/HTML.plist"
}]
},
"extensionDependencies": [
"html"
]
}