Test: Emmet profile, preferences and snippets from external files

[ramya-rao-a]

Testing #11679

• [x] Any OS @stevencl
• [x] Any OS @chrmarti

Complexity: 3

Helpful links:

• Emmet CheetSheet
• Emmet Customization

Clear all emmet related settings.

• Try emmet abbreviations expansions in an html file. (type any html element and hit tab: div => <div></div> a => <a href=""></a>)
• Html elements that do not have closing tags (like br, hr, input, img) expand just to a single tag like <br>, <hr>, <input type="text">, <img src="" alt="">
• Abbreviations like .title would expand to <div class="title"></div>
• Try emmet abbreviations expansions in a css file. Check out the CSS part of Emmet CheetSheet (m10 would expand to "margin": 10px, c#1c would expand to "color: #1c1c1c)

Settings from external files:

• Create a folder anywhere. Create the below 3 files in this folder
  • syntaxProfiles.json with content: {"html":"xhtml"}
  • preferences.json with content: {"css.color.case": "upper", "css.intUnit": "pt" }
  • snippets.json with content:

    {
    "html": {
        "abbreviations":  {
                "a": "<a href=\"\"  target=\"blank\">"
           }
      }
    }

• add setting emmet.extensionsPath with value as absolute path to this folder.

Now repeat your previous emmet expansions with html and css. The settings from the 3 json files would be loaded and you will see the below differences

• HTML elements that do not have closing tags, now get a self closing tag. Eg: <br />, <input type="text" /> etc. This is due to the syntaxProfiles.json
• The abbreviation a that would previously expand to <a href=""></a>, now expands to <a href="" target=""></a>. This is due to the snippets.json
• The CSS abbreviation m10 now expands and use pt instead of px. And c#1c when expanded has upper case. This is due to preferences.json.

Add the below to your settings file.

"emmet.syntaxProfiles": {
      "html": {
            "attr_quotes": "single"
             }
},
"emmet.preferences": {
      "css.color.case": "lower"
}

Now repeat your previous emmet expansions with html and css. The User/Workspace settings should override the settings from the external files and you would see the below differences:

• HTML elements that do not have closing tags are back to the old behaviour of not getting self closing tags
• .title now expands with single quotes for attributes instead of double
• In CSS file, c#1C and c#1c both will get expanded with lower case

Note:

• Changes in User/Workspace settings should get reflected without VS Code reload.
• Changes to the external files will get reflected only on VS Code reload.
• ~ not supported in emmets.extensionsPath at the moment

[stevencl]

I hadn't noticed the comment that I had to reload VS Code to get these settings to take effect. So I eventually got this to work.

I cannot get the extensionsPath part of the test to work I created the snippets.json, syntaxProfiles.json and preferences.json files as described They are all saved inside a folder named test, inside my Jan2017Test workspace I set the extensionsPath setting to /Users/stevenclarke/jan2017test/test but I don't see anything different when I try to expand the a tag in an html file