Issue
I would like to change the color scheme of the HTML file of the Angular Components in VS Code to match the following: What I want to see As you can see in this image the TypeScript functions and variables have different colors inside the quotation marks. This is what I currently have What I don't want
All my internet browsing is telling me to change the setting.json file, but I ended up just changing the color of the whole strings themselves like this: What I've changed Here's the code that I've tried so far
"editor.tokenColorCustomizations": {
"[Default Dark Modern]": {
"textMateRules": [
{
"scope": "string, punctuation.definition.string.begin, punctuation.definition.string.end",
"settings": {
"foreground": "#a9c45e",
"fontStyle": ""
}
}
]
}
},
Also, tried to use the vscode-angular-html extension as recommended in my internet browsing but I don't know how to use it and there are no good instructions to set it up correctly. I did try to add different hex colors in the HTML section of the extension settings but they didn't change the actual code color.
This is the setting.json file code structure after I ran the vscode-angular-html: Set legacy color customization command:
{
"salesforcedx-vscode-apex.java.home": "/Library/Java/JavaVirtualMachines/jdk-17.jdk/Contents/Home",
"git.autofetch": true,
"git.confirmSync": false,
"redhat.telemetry.enabled": true,
"git.enableSmartCommit": true,
"editor.minimap.enabled": false,
"workbench.editor.enablePreview": false,
"js/ts.implicitProjectConfig.experimentalDecorators": true,
"audioCues.*": "off",
"audioCues.volume": 0,
"editor.accessibilitySupport": "off",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnPaste": true
},
"files.associations": {
"*.page": "code-text-binary"
},
"[typescript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"editor.autoIndent": "brackets",
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "html-template.tag.html",
"settings": {
"foreground": "#569CD6"
}
},
{
"scope": "html-template.tag.custom",
"settings": {
"foreground": "#569CD6"
}
},
{
"scope": "html-template.ng.attribute.doctype",
"settings": {
"foreground": "#4EC9B0"
}
},
{
"scope": "html-template.ng.exclamation.doctype",
"settings": {
"foreground": "#C586C0"
}
},
{
"scope": "html-template.ng.doctype",
"settings": {
"foreground": "#D7BA7D"
}
},
{
"scope": "html-template.ng.entities.ampersand",
"settings": {
"foreground": "#C586C0"
}
},
{
"scope": "html-template.ng.entities.semicolon",
"settings": {
"foreground": "#C586C0"
}
},
{
"scope": "html-template.ng.attributes.generic",
"settings": {
"foreground": "#4EC9B0"
}
},
{
"scope": "html-template.ng.attributes.events",
"settings": {
"foreground": "#4EC9B0"
}
},
{
"scope": "punctuation.separator.key-value.html-template.ng",
"settings": {
"foreground": "#D7BA7D"
}
},
{
"scope": "html-template.ng.style.language.identifier",
"settings": {
"foreground": "#B5CEA8"
}
},
{
"scope": "html-template.ng.script.language.identifier",
"settings": {
"foreground": "#B5CEA8"
}
},
{
"scope": "html-template.ng.link.myme-type",
"settings": {
"foreground": "#B5CEA8"
}
},
{
"scope": "html-template.ng.aria-attribute.prefix",
"settings": {
"foreground": "#569CD6"
}
},
{
"scope": "html-template.ng.aria-attribute.suffix",
"settings": {
"foreground": "#4EC9B0"
}
},
{
"scope": "html-template.ng.data-attribute.prefix",
"settings": {
"foreground": "#B5CEA8"
}
},
{
"scope": "html-template.ng.data-attribute.suffix",
"settings": {
"foreground": "#4EC9B0"
}
},
{
"scope": "html-template.ng.interpolation.begin",
"settings": {
"foreground": "#D16969"
}
},
{
"scope": "html-template.ng.interpolation.end",
"settings": {
"foreground": "#D16969"
}
},
{
"scope": "html-template.ng.expression.operator.logical",
"settings": {
"foreground": "#C586C0"
}
},
{
"scope": "html-template.ng.expression.operator.compound",
"settings": {
"foreground": "#C586C0"
}
},
{
"scope": "html-template.ng.expression.operator.bitwise",
"settings": {
"foreground": "#C586C0"
}
},
{
"scope": "html-template.ng.expression.operator.comparison",
"settings": {
"foreground": "#C586C0"
}
},
{
"scope": "html-template.ng.expression.operator.relational",
"settings": {
"foreground": "#C586C0"
}
},
{
"scope": "html-template.ng.expression.operator.arithmetic",
"settings": {
"foreground": "#C586C0"
}
},
{
"scope": "html-template.ng.expression.operator.navigator",
"settings": {
"foreground": "#C586C0"
}
},
{
"scope": "entity.name.tag.html.ng",
"settings": {
"foreground": "#D7BA7D"
}
},
{
"scope": "html-template.ng.attributes.animationtrigger.prefix",
"settings": {
"foreground": "#D16969"
}
},
{
"scope": "html-template.ng.attributes.animationtrigger.variable",
"settings": {
"foreground": "#B5CEA8"
}
},
{
"scope": "punctuation.definition.ng-binding-name.begin.html",
"settings": {
"foreground": "#D16969"
}
},
{
"scope": "punctuation.definition.ng-binding-name.end.html",
"settings": {
"foreground": "#D16969"
}
},
{
"scope": "html-template.ng.attributes.event-handler",
"settings": {
"foreground": "#B5CEA8"
}
},
{
"scope": "html-template.ng.attributes.input-binding.animationTrigger.prefix",
"settings": {
"foreground": "#D7BA7D"
}
},
{
"scope": "html-template.ng.attributes.input-binding.first-level",
"settings": {
"foreground": "#B5CEA8"
}
},
{
"scope": "html-template.ng.attributes.input-binding.second-level",
"settings": {
"foreground": "#C586C0"
}
},
{
"scope": "html-template.ng.attributes.input-binding.third-level",
"settings": {
"foreground": "#D7BA7D"
}
},
{
"scope": "html-template.ng.attributes.prefix.let",
"settings": {
"foreground": "#569CD6"
}
},
{
"scope": "html-template.ng.attributes.prefix.ref",
"settings": {
"foreground": "#D16969"
}
},
{
"scope": "html-template.ng.attributes.suffix.name",
"settings": {
"foreground": "#4EC9B0"
}
},
{
"scope": "html-template.ng.attributes.suffix.rxjs",
"settings": {
"foreground": "#D7BA7D"
}
},
{
"scope": "html-template.ng.attributes.prefix.sugar",
"settings": {
"foreground": "#D16969"
}
},
{
"scope": "html-template.ng.attributes.suffix.sugar",
"settings": {
"foreground": "#B5CEA8"
}
},
{
"scope": "html-template.ng.attributes.template.prefix",
"settings": {
"foreground": "#D16969"
}
},
{
"scope": "html-template.ng.attributes.template.variable",
"settings": {
"foreground": "#B5CEA8"
}
},
{
"scope": "html-template.ng.control-flow.prefix",
"settings": {
"foreground": "#D16969"
}
},
{
"scope": "html-template.ng.control-flow.keyword",
"settings": {
"foreground": "#B5CEA8"
}
},
{
"scope": "entity.name.tag.html.primeng",
"settings": {
"foreground": "#D7BA7D"
}
},
{
"scope": "html-template.tag.svg",
"settings": {
"foreground": "#569CD6"
}
},
{
"scope": "html-template.ng.svg.path.commands",
"settings": {
"foreground": "#C586C0"
}
},
{
"scope": "html-template.ng.tag.colon",
"settings": {
"foreground": "#D16969"
}
},
{
"scope": "html-template.ng.tag.suffix",
"settings": {
"foreground": "#C586C0"
}
},
{
"scope": "html-template.ng.attributes.colon",
"settings": {
"foreground": "#D16969"
}
},
{
"scope": "html-template.ng.attributes.suffix",
"settings": {
"foreground": "#C586C0"
}
},
{
"scope": "html-template.ng.xmlStylesheet.language.identifier",
"settings": {
"foreground": "#B5CEA8"
}
},
{
"scope": "html-template.ng.exclamation.dtd",
"settings": {
"foreground": "#C586C0"
}
},
{
"scope": "html-template.ng.dtd",
"settings": {
"foreground": "#D7BA7D"
}
},
{
"scope": "html-template.ng.qualifier.dtd",
"settings": {
"foreground": "#569CD6"
}
},
{
"scope": "html-template.ng.occurrence.dtd",
"settings": {
"foreground": "#D16969"
}
}
]
},
"vscode-angular-html.angularBindingAttributeDelimiter": "#D16969",
"vscode-angular-html.angularAndAngularMaterialElementTags": "#D7BA7D",
"vscode-angular-html.angularAnimationTriggerPrefix": "#D16969",
"vscode-angular-html.angularAnimationTriggerVariableName": "#B5CEA8",
"vscode-angular-html.angularEventHandlerName": "#B5CEA8",
"vscode-angular-html.angularExpression": "#D16969",
"vscode-angular-html.angularExpressionOperatorsAndNavigatorsColor": "#C586C0",
"vscode-angular-html.angularOneWayBindingAnimationTriggerDecorator": "#D7BA7D",
"vscode-angular-html.angularOneWayBindingFirstLevelDepth": "#B5CEA8",
"vscode-angular-html.angularOneWayBindingSecondLevelDepth": "#C586C0",
"vscode-angular-html.angularOneWayBindingThirdLevelDepth": "#D7BA7D",
"vscode-angular-html.angularPrefixedAttributesLetPrefix": "#569CD6",
"vscode-angular-html.angularPrefixedAttributesRefPrefix": "#D16969",
"vscode-angular-html.angularPrefixedAttributesRxjsSuffix": "#D7BA7D",
"vscode-angular-html.angularPrefixedAttributesVariableName": "#4EC9B0",
"vscode-angular-html.angularSyntaxSugarAttributesName": "#B5CEA8",
"vscode-angular-html.angularSyntaxSugarAttributesPrefix": "#D16969",
"vscode-angular-html.angularTemplateVariableName": "#B5CEA8",
"vscode-angular-html.angularTemplateVariablePrefix": "#D16969",
"vscode-angular-html.controlFlowPrefix": "#D16969",
"vscode-angular-html.controlFlowKeyword": "#B5CEA8",
"vscode-angular-html.dtdDoctypeElement": "#D7BA7D",
"vscode-angular-html.dtdDoctypeExclamation": "#C586C0",
"vscode-angular-html.dtdDoctypeQualifier": "#569CD6",
"vscode-angular-html.dtdDoctypeQuantifier": "#D16969",
"vscode-angular-html.htmlAttributeValueSeparator": "#D7BA7D",
"vscode-angular-html.htmlCustomTags": "#569CD6",
"vscode-angular-html.htmlDoctypeAttributes": "#4EC9B0",
"vscode-angular-html.htmlDoctypeElement": "#D7BA7D",
"vscode-angular-html.htmlDoctypeExclamation": "#C586C0",
"vscode-angular-html.htmlEntitiesAmpersand": "#C586C0",
"vscode-angular-html.htmlEntitiesSemicolon": "#C586C0",
"vscode-angular-html.htmlEventsAttributes": "#4EC9B0",
"vscode-angular-html.htmlGenericAttributesFollowedByParameter": "#4EC9B0",
"vscode-angular-html.htmlScriptAttributesLanguageIdentifier": "#B5CEA8",
"vscode-angular-html.htmlLinkAttributesMimeType": "#B5CEA8",
"vscode-angular-html.htmlStyleAttributesLanguageIdentifier": "#B5CEA8",
"vscode-angular-html.htmlTags": "#569CD6",
"vscode-angular-html.primeNgElementTags": "#D7BA7D",
"vscode-angular-html.svgDAttributePathCommands": "#C586C0",
"vscode-angular-html.svgTags": "#569CD6",
"vscode-angular-html.ariaAttributePrefix": "#569CD6",
"vscode-angular-html.ariaAttributeSuffix": "#4EC9B0",
"vscode-angular-html.dataAttributePrefix": "#B5CEA8",
"vscode-angular-html.dataAttributeSuffix": "#4EC9B0",
"vscode-angular-html.xmlAttributeNamespaceDivider": "#D16969",
"vscode-angular-html.xmlAttributeNamespaceSuffix": "#C586C0",
"vscode-angular-html.xmlStylesheetAttributesLanguageIdentifier": "#B5CEA8",
"vscode-angular-html.xmlTagNamespaceDivider": "#D16969",
"vscode-angular-html.xmlTagNamespaceSuffix": "#C586C0",
"vscode-angular-html.colorCustomizations": true,
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"window.zoomLevel": 1,
"files.autoSave": "afterDelay",
"workbench.settings.applyToAllProfiles": [
"vscode-angular-html.angularBindingAttributeDelimiter"
],
"editor.semanticHighlighting.enabled": true
}
Solution
You should install Angular Language Service extension in your VS Code. This service does exactly what you need and much more.
Answered By - wnvko
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.