I want to change color of these words.
"[Monokai Dimmed]": {
// https: //code.visualstudio.com/api/references/theme-color
// "editor.foreground" : "#ff0000",
// "editorLineNumber.foreground" : ""
// "????" : ""
first you should backup the theme you want to make change in it so go to the path and copy all files.
for example we going to make change in theme-defaults
in Linux :
"/opt/visual-studio-code/resources/app/extensions/THEME_YOU_WANT_TO_EDIT/themes/"
in windows:
"C:\program files\Microsoft VS
Code\resources\app\extensions\THEME_YOU_WANT_TO_EDIT\themes"
in windows path can be different depends where you installed.
after backup
open your project with vscode and press Ctrl+Shift+P and search for
">Developer: Inspect Editor"
and select part of the keyword you want to change the color of it.
in this one we going to change function color:
now copy the style name
and open Json files with vscode you backup them before and search for style name in all files until you find it. click the little color icon and select color you want and save it.
unfortunately you can not see change with out reopening the vscode. so close vscode and open it again
as you can see color of function keyword changed.
Related
Is it possible to show the last folder in the title bar? If you have multiple instances of VS Code open, it is difficult to distinguish between them from the task bar. If both instances are open on say a file called 'main.ts', you will see 'main.ts' in the taskbar item.
Currently, the title would be [filename open] - [folder open] (e.g main.ts - angular2-training. Is it possible to invert them to become [folder open] - [filename open] (e.g angular2-training - main.ts?
Use window.title in user/workspace settings
The documentation is here with the full list of options of what can be shown. It's quite flexible.
In your case, to display angular2-training - main.ts you can use this
{
"window.title": "${rootName}${separator}${activeEditorShort}"
}
Older VS Code versions
The above only works in v1.10 and up. Here's how to do it in older versions:
v1.9, v1.8 - "window.showFullPath": true shows the full path to the current file, so you can at least see the project folder. Note this config is unsupported after v1.10
v1.7 and below - it's not possible
On version 1.13
Go to settings, inside UserSettings add this line to the json blob:
"window.title": "${activeEditorLong}"
On version 1.41.1
based uploaded image:
1,2: Go to Setting
3: Search windows title in search box
4: Type this statement in windows title box:
${dirty}${separator}${rootName}${separator}${activeEditorShort}
If you want to be able to identify which project you are working on by looking at the window title bar, one option is to set "window.title" to a custom value in the workspace settings file at
/.vscode/settings.json
If the file doesn't exist, create it, then add the following to it:
{
"window.title": "<PROJECT NAME> : ${rootName}${separator}${activeEditorShort}"
}
This is a simple solution that works rather well.
Tested in 1.44
The setting which matches the OPs problem... not being able to tell which VS Code editor is which from the taskbar... is:
"window.title": "${folderName} ${separator} ${activeEditorShort}"
I prefer the simpler
"window.title": "${folderName}"
${activeFolderShort} and friends, don't do what I want, as these follow the folder the active file is in. Whereas I want the folder of the whole "project" shown at all times.
Also, when browsing from the taskbar, I don't care what file is active - it is just noise. I care about the project (i.e. folder). On many occasions, every open VS Code will "main.rs" as the active file, so it is pointless to show it!
Editing the settings in json format even includes intellisense now, so you can see all the options without even having to look them up, and they appear as soon you save the settings file. No need to reload. Awesome!
v1.31 of vscode added these options to window.title:
There are three new variables that can be used within the window.title
setting:
${activeFolderShort}: The name of the folder the file is contained in.
${activeFolderMedium}: The path of the folder the file is contained
in, relative to the workspace folder.
${activeFolderLong}: The full
path of the folder the file is contained in.
In addition of the setting:
"window.title": "${rootName}${separator}${activeEditorShort}"
You now can configure the separator as well with VSCode 1.45 (April 2020)
Allow customize the window title separator
A new setting window.titleSeparator allows to change the separator that is used in the window title.
By default a dash is used.
Just some tweaks i found out:
// will not work on workspace settings.json -> only global
"window.titleBarStyle": "custom",
// show only the name of the workspace folder in the title bar
"window.title": "${folderName}",
// remove the useless icons on the top-right
"window.commandCenter": false,
// make left & top green :-)
"workbench.colorCustomizations": {
"activityBar.background": "#1e2127",
"activityBar.foreground": "#95C085",
"titleBar.activeBackground": "#165900",
"titleBar.activeForeground": "#ffffff",
},
I have checked the Official Doc about theme settings, after trying too many times, I haven't made it. I want to change the text color(not background color, just the words color), which profile should I edit?
I have spended a few time and solved it. Edit your settings.json as below:
"workbench.colorCustomizations": {
"list.focusForeground": "#00ff00",
},
Replace the color(hex) as what you want, the example code color #00ff00 is green.
BTW, how I get this settings:
Toggle developer tools(In vscode dropmenu of help)
Try to find div where you want change, and get the color, for example (#eeffff)
command + shift + p, and input Generate Color ... will show Generate Color Theme From Current Settings, select it would open a new file with full color configs.
copy all colors json code block to settings file which match key of workbench.colorCustomizations
search #eeffff and try to find relative key, if not sure, change color and try to see the color in your code.
find out list.focusForeground is right. And keep this settings, remove other.
It might spend less or more time, but it works.
I've got a component-based folder structure in my project. It is a bunch of component-folders with one index.js file each.
Is it possible to make Visual Studio Code display the parent folder name in the file tabs? Or am I limited to seeing a bunch of tabs that all display index.js and nothing else?
You can configure Visual Studio Code to always show parent folder names in the tabs! In your User Settings, just add this line: "workbench.editor.labelFormat": "short" (other values are "long", "medium" or "default")
Result: the files init/views.js, init/routes.js and plugins/modal.js will be presented as such:
Another option is the User Setting "breadcrumbs.enabled": true which will give you an entire row of breadcrumbs showing the complete file path:
PS: To open User Settings use the File-menu → Preferences → Settings → User Settings. To view the settings in a JSON format just click the {} icon in the top right corner.
Go to the main menu File → Preferences → Settings. And search for (Cmd + F on Mac; Ctrl + F on Windows and Linux) workbench label format.
Choose the short option.
Visual Studio Code has now improved their tab-UI to resolve this issue.
When you've opened multiple tabs with the same filename, Visual Studio Code will automatically display the parent foldername in each of those tabs.
Here's an example: I've opened event.js and two index.js files. Visual Studio Code automatically decides it's a good idea to display the foldername for the index.js files :)
It pretty much solved the bulk of my problem.
I know this is too late to answer, but in case someone is looking for the file path to show on the title bar, you can follow this:
Open settings (command + ,)
Search for title
You'll see something like activeEditorShort, replace it with activeEditorLong
Save
Source:
https://medium.com/riow/vscode-show-full-path-in-title-bar-b0cb731b330
Step 1: Go to File > Preferences > Settings
Step 2: search for "workbench.editor.labelFormat"
Step 3: select medium from a drop-down
You can install the nice-index extension for a better experience dealing with index files.
However, as of now, it only works when you have more than one index file open. This can be resolved by changing labelFormat to "short", as other answers suggest.
In VSCode 1.53 you can use thees settings:
Controls the window title based on the active editor. Variables are substituted based on the context:
${activeEditorShort}: the file name (e.g. myFile.txt).
${activeEditorMedium}: the path of the file relative to the workspace folder (e.g. myFolder/myFileFolder/myFile.txt).
${activeEditorLong}: the full path of the file (e.g. /Users/Development/myFolder/myFileFolder/myFile.txt).
${activeFolderShort}: the name of the folder the file is contained in (e.g. myFileFolder).
${activeFolderMedium}: the path of the folder the file is contained in, relative to the workspace folder (e.g. myFolder/myFileFolder).
${activeFolderLong}: the full path of the folder the file is contained in (e.g. /Users/Development/myFolder/myFileFolder).
${folderName}: name of the workspace folder the file is contained in (e.g. myFolder).
${folderPath}: file path of the workspace folder the file is contained in (e.g. /Users/Development/myFolder).
${rootName}: name of the opened workspace or folder (e.g. myFolder or myWorkspace).
${rootPath}: file path of the opened workspace or folder (e.g. /Users/Development/myWorkspace).
${appName}: e.g. VS Code.
${remoteName}: e.g. SSH
${dirty}: a dirty indicator if the active editor is dirty.
${separator}: a conditional separator (" - ") that only shows when surrounded by variables with values or static text.
I've got a component-based folder structure in my project. It is a bunch of component-folders with one index.js file each.
Is it possible to make Visual Studio Code display the parent folder name in the file tabs? Or am I limited to seeing a bunch of tabs that all display index.js and nothing else?
You can configure Visual Studio Code to always show parent folder names in the tabs! In your User Settings, just add this line: "workbench.editor.labelFormat": "short" (other values are "long", "medium" or "default")
Result: the files init/views.js, init/routes.js and plugins/modal.js will be presented as such:
Another option is the User Setting "breadcrumbs.enabled": true which will give you an entire row of breadcrumbs showing the complete file path:
PS: To open User Settings use the File-menu → Preferences → Settings → User Settings. To view the settings in a JSON format just click the {} icon in the top right corner.
Go to the main menu File → Preferences → Settings. And search for (Cmd + F on Mac; Ctrl + F on Windows and Linux) workbench label format.
Choose the short option.
Visual Studio Code has now improved their tab-UI to resolve this issue.
When you've opened multiple tabs with the same filename, Visual Studio Code will automatically display the parent foldername in each of those tabs.
Here's an example: I've opened event.js and two index.js files. Visual Studio Code automatically decides it's a good idea to display the foldername for the index.js files :)
It pretty much solved the bulk of my problem.
I know this is too late to answer, but in case someone is looking for the file path to show on the title bar, you can follow this:
Open settings (command + ,)
Search for title
You'll see something like activeEditorShort, replace it with activeEditorLong
Save
Source:
https://medium.com/riow/vscode-show-full-path-in-title-bar-b0cb731b330
Step 1: Go to File > Preferences > Settings
Step 2: search for "workbench.editor.labelFormat"
Step 3: select medium from a drop-down
You can install the nice-index extension for a better experience dealing with index files.
However, as of now, it only works when you have more than one index file open. This can be resolved by changing labelFormat to "short", as other answers suggest.
In VSCode 1.53 you can use thees settings:
Controls the window title based on the active editor. Variables are substituted based on the context:
${activeEditorShort}: the file name (e.g. myFile.txt).
${activeEditorMedium}: the path of the file relative to the workspace folder (e.g. myFolder/myFileFolder/myFile.txt).
${activeEditorLong}: the full path of the file (e.g. /Users/Development/myFolder/myFileFolder/myFile.txt).
${activeFolderShort}: the name of the folder the file is contained in (e.g. myFileFolder).
${activeFolderMedium}: the path of the folder the file is contained in, relative to the workspace folder (e.g. myFolder/myFileFolder).
${activeFolderLong}: the full path of the folder the file is contained in (e.g. /Users/Development/myFolder/myFileFolder).
${folderName}: name of the workspace folder the file is contained in (e.g. myFolder).
${folderPath}: file path of the workspace folder the file is contained in (e.g. /Users/Development/myFolder).
${rootName}: name of the opened workspace or folder (e.g. myFolder or myWorkspace).
${rootPath}: file path of the opened workspace or folder (e.g. /Users/Development/myWorkspace).
${appName}: e.g. VS Code.
${remoteName}: e.g. SSH
${dirty}: a dirty indicator if the active editor is dirty.
${separator}: a conditional separator (" - ") that only shows when surrounded by variables with values or static text.
How would you filter the files shown in the folder view in Visual Studio Code?
Reference: Filter files shown in folder
Hiding files and folders
The files.exclude setting lets you define patterns to hide files and folders from several places in VS Code like the explorer and search. Once defined, files and folders matching any of the patterns will be hidden.
{
"files.exclude": {
"**/*.js": true
}
}
Hide derived resources
If you use a language that compiles to another file at the same location of the source file, like TypeScript does to JavaScript, you can easily set an expression to hide those derived files:
"**/*.js": { "when": "$(basename).ts"}
Such a pattern will match on any JavaScript file (**/*.js), but only if a sibling file with the same name and extension, *.ts in this example, is present. The same technique can be used for other transpiled languages, like Coffee Script or Less/Sass, too.
Source: VS Code v0.5.0 (July 2015)
In version after VScode 1.70 (July 2022) all you need to do is press Ctrl+F or F3 to search.
Please refer following post
Searching in Explorer panel after VSCode 1.70
Only applicable for v1.69 and below.
Step #1
Click on Explorer window. This is critical as without focus on Explorer it will not work.
Step #2
Start Typing name you want to filter. It's weird that there is no textbox to take input but... take a leap of faith and type. You will see your typed text in top-right corner in brown background. Now hover on that text.
Step #3
Click on 3 stacked lines to filter..
They look like hamburger menu but they are not. They are saying if it's filtered or not. They are toggled between filtered and just highlight. So, make sure they are like inverted pyramid.
That's it. It should be filtered now.
If you only want to change the setting for this project, then do the following:
File > Save Workspace As > ... enter your {project name}
Then open file: {project name}.code-workspace
And update section settings.
Sample:
{
"folders": [
{
"path": "."
}
],
"settings": {
"files.exclude": {
"**/*.log": true
}
}
}
VScode 1.70 (July 2022) should improve on this "tree filter" feature.
(Available today in Code insiders)
See issue 70646 and PR 152481:
Support find widget in lists/trees
This PR replaces the existing list/tree type filter:
with an bona fide find widget:
While a seemingly simple change, this has some (desired) consequences when searching/filtering in trees. Namely:
We will restore simple keyboard navigation by default.
That is: pressing the letter A will focus the next element which starts with A.
Initiating a search operation requires pressing Ctrl-F or F3, like the editor.
While searching, focus is in the find input box as opposed to the list itself.
Pressing DownArrow will focus the first list element which was found.
We'll preserve all custom behavior of context keys, eg. used by the VIM extension).
In VIM, the pre-existing / command will trigger simple keyboard navigation, as opposed to opening the find widget.
The VIM extension has the option to change this behavior themselves.
And:
In general:
Keyboard navigation is now called type navigation
Filter on type is now called find mode, aligned with a new find concept
Settings
workbench.list.keyboardNavigation has been renamed to workbench.list.defaultFindMode
workbench.list.automaticKeyboardNavigation has been deleted
Commands
list.toggleKeyboardNavigation has been renamed to list.triggerTypeNavigation
list.find has been added
list.closeFind has been added
list.toggleFilterOnType has been renamed to list.toggleFindMode
Context Keys
Mainly used by the vim extension:
listSupportsKeyboardNavigation has been renamed to listSupportsTypeNavigation
listAutomaticKeyboardNavigation has been renamed to listTypeNavigationMode
"With the focus on the File Explorer start to type part of the file name you want to match.You will see a filter box in the top-right of the File Explorer showing what you have typed so far and matching file names will be highlighted."
"Hovering over the filter box and selecting Enable Filter on Type will show only matching files/folders."
documentation: https://code.visualstudio.com/docs/getstarted/userinterface#_filtering-the-document-tree