Atom - Emmet 包：结束评论

Question

Emmet for Atom：在 html 结束标记后自动 cmets。

我似乎无法在任何地方找到解决此问题的方法，所以我求助于这里。

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

在 Sublime Text 3 中，使用上面链接中的 emmet 用户首选项文件，emmet 会在结束 html 标记后自动添加 cmets；例如：

div.container

会产生：

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

我似乎在 Emmet 的包设置中找不到任何地方可以在 Atom V1 上实现这一点。有谁知道我可以在哪里更改它以模仿相同的功能？

Answer 1

如果有人想在 2018 年使用 VS Code 做到这一点，我发现这是可行的。

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

将此添加到您现有的用户设置中，它应该可以正常工作:)

Answer 2

我更改了 C:\Users\\AppData\Roaming\Brackets\extensions\user\brackets-emmet\node_modules\emmet\lib\filter 上的 html.js 文件（标签生成器）

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

现在：

1- 我找到了 html 标签生成器库。 html.js。 2-我找到了 html 标签生成器函数。它被称为 processTag。 3-我需要属性生成器功能。它被称为makeAttributesString。在我克隆之后。我叫“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('');
}

4. 然后我使用 makeAttributesString2 在 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;
   }
   

Answer 3

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

借助上面的链接，我设法自己解决了这个问题，答案如下：

1. 在 Atom 上编辑您的 emmet 设置。
2. 将“设置”标题下的扩展程序路径更新到您希望保存我们接下来将创建的preferences.json 文件的位置，我在我的保管箱文件夹中创建了一个文件夹，这样我就可以访问来自任何位置的文件。
3. 在我们刚刚创建的文件夹中创建一个preferences.json文件，在下面添加这段代码

评论在同一行：

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

评论新行：

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

4. 转到您的 .atom\packages\emmet\node_modules\emmet\lib 文件夹并编辑 sn-ps.json。
5. 找到 html sn-p 并将过滤器设置更改为“html, c”，这将自动在上面显示的任何自动完成代码的末尾添加注释。

塔达，它有效！

更新（2015 年 5 月 11 日）：

确保在保存更改后重新启动 Atom。