CODEWITHSUNDEEP
htmlcommentssublimetext3atom-editoremmet
James Almond
James Almond

Reputation: 101

Atom - Emmet package: closing comments

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?

Upvotes: 2

Views: 2417

Answers (3)

Dan
Dan

Reputation: 437

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 :)

Upvotes: 0

Mahmut Gundogdu
Mahmut Gundogdu

Reputation: 563

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;
}

Upvotes: 0

James Almond
James Almond

Reputation: 101

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.

Upvotes: 8

Related Questions