I'm creating a VScode theme and I have a long json file like this:
{
"name": "mytheme",
"type": "dark",
"colors": {
//////////////////////////////
// CONTRAST COLOR
// The contrast colors are typically only set for high contrast themes.
// If set, they add an additional border around items across the UI to increase the contrast.
//////////////////////////////
// An extra border around active elements to separate them from others for greater contrast.
// "contrastActiveBorder": "#FFFFFF00",
// An extra border around elements to separate them from others for greater contrast.
// "contrastBorder": "#FFFFFF00",
//////////////////////////////
// BASE COLORS
//////////////////////////////
// Overall border color for focused elements. This color is only used if not overridden by a component.
"focusBorder": "#aa6DFF66",
// Overall foreground color. This color is only used if not overridden by a component.
"foreground": "#aaE0E8",
// Shadow color of widgets such as Find/Replace inside the editor.
"widget.shadow": "#112330",
// Background color of text selections in the workbench (for input fields or text areas, does not apply to selections within the editor and the terminal).
"selection.background": "#9B6DFF99",
// Foreground color for description text providing additional information, for example for a label.
"descriptionForeground": "#808182",
// Overall foreground color for error messages (this color is only used if not overridden by a component).
"errorForeground": "#9B6DFF",
// The default color for icons in the workbench.
"icon.foreground": "#D9E0E8",
...
I want to try it so I follow this official article. It says to press f5 to open Extension Development Host window.
If I press f5, I get this popup
You don't have an extension for debugging 'JSON with Comments'. Should we find a 'JSON with Comments' extension in the Marketplace?
If I press find or cancel, I can't open the Extension Development Host window.
I try pressing f5 on when I had open the package.json file (that has no comments) but it's the same.
How can I debug a json file with comments.
Remove comments is not an option, it's a very long file, comments make it readable and understandable.
Solved creating this launch.json file inside .vscode folder:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "extensionHost",
"request": "launch",
"name": "Launch Extension",
"runtimeExecutable": "${execPath}",
"args": [
"--extensionDevelopmentPath=${workspaceFolder}"
],
"outFiles": [
"${workspaceFolder}/out/**/*.js"
],
},
]
}
Related
Ok, I am new to coding and just found out about costume snippets in VS-Code. I wrote some and they all worked pretty much as expected, but now I have some problems/questions. I have done some research but couldn't find any solutions.
1. how do I enable for example this snippet only in strings? Is there even a way? I don't want all my snippets to work in strings, just some.
"tab": {
"prefix": ["tab"],
"body": [
"${1|\\t,\\t\\t,\\t\\t\\t,\\t\\t\\t\\t,\\t\\t\\t\\t\\t,\\t\\t\\t\\t\\t\\t|}$0"
],
"description": "insert escaped tab"
},
adding this to the settings enables all snippets in strings which i don't want
"editor.quickSuggestions": {
"strings": true
},
2. I have written a snippet that should insert some lines into my launch.json file and it basically works the way I want, but only if I put the snippet in my global snippet file and not set the scope to json. It also does not work if I put it in the json snippet file (json.json). Why?
"launch json": {
// "scope": "json",
"prefix": "launch",
"body": [
"\"version\": \"0.2.0\",",
"\"configurations\": [",
"\t{",
"\t\t\"type\": \"${1|firefox,chrome|}\",",
"\t\t\"reAttach\": false,", // is there a way to auto remove this line if chrome is chosen
"\t\t\"request\": \"launch\",",
"\t\t\"name\": \"Launch index.html\",",
"\t\t\"file\": \"\\${workspaceFolder}/index.html\"",
"\t}",
"],",
"$0",
],
"description": "insert launch json"
},
that's the snippets output
"version": "0.2.0",
"configurations": [
{
"type": "firefox",
"reAttach": false,
"request": "launch",
"name": "Launch index.html",
"file": "${workspaceFolder}/index.html"
}
],
also is there a way to change the inserted lines depending on what option I chose from the list?
it's not really necessary, just wondering (the "reAttach": false, option only exists with firefox, so i don't need the line if i choose one of the other options)
3. Another problem I have is that I copied and then customized some already existing snippets (for java for example) and now it is showing both options in intellisense. I know, I know, I can press F1 -> insert snippet and click the eye symbol behind them to hide them from intellisense but that only works if the snippet actually is in the list, which isn't true for all of them. I just can't find some of them. Where can I find and disable them?
4. One last thing, I tried making a snippet for css with "prefix": ["*","somethingElse"], but i could not use the snippet with the * only the somethingElse worked, why is that? I already made two other snippets that use . and # as prefix and they also worked just fine. Is there something special about * when it comes to snippets?
I have no idea how to fix the main 4 problems or what causes them. But one way I thought about solving the optional line problem was something like this:
"\t\t\"type\": \"${1|firefox,chrome|}\",${2:\n\t\t\"reAttach\": false,}",
that way I can delete the line with one button if I don't need it. But the question was more about if it's possible in general so change some other lines depending on the option chosen from the list.
I recently changed my color theme in VisualStudio Code, I like everything from the theme except for the light purple color of the <> tags, they clash with the pink. How can I change them so they're a different color, preferable just a darker purple. Btw the theme im using is called Tokyo Night Storm.
Here's an image showing how the angle brackets are currently colored:
I tried going into my settings.json couldn't find exactly what to write.
Use the Developer: Inspect Editor Tokens and Scopes action to open the Scope Inspector. Then click on the token you want to inspect. Then find out its textmate scopes. In this case, the opening angle bracket is:
punctuation.definition.tag.begin.html
meta.tag.structure.html.start.html
text.html.derivative
Pick an appropriate textmate scope, and then use it in a token colour customization like so:
"editor.tokenColorCustomizations": {
"[Tokyo Night Storm]": {
"textMateRules": [{
"scope":"punctuation.definition.tag.begin.html",
"settings": {
"foreground": "#FF0000",
"fontStyle": "bold"
}
},{
"scope":"punctuation.definition.tag.end.html",
"settings": {
"foreground": "#FF0000",
"fontStyle": "bold"
}
}],
}
},
See also the docs for creating your own colour theme.
I´m trying to modify Sublime to highlight modified sidebar labels.
I used this piece of code and it`s variations, like "sidebar_tree", sidebar_tree_row etc., but it doesn´t work.
{
"class" : "sidebar_label",
"settings": ["highlight_modified_sidebar_label_row"],
"parents" : [{"class": "sidebar_label_control", "attributes": ["dirty"]}],
"fg" : [245, 100, 90]
}
Using Soda Dark theme, and already have enabled highlight modified tabs, but since I have opened 20 scripts, tabs are all pressed together.
So I figured to highlight sidebar labels, but code won´t cooperate.
There is a rectangle area in the right sidebar, showing the current code block you are in in the context of the whole file, however it is kind of difficult to see, anyone know how to make the color more obvious?
Yes, it is possible to change the color of the minimap. In addition there are also a couple of settings that you can enable to make the minimap easier to see:
draw_minimap_border: enable it to see the minimap border.
always_show_minimap_viewport: makes the minimap always visible (even if the mouse is not near the minimap).
Example user settings (use menu Preferences>Settings, see this answer for more info about sublime user-settings file format):
{
"always_show_minimap_viewport": true,
"draw_minimap_border": true
}
How to change the color of the minimap?
To change the color of the minimap you should do it in your theme file. The default theme file is called Default.sublime-theme but this file name could be different if you are using a different downloaded theme. You need to change the value of the property viewport_color inside the class minimap_control. In order to do it you have two main options:
Option 1: override the values in a new file. Create a file called Default.sublime-theme in your user folder (you can find your user folder using menu Preferences>Browse-packages and then open the folder called user). Set this content to the file, use another color values if you want, save it with fileName Default.sublime-theme (supposing you are using default theme), and then restart:
[
{
"class": "minimap_control",
"settings": ["always_show_minimap_viewport"],
"viewport_color": [68, 200, 240, 96],
"viewport_opacity": 1.0,
},
{
"class": "minimap_control",
"settings": ["!always_show_minimap_viewport"],
"viewport_color": [68, 200, 240, 96],
"viewport_opacity": { "target": 0.0, "speed": 4.0, "interpolation": "smoothstep" },
},
{
"class": "minimap_control",
"attributes": ["hover"],
"settings": ["!always_show_minimap_viewport"],
"viewport_opacity": { "target": 1.0, "speed": 20.0, "interpolation": "smoothstep" },
},
]
Option 2: edit your theme file directly. If you are using Linux and the default theme you usually can found Default.sublime-theme inside /opt/sublime_text/Packages/Theme - Default.sublime-package. If you are using windows and the default theme you usually can find Default.sublime-theme inside C:/Program Files/Sublime Text 3/Packages/Theme - Default.sublime-package.
Example results:
Default Minimap:
Default minimap with option draw_minimap_border set to true.
Minimap with custom color ([68, 200, 240, 96]) and border
Edit: extra explanation about the meaning of "settings": ["!always_show_minimap_viewport"] in the previous file. It means that the config group is only used if the sublime setting always_show_minimap_viewport value is set to false. On the other hand "settings": ["always_show_minimap_viewport"] means that the config group is only used if the sublime setting always_show_minimap_viewport is set to true.
More in detail, the first config group just sets the minimap color and makes opacity=1, so, it makes the minimap always visible, and this is only used when always_show_minimap_viewport is set to `true.
The last two config groups are only used when always_show_minimap_viewport is set to false. The second config-group sets the color and sets opacity value to 0.0, so it makes the minimap non visible. BUT, the third group causes the opacity value to be 1 when you hover the minimap (see the attribute in the config group), so it makes the minimap visible when you hover the mouse over it. And this happens if always_show_minimap_viewport is set to false.
When we open multiple files in SublimeText2, the tab of the currently displayed file is a bit darker/lighter than the rest. My problem is, I cannot see it — the shade difference is too small.
What is the name of the key in the .tmTheme file, so I could make it more contrasting? Or is it just a hard-coded effect that I can't influence?
Tab colors are set by images in the .sublime-theme. The class/attribute you are concerned with is
{
"class": "tab_control",
"attributes": ["selected"],
"layer0.texture": "//IMAGE TO USE AS BACKGROUND FOR TAB//",
"layer1.opacity": 0.0
}
But any of the "class": "tab_control" properties can be customized.