Atom - Emmet包:结束评论

Question

Emmet for Atom: html结束标记后的自动注释.

我似乎在任何地方都找不到解决这个问题的办法，所以我只好在这里问了一下。

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

在崇高文本3中，使用上面链接中的emmet用户首选项文件，emmet在结束html标记后自动添加注释；例如：

div.container

将产生：

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

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

Answer 1

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

在上面的链接的帮助下，我自己解决了这个问题，下面是答案：

1. 在Atom上编辑emmet设置。
2. 将“设置”下的扩展路径更新到要保存preferences.json文件的位置，接下来，我在dropbox文件夹中创建了一个文件夹，以便可以从任何位置访问该文件。
3. 在我们刚刚创建的文件夹中创建一个preferences.json文件，在下面添加以下代码

对同一行的评论：

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

关于新行的评论：

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

1. 转到您的.atom\packages\emmet\node_modules\emmet\lib文件夹并编辑snippets.json。
2. 找到html片段并将筛选器设置更改为"html，c"，这将自动向上面所示的任何自动完成代码的末尾添加注释。

塔-达，起作用了！

更新(05/11/15):

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

Answer 2

我在C:\Users\AppData\Roaming\Brackets\extensions\user\brackets-emmet\node_modules\emmet\lib\filter上更改了html.js文件(标记生成器)

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

现在：

​

我找到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('');
}

1. 然后，我使用makeAttributesString2在proccessTag上生成注释标题。 函数processTag(item，profile) { if (!item.parent) { //看起来是根元素返回项；} var attrs =makeAttributesString(项目，配置文件)；var游标= profile.cursor()；var isUnary =abbrUtils.isUnary(项目)；var start =‘；var end = ''；//定义开始和结束标记if (!item.isTextNode()) {//这是注释标题的花边。var attrsComment =makeAttributesString2(项目，配置文件)；var tagName = profile.tagName(item.name())；if (isUnary) { start = '<‘tagName + attrs + profile.selfClosing() +’profile.selfClosing()+‘；item.end = ''；}profile.tagName{//有注释标记。我只是添加了"\n“和"\n”开始= "\n"+ '<‘+ tagName + attrs +’>；end =‘/’+ tagName +‘+’\n‘；} var占位符=’%s‘’；//我们不能仅仅用新值替换占位符，因为// JavaScript将把双$字符视为单个字符，假设// JavaScript使用的是RegExp文字。item.start = utils.replaceSubstring(item.start，start，item.start.indexOf(占位符)，占位符)；item.end = utils.replaceSubstring(item.end，end，item.end.indexOf(占位符)，占位符)；//我们应该在开始标记之后放置插入符号占位符吗？if ( !item.children.length && !isUnary &&！~item.content.indexOf(游标) && ~item.content.indexOf){ item.start +=游标；}返回项；}

Answer 3

如果有人想在2018年用VS代码来做这件事，这就是我发现的效果。

​

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

​

将其添加到现有的用户设置中，它应该只工作:)