2

Emmet for Atom: Auto comments after html closing tag.

I can't seem to find a solution to this problem anywhere so I've resorted to asking on here.

http://iaintnoextra.tumblr.com/post/68089741466/automatically-add-closing-comments-to-html-using

In Sublime Text 3, using the emmet user preferences file from the link above, emmet automatically adds comments after a closing html tag; for example:

div.container

would produce:

<div class="container"></div><!-- /.container -->

I can't seem to find anywhere within Emmet's package settings to make this happen on Atom V1. Does anyone know where I can change this so it mimics the same functionality?

3 Answers 3

8

http://www.devstavern.com/emmet/custom-comments-in-emmet-sublime-atom-and-others/

With the help of the link above I managed to figure this out on my own, here's the answer:

  1. Edit your emmet settings on Atom.
  2. Update your extensions path under the "Settings" heading to a location where you'd like to save your preferences.json file that we'll create next, I've created a folder in my dropbox folder so I can access the file from any location.
  3. Create a preferences.json file in the folder we just created, add this code below

Comment on same line:

{
  "filter.commentAfter": "<!-- /<%= attr('id', '#') %><%= attr('class', '.') %> -->"
}

Comment on new line:

{
  "filter.commentAfter": "\n<!-- /<%= attr('id', '#') %><%= attr('class', '.') %> -->"
}
  1. Go to your .atom\packages\emmet\node_modules\emmet\lib folder and edit snippets.json.
  2. Find the html snippet and change the filters setting to "html, c", this will automatically add a comment to the end of any auto-completed code which is shown above.

Ta-da, it works!

Update (05/11/15):

Make sure you restart Atom after saving your changes.

2
  • 1
    For step 4., I believe you can also put the snippets.json updates in the extensions path. For example, the default would be ~/emmet/snippets.json. This way your snippets won't get blown out if the atom package changes. { "html": { "filters": "html,c" } }
    – Alex C
    May 4, 2016 at 17:30
  • I created the preferences.json file (I don't want to edit snippets.json file and want to override it with preferences.json) for Atom/Emmet like this but it does not work as I expect (for auto creating comment). Is there any way to get work this?
    – fatihturan
    Jul 14, 2016 at 10:53
0

i changed html.js file (tag generator) on C:\Users\\AppData\Roaming\Brackets\extensions\user\brackets-emmet\node_modules\emmet\lib\filter

https://gist.github.com/mgundogdu38/a53af0bccd61bba4cefac56ab705d2b1

Now:enter image description here

1- i find html tag generator library. html.js. 2- i find html tag generator functions. it is called processTag. 3- i need attribute generator function. it is called makeAttributesString. after i cloned. i called "makeAttributesString2" :)

function makeAttributesString2(node, profile) {
    var attrQuote = profile.attributeQuote();
    var cursor = profile.cursor();

    return node.attributeList().map(function(a) {
        var isBoolean = profile.isBoolean(a.name, a.value);
        var attrName = profile.attributeName(a.name);
        var attrValue = isBoolean ? attrName : a.value;
        //i added there. if attribute is id. i added "." on head
        if(attrName == "id")
        {
            return "#"+(attrValue || cursor);
        }
  //if attribute is class i added "." on head
        if(attrName == "class")
        {
            return "."+(attrValue || cursor);
        }
        //else only tagname
        if (isBoolean && profile.allowCompactBoolean()) {
            return ' ' + attrName;
        }
  //end of my code
    }).join('');
}
  1. then i use makeAttributesString2 for generate comment title on proccessTag.

    function processTag(item, profile) {
    if (!item.parent) { // looks like it's root element
        return item;
    }
    
    var attrs = makeAttributesString(item, profile); 
    
    var cursor = profile.cursor();
    var isUnary = abbrUtils.isUnary(item);
    var start = '';
    var end = '';
    
    // define opening and closing tags
    if (!item.isTextNode()) {
         //this is pieace of comment title.
        var attrsComment = makeAttributesString2(item,profile);
        var tagName = profile.tagName(item.name());
        if (isUnary) {
            start = '<' + tagName + attrs + profile.selfClosing() + '>';
            item.end = '';
        } else {
        //there is comment tag. i just add "<!-- "+tagName+attrsComment+" -->\n" and "\n <!-- /"+tagName+attrsComment+" -->"
        start = "<!-- "+tagName+attrsComment+" -->\n"+ '<' + tagName + attrs + '>';
            end = '</' + tagName + '>'+"\n <!-- /"+tagName+attrsComment+" -->";
        }
    }
    
    var placeholder = '%s';
    // We can't just replace placeholder with new value because
    // JavaScript will treat double $ character as a single one, assuming
    // we're using RegExp literal.
    item.start = utils.replaceSubstring(item.start, start,     item.start.indexOf(placeholder), placeholder);
    item.end = utils.replaceSubstring(item.end, end,    item.end.indexOf(placeholder), placeholder);
    
    // should we put caret placeholder after opening tag?
    if (
            !item.children.length 
            && !isUnary 
            && !~item.content.indexOf(cursor)
            && !tabStops.extract(item.content).tabstops.length
        ) {
        item.start += cursor;
    }
    
    return item;
    }
    
1
  • I think this could be a useful answer, but links tend to get broken over time (even if it is your gist). I'd suggest you copy-paste and explain at least the most relevant parts of your code. Thanks.
    – lrnzcig
    Dec 27, 2016 at 15:26
0

If anyone wants to do this with VS Code in 2018, this is what I found to work.

  "emmet.preferences": {
    "filter.commentAfter": "<!-- /[#ID][.CLASS] -->"
  },
  "emmet.syntaxProfiles": {
    "html": {
      "filters": "html, c"
    }
  }

Add this to your existing User Settings, and it should just work :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.