How to configure Emmet in Sublime to enable comment shortcut?

Question

Since I have enabled Emmet in Sublime 2, some commands don't work properly.

How can I enable what seems to be the default functionality, when in HTML file typing

cmd + /

in front of

<script src="./bower_components/angular/angular.js"></script>

to get the properly commented tag:

<!-- <script src="./bower_components/angular/angular.js"></script> -->

Right now the same command generates

// <script src="./bower_components/angular/angular.js"></script>

which is completely wrong.

Answer 1

So it turns out that this isn't an issue with Emmet, but with Sublime's built-in HTML language definition. For some reason, it's set up so that any line that starts with a <script> tag (optionally with spaces before it) is classified as source.js.embedded, meaning that when the comment shortcut is triggered, it uses the JS // comment marker instead of the HTML <!-- --> one.

The easiest way I found to get around this is to install the HTML5 package via Package Control, which I assume you already have installed as you're using Emmet. Install the new package, then open your user preferences (Sublime Text 2 -> Preferences -> Settings-User) and add "HTML" to the "ignored_packages" list:

"ignored_packages":
[
    "HTML",
    "Vintage"
],

Save the file, and restart Sublime. Now, when you go to View -> Syntax there should only be one HTML entry, but it will refer to the HTML5 syntax, not the built-in one. To test, open the file you were editing above, place your cursor before the <script> tag, and hit ⌘/. The entire line should now be surrounded in HTML comments:

<!-- <script src="./bower_components/angular/angular.js"></script> -->