VSCode中.html.eex文件需同时支持HTML与HTML(EEx)代码补全求助

Absolutely, you can get both built-in HTML snippets (like h2+Tab generating <h2></h2>) and your custom HTML (EEx) snippets working together in .html.eex files. Here's a step-by-step solution:

1. Open your user settings JSON file
   Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac), type Open User Settings (JSON), and hit Enter. This opens the raw JSON config file where we’ll tweak the settings.

2. Add the following configuration
   Paste these lines into the JSON file (merge them with any existing settings you have):

   {
     "files.associations": {
       "*.html.eex": "html-eex"
     },
     "emmet.includeLanguages": {
       "html-eex": "html"
     },
     "html.validate.enable": true,
     "[html-eex]": {
       "editor.quickSuggestions": {
         "other": true,
         "comments": false,
         "strings": true
       },
       "editor.suggest.snippetsPreventQuickSuggestions": false
     },
     "extensions.extendLanguageServices": {
       "html-eex": "html"
     }
   }
   

3. What each setting does

   • files.associations: Ensures .html.eex files are recognized as html-eex (HTML (EEx)) mode, so your custom EEx snippets trigger correctly.
   • emmet.includeLanguages: Tells Emmet (the tool behind those built-in HTML snippets like h2+Tab) to treat html-eex files as HTML, restoring those built-in shortcuts.
   • html.validate.enable: Turns on HTML syntax checking for your .html.eex files, so you get helpful hints about invalid HTML.
   • [html-eex] section: Makes sure quick suggestions (including snippets) pop up reliably without being blocked.
   • extensions.extendLanguageServices: Extends VSCode's HTML language service to work with html-eex files, so you get full HTML smart features alongside EEx support.

4. Test it out
   Save the settings file, close and re-open your .html.eex file. Now when you type h2 and press Tab, you should see the built-in <h2>|</h2> snippet appear, and your custom HTML (EEx) snippets should still work as expected.

If you have existing custom snippets, double-check that their scope field includes "html-eex" (e.g., "scope": "html, html-eex"). This ensures they trigger in both HTML and HTML (EEx) contexts.

内容的提问来源于stack exchange，提问作者Peter R