How to activate?

[shakyamoksha]

Hello, I have been looking everywhere for this type of extension that does html coloring like jetbrains webstorm does.

However, I have installed the EXT and ran the command in the palette, but there's no changes in the html files.

[deniszholob]

@shakyamoksha

However, I have installed the EXT and ran the command in the palette, but there's no changes in the html files.

Excecuting this command as per the docs did it for me

Press Ctrl + Shift + P Then Paste vscode-angular-html: Set legacy color customizations

This will add a bunch of color config to your settings.json Press Ctrl + Shift + P Then Paste Preferences: Open User Settings (JSON)

[shakyamoksha]

@deniszholob thank you but I've tried the exact above, but there are no changes in my html files unfortunately.

If it helps here is my settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "prettier.singleQuote": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "editor.snippetSuggestions": "top",
  "vscode-pets.petColor": "green",
  "vscode-pets.petType": "totoro",
  "vscode-pets.position": "explorer",
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",
  "workbench.iconTheme": "material-icon-theme",
  "vscode-edge-devtools.mirrorEdits": true,
  "[python]": {
    "editor.defaultFormatter": null,
    "editor.formatOnType": true
  },
  "python.formatting.blackArgs": ["--line-length", "120"],
  "python.formatting.provider": "black",
  "bracket-pair-colorizer-2.depreciation-notice": false,
  "terminal.integrated.defaultProfile.windows": "Git Bash",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "diffEditor.renderSideBySide": false,
  "npm.keybindingsChangedWarningShown": true,
  "editor.acceptSuggestionOnCommitCharacter": true,
  "editor.acceptSuggestionOnEnter": "smart",
  "editor.cursorWidth": 3,
  "editor.fontLigatures": true,
  "editor.fontWeight": "400",
  "editor.inlineSuggest.enabled": true,
  "editor.parameterHints.enabled": true,
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
  "editor.quickSuggestionsDelay": 3,
  "editor.renderControlCharacters": true,
  "editor.suggest.preview": true,
  "editor.suggest.showStatusBar": true,
  "editor.suggestOnTriggerCharacters": true,
  "editor.suggestSelection": "first",
  "editor.tabCompletion": "on",
  "editor.wordBasedSuggestions": true,
  "vscode-pets.petSize": "medium",
  "workbench.colorTheme": "Visual Studio Dark",
  "files.autoSave": "afterDelay",
  "boot-java.rewrite.reconcile": true,
  "vscode-angular-html.angularAnimationTriggerPrefix": "#D16969",
  "vscode-angular-html.angularBindingAttributeDelimiter": "#D16969",
  "vscode-angular-html.angularExpression": "#D16969",
  "vscode-angular-html.angularPrefixedAttributesRefPrefix": "#D16969",
  "vscode-angular-html.angularSyntaxSugarAttributesPrefix": "#D16969",
  "vscode-angular-html.angularTemplateVariablePrefix": "#D16969",
  "vscode-angular-html.colorCustomizations": true,
  "vscode-angular-html.dtdDoctypeQuantifier": "#D16969",
  "vscode-angular-html.xmlAttributeNamespaceDivider": "#D16969",
  "vscode-angular-html.xmlTagNamespaceDivider": "#D16969",
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "html-template.ng.interpolation.begin",
        "settings": {
          "foreground": "#D16969"
        }
      },
      {
        "scope": "html-template.ng.interpolation.end",
        "settings": {
          "foreground": "#D16969"
        }
      },
      {
        "scope": "html-template.ng.attributes.animationtrigger.prefix",
        "settings": {
          "foreground": "#D16969"
        }
      },
      {
        "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.prefix.ref",
        "settings": {
          "foreground": "#D16969"
        }
      },
      {
        "scope": "html-template.ng.attributes.prefix.sugar",
        "settings": {
          "foreground": "#D16969"
        }
      },
      {
        "scope": "html-template.ng.attributes.template.prefix",
        "settings": {
          "foreground": "#D16969"
        }
      },
      {
        "scope": "html-template.ng.tag.colon",
        "settings": {
          "foreground": "#D16969"
        }
      },
      {
        "scope": "html-template.ng.attributes.colon",
        "settings": {
          "foreground": "#D16969"
        }
      },
      {
        "scope": "html-template.ng.occurrence.dtd",
        "settings": {
          "foreground": "#D16969"
        }
      }
    ]
  }
}

[ghaschel]

I apologize for the delay in answering this.

That command should be enough to activate it. That said: Sometimes, when you have a linter or a formatted installed it gets stuck saving settings.json due a formatter/linter cycle.

If nothing said helps, please, let me know the list of installed extensions and what theme you're using.

To fetch the installed extensions list:

• Unix:

  code --list-extensions | xargs -L 1 echo code --install-extension

• Windows (PowerShell, e. g. using Visual Studio Code’s integrated Terminal):

  code --list-extensions | % { "code --install-extension $_" }

[shakyamoksha]

hi @ghaschel, thank you for your time responding this thread,

Here is a list of the extensions installed in my VS CODE:

code --install-extension Angular.ng-template code --install-extension batisteo.vscode-django code --install-extension christian-kohler.npm-intellisense
code --install-extension christian-kohler.path-intellisense
code --install-extension dbaeumer.vscode-eslint code --install-extension donjayamanne.githistory code --install-extension donjayamanne.python-environment-manager code --install-extension donjayamanne.python-extension-pack
code --install-extension dsznajder.es7-react-js-snippets
code --install-extension EditorConfig.EditorConfig code --install-extension eg2.vscode-npm-script code --install-extension esbenp.prettier-vscode code --install-extension formulahendry.auto-close-tag code --install-extension formulahendry.auto-rename-tag code --install-extension ghaschel.vscode-angular-html code --install-extension GitHub.github-vscode-theme code --install-extension IBM.output-colorizer code --install-extension infeng.vscode-react-typescript code --install-extension jasonnutter.search-node-modules code --install-extension jawandarajbir.react-vscode-extension-pack code --install-extension johnpapa.Angular2 code --install-extension johnpapa.vscode-peacock code --install-extension johnpapa.winteriscoming code --install-extension KevinRose.vsc-python-indent code --install-extension mhutchie.git-graph code --install-extension MichaellAlavedraMunayco.angular-theme code --install-extension ms-azuretools.vscode-docker code --install-extension ms-python.isort code --install-extension ms-python.python code --install-extension ms-python.vscode-pylance code --install-extension ms-toolsai.jupyter code --install-extension ms-toolsai.jupyter-keymap code --install-extension ms-toolsai.jupyter-renderers code --install-extension ms-toolsai.vscode-jupyter-cell-tags code --install-extension ms-toolsai.vscode-jupyter-slideshow code --install-extension ms-vscode.notepadplusplus-keybindings code --install-extension ms-vscode.vscode-typescript-tslint-plugin code --install-extension naumovs.color-highlight code --install-extension njpwerner.autodocstring code --install-extension oderwat.indent-rainbow code --install-extension PKief.material-icon-theme code --install-extension pranaygp.vscode-css-peek code --install-extension redhat.java code --install-extension ritwickdey.LiveServer code --install-extension rokoroku.vscode-theme-darcula code --install-extension steoates.autoimport code --install-extension styled-components.vscode-styled-components code --install-extension tonybaloney.vscode-pets code --install-extension VisualStudioExptTeam.intellicode-api-usage-examples code --install-extension VisualStudioExptTeam.vscodeintellicode code --install-extension vmware.vscode-boot-dev-pack code --install-extension vmware.vscode-spring-boot code --install-extension vscjava.vscode-java-debug code --install-extension vscjava.vscode-java-dependency code --install-extension vscjava.vscode-java-pack code --install-extension vscjava.vscode-java-test code --install-extension vscjava.vscode-maven code --install-extension vscjava.vscode-spring-boot-dashboard code --install-extension vscjava.vscode-spring-initializr code --install-extension waderyan.gitblame code --install-extension wholroyd.jinja code --install-extension xabikos.JavaScriptSnippets code --install-extension xabikos.ReactSnippets code --install-extension zhuangtongfa.material-theme

[ghaschel]

Based off of your extensions I ran some tests and the extension is in fact working as it should.

That said: I found the issue with your scenario.

This is what was shown previously:

Inspecting the textmate scopes I realized that there was an extension overriding the HTML highlighting grammar:

Jinja is the one to blame.

I did disabled the extension and it started working as it should:

Let me know if I can assist you in anything else =)

[shakyamoksha]

@ghaschel Awesome, this fixed my issue!! Recommending this to my team now.

Thank you a lot for this extension and the support!

[fMoro1999]

Based off of your extensions I ran some tests and the extension is in fact working as it should.

That said: I found the issue with your scenario.

This is what was shown previously:

Inspecting the textmate scopes I realized that there was an extension overriding the HTML highlighting grammar:

Jinja is the one to blame.

I did disabled the extension and it started working as it should:

Let me know if I can assist you in anything else =)

@ghaschel, thank you very much!! You have just saved me hours of research

[ghaschel]

@fMoro1999 Hey, I'm glad I could help! 😄