Is it possible to have stylelint detect when I have a typo in a named color? Like detecting that color: pruple is wrong, the real color name being purple.
So far I can only find rules for forcing all colors to be hex/alpha/named, but no check to validate the actual named values.
Is it possible to have stylelint detect when I have a typo in a named color?
Yes, by using the csstree-validator plugin. It will validate the property-value pairs of declarations, including those where the value can contain <color> types.
{
"plugins": [
"stylelint-csstree-validator"
],
"rules": {
"csstree/validator": true
}
}
Related
I really like the V.S. Code theme, Abyss. On occasion I find that the theme makes my code difficult to read, the text rendered in the editor will look like it is blending into the background, therefore; I thought changing individual syntax color would be a good solution.
I want to be able to adjust a couple of color-tokens, while leaving the rest of the syntax unchanged. How can I select, and change the properties of color tokens, without impacting any other parts of the theme that's currently set in the editor?
I want to use the code syntax color of the GitHub dark default theme with the Abyss theme on the rest of UI.
I found a site (click to see) that suggests changing the syntax colors with the editor.tokenColorCustomizations property.
I am not able to understand that how can I copy the color configuration from GiHub dark default to the Abyss theme.
V.S. Code users have the ability to style the syntax that is displayed in the editor, as well as the ability to style the editor its self — this includes the workbench, and all off the items in the workbench. To start styling the workbench, or syntax in the editor, you must first add the following JSON properties to either your user-scoped settings.json file, or by adding it to a workspace-scoped settings.json.
"workbench.colorCustomizations":{ /* properties here */ }
"editor.tokenColorCustomizations":[ /* properties here */ ]
Example of a properly configured settings.json file:
// "./.vscode/settings.json"
{
"workbench.colorCustomizations": {
"editor.background": "#08182F",
"sideBar.background": "#00132D",
"panel.background": "#00132D",
"activityBar.background": "#002040",
"editorGroupHeader.tabsBackground": "#00132D",
"tab.inactiveBackground": "#00132D",
"tab.activeBackground": "#003054",
"tab.activeBorder": "#003054",
"breadcrumb.background": "#003054",
"statusBar.background": "#005280",
"sideBar.border": "#103050",
"titleBar.border": "#103050",
"statusBar.border": "#103050",
"menu.border": "#103050",
"contrastBorder": "#103050",
"panel.border": "#103050",
"editorRuler.foreground": "#103050",
"tab.border": "#103050",
"tab.lastPinnedBorder": "#103050",
"activityBar.border": "#103050",
},
"editor.tokenColorCustomizations": [
{
"scope": "punctuation",
"settings": {
"foreground": "#C4C4C4",
"fontStyle": ""
}
},
{
"scope": "comment",
"settings": {
"foreground": "#246488",
"fontStyle": ""
}
},
{
"scope": "string",
"settings": {
"foreground": "#98DAF4",
"fontStyle": ""
}
},
]
}
There are many more properties that can be used to style your editor and syntax. A good resource to refer to is this template, its from the YO CODE generator, and it is what several theme designers use as a starting point when creating a new theme.
Theme Template (e.g. you don't have to make a theme to use the properties).
The most useful tool at your disposal is when writing theme properties — just like in the example above — is VSCodes suggestion widget. The suggestion widget is most often used to auto complete code, however, its usefulness extends much further than finishing a line of text for you. If you type, "background", while you are focused inside of one of the colors, or tokenColors, properties a whole list of available background properties will be available to choose from, and you are not limited to just background properties, the suggestion widget will work for finding borders, foregrounds, icons, buttons, inputs, bars, highlights and a whole lot more
Perhaps the best resource to read would be the VSCode Contributed Page on Color-Themes
EDIT: If you download the GitHub theme, you can find the theme's JSON file, which is the source code for the "Dark GitHub Theme" in the following location:
$HOME/.vscode/extensions/github.github-vscode-theme-4.1.1/themes/dark.json
When ever you have a theme's source JSON Document, you can copy and paste individual properties from the theme you located, into your ./.vscode/settings.json file using the properties:
"workbench.colorCustomizations":{ /* properties here */ }
"editor.tokenColorCustomizations":[ /* properties here */ ]
NOTE: It takes some practice, and some reading to get good at creating themes, or even just configuring your current theme to customize it a bit like your doing now.
ADDITIONAL HELP
I think it might help if I explain what it is your doing.
The workspace settings.json file, located in the root of each project...
"./.vscode/settings.json"
...takes precedence over all other configuration files, therefore, when a setting, or property is being configured in two files, and one of the files is "./.vscode/settings.json" then the configuration set inside "./.vscode/settings.json" will win-out the configuration in the other file, because "./.vscode/settings.json" overrides any configurations it holds, that are also held somewhere else. (I Hope that makes sense)...
Next to the workspace "settings.json" file, is the users settings.json file, which is located at:
"$HOME/.config/Code/User/settings.json"
So basically all you need to know at this point is your settings.json files are the word of the land, everything else is overridden. This is very important, because when you use the settings.json files to set color-token properties to highlight some syntax that is being colored by a theme, and your recoloring it because you don't like it, what you are doing, is overriding the theme's JSON file located in the themes extension directory # $HOME/.vscode/extensions. If you don't set a property in a valid settings.json file, then the property will remain unchanged. This lets you select and choose which properties to change, by overriding the properties you don't like. And as I have stated in the comments and above, these are the properties you will use to preform the overrides.
"colors":{ /* properties here */ }
"tokenColors":[ /* properties here */ ]
Rather than trying to copy and paste entire themes, just try to change a single element. Once you succeed at changing one element, then you can try changing several in unison.
ctrl+shift+p =>preferences:color theme==> select Dark+(default dark)
I'm new to Stylelint and I see that it has a rule to identify unknown CSS units.
I can't find a rule that warns about the use of unknown values.
for example:
align-items: wrongValue;
See attached
Screenshoot that shows Stylint warns me about wrong CSS unit type but not on wrong CSS value
Does Stylelint have such a rule?
If not, what can I do to prevent these potential errors?
I don't know if there are defaults, but it looks like you can customize what are acceptable values using the declaration-property-value-allowed-list in your stylelint configuration file.
https://stylelint.io/user-guide/rules/list/declaration-property-value-allowed-list
Something like this would only allow use of stretch or center:
{
"align-items": ["stretch","center"]
}
CSSTree has a built-in lexer that can test CSS against syntaxes defined by W3C.
It can be used within stylelint using the stylelint-csstree-validator plugin:
// .stylelintrc.js
{
"plugins": [
"stylelint-csstree-validator"
],
"rules": {
"csstree/validator": true
}
}
I would like to know how to tweak my VSCode theme (One Dark Pro), a theme with semantic highlighting.
I cannot override some of its semantic token types.
With most themes I would write this in settings.json:
{
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"name": "Javascript - Variable/object",
"scope": [
"variable.other.object.js"
],
"settings": {
"foreground": "#c7452e",
"fontStyle": "bold italic"
}
}
]
}
}
But with this theme (and also other ones with semantic opinion) I cannot override it, as if I needed to use !important in CSS.
So this is the result of my token and scope inspection after my rule.
As you can see, my settings are indeed read but are apparently not 'specific' enough as to beat the semantic interpretation or overridden by it, and are disregarded (last three lines) and instead the modifying semantic token type takes prevalence.
Is there a way to do this per individual textmate scope (i.e. without losing the rest of the semantics of that wonderful theme) like if I just want to change the color of that particular item?
So when syntax is highlighted by a theme, settings.json files have priority over the syntax highlighting implemented by your set theme, however, if you activate semantic highlighting, then the theme highlights your syntax, your settings.json file takes priority & overrides the theme, and then the language server has priority over the theme and over the local user, & workspace, settings.json files. So in other words, you can't override the token because the token is being overridden already by a scope that has higher priority than your configuration file. Now with that said, if you don't like it, just turn Semantic highlighting off (code snippet below shows the configuration for turning off semantic highlighting).
/** #file "./.vscode/settings.json" */
{
"editor.semanticHighlighting.enabled": false
}
For colour customisation of any theme in VSCode we do it like this
"workbench.colorCustomizations": {
"[Night Owl No Italics]": {
"activityBar.background": "#000C1D",
"activityBar.border": "#102a44",
"sideBar.background": "#001122",
"sideBar.border": "#102a44",
"sideBar.foreground": "#8BADC1"
},
How to add multiple name in the theme may be like [Night Owl, Night Owl No Italics] (This doesn't work). I don't want to repeat and define the same properties twice for two different themes. Is there any way to do this?
This is not supported as of VS Code 1.33. You have to either:
Duplicate the color customization for each theme
Set the color customization globally so that it applies to all themes
Please file a feature request if you would to see your proposal supported
Coming in vscode v1.59:
There is new syntax to customize multiple themes at once:
"workbench.colorCustomizations": {
"[Abyss][Red]": {
"activityBar.background": "#ff0000"
},
"[Monokai*]": {
"activityBar.background": "#ff0000"
}
} ```
Multiple themes can be listed as well as the * wildcard character can be used at the beginning and the end of the name.
from https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_59.md#extended-theme-customisation-syntax
in VS Code does anyone know how to change the color theme for variable names for C++. I can change the colors for functions, comments, keywords, but I can't get variables to work. Any help would be great Thanks.
This has changed since the original answer was posted and it is now outdated.
As #alex-myers mentioned in the comments, you can use TextMate to target intellisense tokens.
For example:
"editor.tokenColorCustomizations": {
"[Visual Studio Dark]": {
"textMateRules": [
{
"scope": "variable.other.local",
"settings": {
"foreground": "#FF0000",
}
}
]
}
}
See: https://code.visualstudio.com/docs/cpp/colorization-cpp
UPDATE: this is now possible with the C++ extension. Upvote #TheBat's answer since he originally posted the update. The scope is variable.other.local and his answer shows what to add to your settings file.
NOTE: the answer below is still accurate if you do not have the extension
I'm the maintainer of the VS Code C++ Syntax, and sadly there is not yet a way to change the color of all C++ variables, the Python syntax is the same way. You can change the color of source.cpp which will change the default color, and you can change the color of some existing variables with variable and variable.parameter, but this will still not affect many of the untagged variables.
We're working on changing this, but it is going to take quite awhile.
For general scope names, look at https://macromates.com/manual/en/language_grammars#naming-conventions
You can edit the corresponding theme *.json file. For example, if you are using the Dark+ (default dark) theme, you can find the theme json file at extensions/theme-defaults/themes/dark_plus.json. In this file we find the following text mate theme rule:
{
"name": "Variable and parameter name",
"scope": [
"variable",
"meta.definition.variable.name",
"support.variable",
"entity.name.variable"
],
"settings": {
"foreground": "#9CDCFE"
}
}
Please note that some themes do not define styling for the variable scope so you would have to add your own (like the above snippet). Also not all styles of variable naming are defined in the c++ grammar file. For more details on how to add your specific naming style grammar you can see this answer.