[Aura Components] extension from Salesforce conflicts with this

[MingTang-gd]

Just leaving this information here in case others encounter problems like mine. I’ve already spent about two days on this.

The [Aura Components] extension from Salesforce conflicts this extension in html page, it will erase your setting and make it like the original html.

Yeah, not sure is this help you.

One more word, is there a shared or recommended color setting, or an official setting, for people who don’t have a strong artistic sense?

[ghaschel]

Can you provide me the extension URL so that I can look into it and see if there's something I can do to avoid this? I had someone else once report the same problem, and it was indeed caused by the SalesForce extension. I remember it was something in the sense of: It overrides the existing HTML language definition instead of extending it.

And answering your question, yes there is. Just run "Set custom colors customizations" command in the command pallete. (Close all open settings tab or settings json file before)

[MingTang-gd]

Sure, here it is the Aura Components extension link:

https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode-lightning

And about the command "Set custom colors customizations", after I run it, the html didn't present as expected,

the colors all set '', the angular expression variable with new syntax symbol '@' all white,

My setting.json file after called command "Set custom colors customizations",

{ 
  "workbench.iconTheme": "material-icon-theme", 
  "workbench.productIconTheme": "emoji-product-icons-fun", 
  "editor.fontSize": 16,
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "aurahelper.api.useAuraHelperCLI": true,
  "workbench.editor.wrapTabs": true,
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "files.associations": {
    "*.resource": "javascript",
    "*.component": "html"
  },
  "prettier.documentSelectors": [
    "**/*.page",
    "**/*.component"
  ],
  "[visualforce]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "Codegeex.Privacy": false,
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "explorer.confirmDragAndDrop": false,
  "security.workspace.trust.untrustedFiles": "open",
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "files.autoSave": "afterDelay",
  "workbench.settings.applyToAllProfiles": [
    "vscode-angular-html.angularBindingAttributeDelimiter"
  ],
  "explorer.confirmDelete": false,
  "htmlhint.options": {
    "doctype-first": false
  },
  "workbench.colorTheme": "Mayukai Mirage Gruvbox Darktooth",
  "prettier.printWidth": 800,
  "colorize.languages": [
    "html",
    "css",
    "sass",
    "scss",
    "less",
    "postcss",
    "sss",
    "stylus",
    "xml",
    "svg"
  ],
  "git.enableSmartCommit": true,
  "vscode-angular-html.angularAnimationTriggerPrefix": "#8EC07C",
  "vscode-angular-html.angularBindingAttributeDelimiter": "#8EC07C",
  "vscode-angular-html.angularExpression": "#8EC07C",
  "vscode-angular-html.angularPrefixedAttributesRefPrefix": "#8EC07C",
  "vscode-angular-html.angularSyntaxSugarAttributesPrefix": "#8EC07C",
  "vscode-angular-html.angularTemplateVariablePrefix": "#8EC07C",
  "vscode-angular-html.colorCustomizations": true,
  "vscode-angular-html.dtdDoctypeQuantifier": "#8EC07C",
  "vscode-angular-html.xmlAttributeNamespaceDivider": "#8EC07C",
  "vscode-angular-html.xmlTagNamespaceDivider": "#8EC07C",
  "vscode-angular-html.controlFlowPrefix": "#8EC07C",
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "html-template.ng.interpolation.begin",
        "settings": {
          "foreground": "#8EC07C"
        }
      },
      {
        "scope": "html-template.ng.interpolation.end",
        "settings": {
          "foreground": "#8EC07C"
        }
      },
      {
        "scope": "html-template.ng.attributes.animationtrigger.prefix",
        "settings": {
          "foreground": "#8EC07C"
        }
      },
      {
        "scope": "punctuation.definition.ng-binding-name.begin.html",
        "settings": {
          "foreground": "#8EC07C"
        }
      },
      {
        "scope": "punctuation.definition.ng-binding-name.end.html",
        "settings": {
          "foreground": "#8EC07C"
        }
      },
      {
        "scope": "html-template.ng.attributes.prefix.ref",
        "settings": {
          "foreground": "#8EC07C"
        }
      },
      {
        "scope": "html-template.ng.attributes.prefix.sugar",
        "settings": {
          "foreground": "#8EC07C"
        }
      },
      {
        "scope": "html-template.ng.attributes.template.prefix",
        "settings": {
          "foreground": "#8EC07C"
        }
      },
      {
        "scope": "html-template.ng.control-flow.prefix",
        "settings": {
          "foreground": "#8EC07C"
        }
      },
      {
        "scope": "html-template.ng.tag.colon",
        "settings": {
          "foreground": "#8EC07C"
        }
      },
      {
        "scope": "html-template.ng.attributes.colon",
        "settings": {
          "foreground": "#8EC07C"
        }
      },
      {
        "scope": "html-template.ng.occurrence.dtd",
        "settings": {
          "foreground": "#8EC07C"
        }
      }
    ]
  }
}

My extension list output after called code --list-extensions | % { "code --install-extension $_" },

code --install-extension aaravb.chrome-extension-developer-tools
code --install-extension adriandoescoding.http
code --install-extension aminer.codegeex
code --install-extension angular.ng-template
code --install-extension christian-kohler.npm-intellisense
code --install-extension chuckjonas.apex-pmd
code --install-extension dbaeumer.vscode-eslint
code --install-extension eamodio.gitlens
code --install-extension esbenp.prettier-vscode
code --install-extension financialforce.lana
code --install-extension formulahendry.auto-close-tag
code --install-extension formulahendry.auto-complete-tag
code --install-extension formulahendry.auto-rename-tag
code --install-extension ghaschel.vscode-angular-html
code --install-extension gulajavaministudio.mayukaithemevsc
code --install-extension htmlhint.vscode-htmlhint
code --install-extension humao.rest-client
code --install-extension johnpapa.angular2
code --install-extension kamikillerto.vscode-colorize
code --install-extension kanko.aura-helper
code --install-extension mightbesimon.emoji-icons
code --install-extension ms-dotnettools.csdevkit
code --install-extension ms-dotnettools.csharp
code --install-extension ms-dotnettools.vscode-dotnet-runtime
code --install-extension pkief.material-icon-theme
code --install-extension redhat.vscode-xml
code --install-extension salesforce.salesforce-vscode-slds
code --install-extension salesforce.salesforcedx-einstein-gpt
code --install-extension salesforce.salesforcedx-vscode
code --install-extension salesforce.salesforcedx-vscode-apex
code --install-extension salesforce.salesforcedx-vscode-apex-debugger
code --install-extension salesforce.salesforcedx-vscode-apex-replay-debugger
code --install-extension salesforce.salesforcedx-vscode-core
code --install-extension salesforce.salesforcedx-vscode-expanded
code --install-extension salesforce.salesforcedx-vscode-lightning
code --install-extension salesforce.salesforcedx-vscode-lwc
code --install-extension salesforce.salesforcedx-vscode-soql
code --install-extension salesforce.salesforcedx-vscode-visualforce
code --install-extension salesforce.sfdx-code-analyzer-vscode
code --install-extension shd101wyy.markdown-preview-enhanced
code --install-extension solomonkinard.chrome-extension-api
code --install-extension solomonkinard.chrome-extensions
code --install-extension steoates.autoimport
code --install-extension vishalskywalker.apex-helper

Any information lacked, please leave a reply.

Thank your reply again.

[MingTang-gd]

Just found the theme extension affect the color too.

Mayukai Theme: https://marketplace.visualstudio.com/items?itemName=GulajavaMinistudio.mayukaithemevsc