Atom - Emmet 包：结束评论

Question

Atom 的 Emmet：html 结束标记后自动注释。

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

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

在 Sublime Text 3 中，使用上面 link 中的 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/

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

在 Atom 上编辑您的 emmet 设置。
将 "Settings" 标题下的扩展路径更新到您要保存我们接下来创建的 preferences.json 文件的位置，我已经在我的保管箱中创建了一个文件夹文件夹，以便我可以从任何位置访问该文件。
在我们刚刚创建的文件夹中创建一个preferences.json文件，在下面添加这段代码

同一行评论：

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

评论新行：

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

转到您的 .atom\packages\emmet\node_modules\emmet\lib 文件夹并编辑 snippets.json。
找到 html 片段并将过滤器设置更改为 "html, c"，这将自动在上面显示的任何 auto-completed 代码末尾添加注释。

Ta-da，有效！

更新 (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

现在：

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

然后我使用 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

如果有人想在 2018 年使用 VS Code 执行此操作，这就是我发现的方法。

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

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

Atom - Emmet 包：结束评论

Atom - Emmet package: closing comments

html

comments

sublimetext3

atom-editor

emmet