It's just underlining the matched brackets, Is it possible to make it more useful like changing brackets colour or highlighting the line of brackets?
You can change the color of the brackets modifying your theme's color scheme file.
Go to Preferences / Browse packages open folder Color Scheme - Default find out your current theme file (default's Monokai.tmTheme). Open it using Sublime Text and find the following part:
<key>bracketsForeground</key>
<string>#F8F8F2A5</string>
<key>bracketsOptions</key>
<string>underline</string>
<key>bracketContentsForeground</key>
<string>#F8F8F2A5</string>
<key>bracketContentsOptions</key>
<string>underline</string>
Here you can change the appearance of your brackets. If you change it to something like this:
<key>bracketsForeground</key>
<string>#FF8000</string>
<key>bracketsOptions</key>
<string>foreground</string>
<key>bracketContentsForeground</key>
<string>#FF8000</string>
<key>bracketContentsOptions</key>
<string>foreground</string>
..you'll remove the underline and add an orange color to your brackets.
Take a look to the rest of the file because (maybe) you'll find something more to change ;)
There's no need to restart sublime to see the changes. Just save the file.
Update for Sublime Text3
Go to your Sublime Text 3 installation folder; cd into "Packages" folder. Search for Color Scheme - Default.sublime-package and copy-paste it into your Packages folder (under windows is %APPDATA%\Sublime Text 3\Packages).
Decompress the file (with any unzip tool).
Access the new generated folder and modify your theme's file (same steps as in Sublime Text 2).
After applying your changes save the file and you'll see your changes.
If you want, you can compress again the file as zip using .sublime-package extension but if you do so you must move that file to Installed Packages folder.
Update 2
There's a very usefull package for editing plugins named PackageResourceViewer. It allows you to edit packages very easily, doing all the decompress & move stuff for you.
there is plugin BracketHighlighter
features:
Customizable highlighting of brackets (),[],<>,{}
Customizable highlighting of Tags (supports unary tags and supports self closing /> (HTML5 coming))
Customizable highlighting of quotes
Selectively disable or enable specific matching of tags, brackets, or quotes
Selectively whitelist or blacklist matching of specific tags, brackets, or quotes based on language
When using on demand shortcut, show line count and char count between match in the status bar
Shortcuts for moving cursor to beginning or end of bracketed content (will focus on beginning or end bracket if not currently multi-selecting)
Shortcut for selecting all of the bracketed content
and others, see the github site.
Bracket color & other visibility preferences can be modified without the use of a plugin. Below is a method for implementing such changes natively.
Note:
I recently drafted this answer # the SublimeText Forum. There is a similar (unaccepted) answer here, but I have included some unmentioned details & visual reference.
EXAMPLE
This is my personal configuration:
SETTINGS
Below are all of my visibility related settings.
As you can see in the examples: brackets settings dictate the color of bracket pairs if a caret is placed ON a bracket, whereas bracketContents settings dictate the color of bracket pairs if a caret is placed WITHIN a set of brackets.
My bracketContentsOptions is set to underline, but you can change it to foreground if you want it to be highlighted during both instances.
# Preferences.sublime-settings
"always_show_minimap_viewport" : true,
"caret_extra_bottom" : 3,
"caret_extra_top" : 3,
"caret_extra_width" : 1,
"caret_style" : "phase",
"draw_minimap_border" : true,
"fade_fold_buttons" : false,
"fold_buttons" : true,
"highlight_line" : true,
"highlight_modified_tabs" : true,
"line_numbers" : true,
"match_brackets" : true,
"match_brackets_angle" : true,
"match_brackets_braces" : true,
"match_brackets_content" : true,
"match_brackets_square" : true,
"match_selection" : true,
"match_tags" : true,
"overlay_scroll_bars" : "enabled",
# YourColorScheme.tmTheme
<!-- Indent Guides -->
<key>guide</key>
<string>#14191F</string>
<key>stackGuide</key>
<string>#14191F</string>
<key>activeGuide</key>
<string>#2E4589</string>
<!-- Highlighted Brackets -->
<key>bracketsForeground</key>
<string>#D80E64</string>
<key>bracketsOptions</key>
<string>foreground</string>
<key>bracketContentsForeground</key>
<string>#D80E64</string>
<key>bracketContentsOptions</key>
<string>underline</string>
<!-- Document Selection -->
<key>caret</key>
<string>#D80E64</string>
<key>lineHighlight</key>
<string>#121522</string>
<key>selection</key>
<string>#1D416B</string>
<key>selectionForeground</key>
<string>#bbccff</string>
<key>selectionBorder</key>
<string>#4D71FF</string>
<key>inactiveSelection</key>
<string>#1D416B</string>
<key>inactiveSelectionForeground</key>
<string>#bbccff</string>
<!-- Search Results -->
<key>findHighlight</key>
<string>#0BD0AC</string>
<key>findHighlightForeground</key>
<string>#000000</string>
With BracketHighlighter package, edit your theme (tmTheme), and add:
<dict>
<key>name</key>
<string>Tag</string>
<key>scope</key>
<string>brackethighlighter.default</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#ffff00</string>
</dict>
</dict>
<dict>
<key>name</key>
<string>Tag</string>
<key>scope</key>
<string>meta.tag, declaration.tag</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#0033CC</string>
</dict>
</dict>
This changes bracket colors in sb3
USE Rainbowth package
How to install in Sublime Text ?
GoTo Sublime Text and press ctrl+shift+p search tab will open
Search for Install Package and enter Rainbowth
After installing package GoTO Preferences > BrowsePackages
GoTo User directory and create a new file "Rainbowth.sublime-settings"
Paste the below config into same file: "Rainbowth.sublime-settings"
##########################################################
{
"languages":
[
"c++",
"c",
"python",
"lisp",
"scheme",
"clojure",
"clojurescript",
"hylang",
"js",
"sass",
"scss"
],
"palettes":
{
"default":
[
"#0E4A8E",
"#3F9101",
"#BCBF01",
"#BC0BA2",
"#61AA0D",
"#3D017A",
"#D6A60A",
"#7710A3",
"#A502CE",
"#eb5a00"
],
"Dracula":
[
"#E8BA36",
"#54A857",
"#359FF4",
"#5060BB",
"#179387",
"#A5BE00",
"#005FA3",
"#DB7100",
"#FFC666",
"#38FF91"
],
"One Dark":
[
"#359FF4",
"#E8BA36",
"#54A857",
"#5060BB",
"#179387",
"#A5BE00",
"#005FA3",
"#DB7100",
"#FFC666",
"#38FF91"
]
},
"disable_inside_comment": true,
"disable_inside_string": true,
"custom_signs":
{
"enabled": true,
"prefix": "({[",
"suffix": ")}]"
}
}
Related
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"
],
},
]
}
How do I ignore this error. I have used the id attribute for some tags in order to reference them by id in javascript, but it shows this error:
CSS id selector '...' not found.
Please tell me how to ignore or disable this error.
maybe your css is not formatted properly.
try:
<style>
#phone {
your css here;
}
</style>
You need to make sure you mark the code with # to show that it's an id and not a class or something else.
Update: First section of answer no longer valid as of the lastest updates since original post which removed the css.validation option. see
If you are using the HTML CSS Support extension by ecmel, you can go to .vscode/settings.json and add
"css.validation": {
"id": false,
"class": false
}
This will turn off css validation for class name and id.
More information on this at the Visual Studio MarketPlace for this extension under Selector Validation here or the Github repository readme Selector Validation Section
Note:
1) Also don't forget to add a comma after the setting that comes before (as JSON format is comma separated).
Example:
{
"java.codeGeneration.generateComments": true,
"css.styleSheets": [
// (1)
"https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css",
"src/main/resources/static/css/styles.css"
],
"css.validation": {
"id": false,
"class": true
}
}
Sometimes you need to restart / close and reopen vscode after saving changed to the file for them take effect.
There is a way to configure styleSheets. This next bit is taken from their documentation see Additional Styles Section:
Additional Style Sheets
If it is not possible to specify local or remote styles in HTML or via
template inheritance, they can be specified in VS Code settings per
workspace folder in .vscode/settings.json and will suggest for all
HTML files within that workspace folder:
.vscode/settings.json
"css.styleSheets": [
// (1)
"https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css",
// (2)
"/site.css",
// (3)
"site.css",
// (4)
"./site.css"
]
What changes are needed to modify tag matching in Sublime 3, Build 3143, from an underline to background color. Much of the documentation I have been able to find online seems either out of date or incomplete. Below is an example of the desired effect.
Core Sublime only matches brackets and tags with a dotted underline, and as far as I'm aware it's not possible to visually modify the style in the general case.
To get around that, you can use the BracketHighlighter package to do what you want. Once you've installed it, you will need to configure it to your liking, for which you should check out the documentation.
Briefly, in order to get it to do something like what you've outlined above, you want to select Preferences > Package Settings > BracketHighlighter > Bracket Settings from the menu (Preferences is under Sublime Text if you're on MacOS) and then add the following to the default settings:
"user_bracket_styles": {
"tag": {
"icon": "tag",
"color": "region.purplish",
"style": "solid"
},
}
Note that region.purplish as a potential scope name was added in Sublime build 3148, so for build 3143 you will need to select a scope name that is colored the way that you want in whatever color scheme you're using. For example, if you're using the Monokai color scheme, the scope constant.language looks purple.
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.
I'm a long time Sublime Text user but I recently downloaded WebStorm 6 (6.0.2) and I really like it but I haven't been able to find a plugin that matches Sublime's Alignment Plugin that re-formats my code which I use extensively (yes, I'm slightly fanatical about my code formatting).
For example, in Sublime I can take this code block:
user : {
name : "Bruce Wayne",
alias : "Batman",
favColour : "black",
dob : "unknown"
}
And after using the Alignment keyboard shortcut it becomes:
user : {
name : "Bruce Wayne",
alias : "Batman",
favColour : "black",
dob : "unknown"
}
I've looked into the "Reformat Code" option (Code > Reformat Code...) but in this case it doesn't do anything to the formatting as Webstorm believes that it's already correctly formatted, which is in fact entirely correct, just not to my personal standards.
So my question is: is there a (fairly) easy way to accomplish this or is there a plugin that you know of available for WebStorm that offers the same/similar functionality?
Thanks in advance!
Code formatting settings are configured at Settings (Preferences on Mac) | Code Style | JavaScript. The Reformat Code is just a command that reformats selection/file accordingly to those rules.
The Code Style for JavaScript has an option to make such alignment:
"Spaces" tab | Other | Before property name-value separator ':' -- ticked
"Other" tab | Align object properties = On colon