Auto commenting for close tags, feature request. #225

Closed
GrahamBudd opened this Issue Jan 16, 2013 · 18 comments

Comments

Projects
None yet
9 participants
@GrahamBudd

I love the power that Emmet brings, and would like to request a preference option (since I know some people won't want it) to turn on auto commenting of close tags if the user has provided a class or id to an item. This is helpful in large nests of html when you come to a closing tag to instantly know what it is closing.

For example, I would love this:
.myClass>ul.myList>li*3

to expand to this:

<div class="myClass">
    <ul class="myList">
        <li></li>
        <li></li>
        <li></li>
    </ul> <!-- .myList -->
</div> <!-- .myClass -->

If you really wanted to rock my world, I would love if it could be smart enough to recognize single line tags and not auto add completion comments (like the li's in the example above) and if both an ID and a class were provided, it would only indicate the ID in the close comment. So awesome example would be expanding this:

myID.myClass>ul.myList>li.myItems*3

into this:

<div id="myID" class="myClass">
    <ul class="myList">
        <li class="myItems"></li>
        <li class="myItems"></li>
        <li class="myItems"></li>
    </ul> <!-- .myList -->
</div> <!-- #myID -->

I like to keep all my code commented in this way, and have written / expanded a number of the ST2 standard snippets to work in this manner. If this feature were in Emmet I would be able to use it for nearly all my tedious markup generation. As it is now, it's still very helpful to me for CSS and sections of HTML where I'm not using many classes or IDs.

@sergeche

This comment has been minimized.

Show comment Hide comment
@GrahamBudd

This comment has been minimized.

Show comment Hide comment
@GrahamBudd

GrahamBudd Jan 16, 2013

Nice, I had missed that! It's pretty close to what I want. I would love if another flag could be passed to indicate not adding the close comments to single line tags (like the li's in the example). I know I could just do it in two Emmet steps, making the outside framework with the '|c' filter and then doing the inner items without that set.

Nice, I had missed that! It's pretty close to what I want. I would love if another flag could be passed to indicate not adding the close comments to single line tags (like the li's in the example). I know I could just do it in two Emmet steps, making the outside framework with the '|c' filter and then doing the inner items without that set.

@sergeche

This comment has been minimized.

Show comment Hide comment
@sergeche

sergeche Jan 16, 2013

Owner

You can change filter.commentAfter preference: http://docs.emmet.io/customization/preferences/

Owner

sergeche commented Jan 16, 2013

You can change filter.commentAfter preference: http://docs.emmet.io/customization/preferences/

@GrahamBudd

This comment has been minimized.

Show comment Hide comment
@GrahamBudd

GrahamBudd Jan 16, 2013

First, I apologize for not having found this documentation. Thank you for pointing me in the right direction. For others who are curious, I've added this to my user preferences:

// Emmet preferences
// List of all available preferences:
// http://docs.emmet.io/customization/preferences/
"preferences": {
    "filter.commentAfter": " <!-- <%= attr(\"id\", \"#\") %> <%= attr(\"class\", \".\") %> -->"
}

Am I correct that at the moment there is no place to add a list of tags to exempt from auto commenting? Again, for example the li's.

GrahamBudd commented Jan 16, 2013

First, I apologize for not having found this documentation. Thank you for pointing me in the right direction. For others who are curious, I've added this to my user preferences:

// Emmet preferences
// List of all available preferences:
// http://docs.emmet.io/customization/preferences/
"preferences": {
    "filter.commentAfter": " <!-- <%= attr(\"id\", \"#\") %> <%= attr(\"class\", \".\") %> -->"
}

Am I correct that at the moment there is no place to add a list of tags to exempt from auto commenting? Again, for example the li's.

@sergeche sergeche closed this Jan 17, 2013

@samjbmason

This comment has been minimized.

Show comment Hide comment
@samjbmason

samjbmason Feb 19, 2013

Hi there, I added this preference to my user emmet user setting file and when I hit tab to expand say a div.test piece of code. I find it expands correctly but doesnt add the comment at the end?

Hi there, I added this preference to my user emmet user setting file and when I hit tab to expand say a div.test piece of code. I find it expands correctly but doesnt add the comment at the end?

@sergeche

This comment has been minimized.

Show comment Hide comment
@sergeche

sergeche Feb 19, 2013

Owner

@samjbmason you should either explicitly call |c filter (e.g. div.test|c) or make c filter default for HTML syntax: http://docs.emmet.io/customization/syntax-profiles/

The filter.commentAfter preference simply changes the look of comment.

Owner

sergeche commented Feb 19, 2013

@samjbmason you should either explicitly call |c filter (e.g. div.test|c) or make c filter default for HTML syntax: http://docs.emmet.io/customization/syntax-profiles/

The filter.commentAfter preference simply changes the look of comment.

@samjbmason

This comment has been minimized.

Show comment Hide comment
@samjbmason

samjbmason Feb 19, 2013

Ah ok brilliant thanks. Now I know techically I should open a nother issue for this but I have a feeling its something obvious Im missing.
When I am inside a html element opening tag e.g

there are some occassions where I would like to add another attribute for example an ID. is there a way when Im inside the div tag to type "id" hit tab and for it to expand with the ="" marks?

Ah ok brilliant thanks. Now I know techically I should open a nother issue for this but I have a feeling its something obvious Im missing.
When I am inside a html element opening tag e.g

there are some occassions where I would like to add another attribute for example an ID. is there a way when Im inside the div tag to type "id" hit tab and for it to expand with the ="" marks?

@sergeche

This comment has been minimized.

Show comment Hide comment
@sergeche

sergeche Feb 19, 2013

Owner

@samjbmason you can add "auto_id_class": true in your Preferences.sublime-settings file and then type # or . characters inside opening tag to add id and class attributes.

Owner

sergeche commented Feb 19, 2013

@samjbmason you can add "auto_id_class": true in your Preferences.sublime-settings file and then type # or . characters inside opening tag to add id and class attributes.

@Kcko

This comment has been minimized.

Show comment Hide comment
@Kcko

Kcko Sep 12, 2014

@samjbmason you can add "auto_id_class": true in your Preferences.sublime-settings file and then type # or . characters inside opening tag to add id and class attributes.

work only with "." , with # or id not work

. => create class=""
"#" => create nothing ...

Kcko commented Sep 12, 2014

@samjbmason you can add "auto_id_class": true in your Preferences.sublime-settings file and then type # or . characters inside opening tag to add id and class attributes.

work only with "." , with # or id not work

. => create class=""
"#" => create nothing ...

@erikwallace

This comment has been minimized.

Show comment Hide comment
@erikwallace

erikwallace Apr 7, 2015

I modified the code snippet @GrahamBudd posted to place a backslash in my comment noting close. So my code looks like

{
// Emmet preferences
// List of all available preferences:
// http://docs.emmet.io/customization/preferences/
"preferences": {
"filter.commentAfter": ""
}

}

I modified the code snippet @GrahamBudd posted to place a backslash in my comment noting close. So my code looks like

{
// Emmet preferences
// List of all available preferences:
// http://docs.emmet.io/customization/preferences/
"preferences": {
"filter.commentAfter": ""
}

}

@mahmut-gundogdu

This comment has been minimized.

Show comment Hide comment
@mahmut-gundogdu

mahmut-gundogdu Dec 28, 2016

you can change html.js file. you can change processTag function like this.

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

you can change html.js file. you can change processTag function like this.

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

@xavortm xavortm referenced this issue in DevriX/DX-Starter Feb 13, 2017

Open

Some Minor Updates #11

@decombs12

This comment has been minimized.

Show comment Hide comment
@decombs12

decombs12 Apr 10, 2017

I implemented GrahamBudd's example in Emmet's sublime.settings-user file and saved it there as the instructions say, but I received an error after closing the file and this error message upon opening Sublime today: "Error trying to parse settings: Unexpected trailing character in Packages\User\Emmet.sublime.settings:4:14."

Not being versed in crypticese I thought it best to ask here for help on correcting this. Beside line 4 column 14 puts the error complaint right on the colon and this I don't understand since it works for GB and is written the same format in Emmet's default preferences file.

What I want to do is have Emmet append a closing div with either the class or id name directly after the tag not on another line.

TIA

I implemented GrahamBudd's example in Emmet's sublime.settings-user file and saved it there as the instructions say, but I received an error after closing the file and this error message upon opening Sublime today: "Error trying to parse settings: Unexpected trailing character in Packages\User\Emmet.sublime.settings:4:14."

Not being versed in crypticese I thought it best to ask here for help on correcting this. Beside line 4 column 14 puts the error complaint right on the colon and this I don't understand since it works for GB and is written the same format in Emmet's default preferences file.

What I want to do is have Emmet append a closing div with either the class or id name directly after the tag not on another line.

TIA

@GrahamBudd

This comment has been minimized.

Show comment Hide comment
@GrahamBudd

GrahamBudd Apr 10, 2017

@decombs12 you are getting these error most likely because you do not have opening and closing curly braces. If your Emmet's user sublime-settings file is literally just exactly what my code snippet was you will get this error. My code snippet was meant to be included along with any other items in the user settings. So if you want this, and only this, change in your user settings for Emmet, the entire file should look like this:

{
	// Emmet preferences
	// List of all available preferences:
	// http://docs.emmet.io/customization/preferences/
	"preferences": {
	    "filter.commentAfter": " <!-- <%= attr(\"id\", \"#\") %> <%= attr(\"class\", \".\") %> -->"
	}
}

GrahamBudd commented Apr 10, 2017

@decombs12 you are getting these error most likely because you do not have opening and closing curly braces. If your Emmet's user sublime-settings file is literally just exactly what my code snippet was you will get this error. My code snippet was meant to be included along with any other items in the user settings. So if you want this, and only this, change in your user settings for Emmet, the entire file should look like this:

{
	// Emmet preferences
	// List of all available preferences:
	// http://docs.emmet.io/customization/preferences/
	"preferences": {
	    "filter.commentAfter": " <!-- <%= attr(\"id\", \"#\") %> <%= attr(\"class\", \".\") %> -->"
	}
}
@decombs12

This comment has been minimized.

Show comment Hide comment
@decombs12

decombs12 Apr 11, 2017

Hi Graham,

Thank you very much for your reply.

I copied the line just as you displayed it above in Emmet user's settings file and still received that error message. In fact it's at the same place also, 4:14. Line 4 column 14 which places the problem precisely about the colon ( : ).

I sure would like to get this right since I'm copying and pasting with Bootstrap and keeping track of my closing divs is critical.

Thanks in advance to any and all who might be able to help.

Dave

Hi Graham,

Thank you very much for your reply.

I copied the line just as you displayed it above in Emmet user's settings file and still received that error message. In fact it's at the same place also, 4:14. Line 4 column 14 which places the problem precisely about the colon ( : ).

I sure would like to get this right since I'm copying and pasting with Bootstrap and keeping track of my closing divs is critical.

Thanks in advance to any and all who might be able to help.

Dave

@GrahamBudd

This comment has been minimized.

Show comment Hide comment
@GrahamBudd

GrahamBudd Apr 11, 2017

@decombs12 attached is an exact copy of my full User/Emmet.sublime-settings file. You can try copying and pasting that in and see if that fixes the issue you're seeing.
Emmet.sublime-settings.txt

@decombs12 attached is an exact copy of my full User/Emmet.sublime-settings file. You can try copying and pasting that in and see if that fixes the issue you're seeing.
Emmet.sublime-settings.txt

@decombs21

This comment has been minimized.

Show comment Hide comment
@decombs21

decombs21 Apr 11, 2017

That worked a treat!

Thanks a lot Graham.

That worked a treat!

Thanks a lot Graham.

@robjimgreen

This comment has been minimized.

Show comment Hide comment
@robjimgreen

robjimgreen Feb 1, 2018

You glorious bastards, this is great!

You glorious bastards, this is great!

@decombs12

This comment has been minimized.

Show comment Hide comment
@decombs12

decombs12 Feb 2, 2018

Glad you like it Rob.

Now if someone just the similar code/lines for using the same annotating feature in Atom and Brackets, I'd be equally thrilled too.

Anyone?

Glad you like it Rob.

Now if someone just the similar code/lines for using the same annotating feature in Atom and Brackets, I'd be equally thrilled too.

Anyone?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment