Konfigurera Emmet att lägga till kommentarer som du vill ha dem.

Emmet är ett plugin till olika textredigerare för att underlätta och snabba upp arbetsflödet. Det fungerar genom att med likt CSS selectors skriva semantiken som sedan konverteras till HTML med attribut, värden och innehåll.

Emmet — the essential toolkit for web-developers. Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow.

Tanken med den här artikeln är att visa hur man med hjälp av Emmet kan skräddarsy och lägga till kommentarer automatiskt genom att snällt be om det. :)

Förtydligande: Emmet har out of the box kommentering men genom att lägga till ett eget filter kan du göra om kommentarerna så det passar dig och ditt arbetssätt.

— Vad är det som ska kommenteras?

— När en html-sida börjar få många nested elements (kapslade element enl. Google Translate) så är det ofta svårt att se vilken sluttagg som hör till vilket element. Då är det behändigt att kommentera sina sluttaggar med CSS-IDt eller klassnamnet så man snabbt hittar vilket element sluttaggen tillhör.

Simpelt exempel

1
2
3
<div class="wrapper">
  <h1>Titel</h1>
</div><!-- .wrapper -->

Kanske inte så mycket nytta just i detta fallet men så fort det börjar blir fler element och innehåll så trycks sluttaggen ner i semantiken vilket också gör det svårare att hitta igen den.

Kolla på det här:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="box-1">
  <div class="box-2">
    <div class="box-3">
      <div class="box-4">
        <div class="box-5">
          <div class="box-6">
            <div class="box-7">
              <div class="box-8">
                <div class="box-9">
                  <div class="box-10">
                    <p><a href="https://en.wikipedia.org/wiki/Matryoshka_doll">Imma Matryoshka doll, LOL</a></p>
                  </div><!-- .box-10 -->
                </div><!-- .box-9 -->
              </div><!-- .box-8 -->
            </div><!-- .box-7 -->
          </div><!-- .box-6 -->
        </div><!-- .box-5 -->
      </div><!-- .box-4 -->
    </div><!-- .box-3 -->
  </div><!-- .box-2 -->
</div><!-- .box-1 -->
<p>...men nu ser jag vilken som slutar var!</p>

Nu kanske du förstår vad jag menar med nyttan av kommentarerna.

Konfigurera Emmet i Sublime Text

Nu finns Emmet till olika textredigerare men i detta exempel ska jag visa hur man kan konfigurera Emmet för Sublime Text.

Öppna Emmets inställningsfil genom att via menyn i Sublime Text gå till Preferences -> Package Settings -> Emmet -> Settings User.

Om du inte redan lagt till några inställningar för Emmet är filen mest troligt tom, så börja med att lägg till

1
2
3
4
5
{
  "preferences": {

  }
}

Sedan ska det läggas till en inställning som heter filter.commentAfter som innehåller själva kommentaren och bestämmer hur den ser ut.

Default i Emmet lägger den till kommentaren på en ny rad, vilket jag inte alls gillar. Det är självklart upp till dig hur du vill att kommentaren ska se ut men jag tycker personligen att den ska ligga på samma rad som sluttaggen.

För att få det resultatet lägger vi till denna sträng "<!--<%= attr(\"id\", \"#\") %><%= attr(\"class\", \".\") %> -->" i inställningen filter.commentAfter. Det talar om att det ska, om det finns, läggas till ID och/eller klass(er) i kommentaren.

Så här ska inställningsfilen se ut när den är klar;

1
2
3
4
5
{
  "preferences": {
    "filter.commentAfter": "<!-- <%= attr(\"id\", \"#\") %><%= attr(\"class\", \".\") %> -->"
  }
}

That’s it! Mer behövs det inte och du kan lätt ändra i strängen för att få kommentaren precis som du vill ha den.

Så här lägger du till kommentarer med Emmet

Det enda du behöver göra är att lägga till |c efter din Emmet markup så lägger den till kommentarer på alla sluttaggar. Dock lägger den inte till kommentarer på taggar som ligger på samma rad eftersom det inte är svårt att identifiera sluttaggen. T ex

1
<p class="text">Lorem ipsum Nulla pariatur</p>

Exempel 1

Vi börjar enkelt.

1
header.wrapper>h1{Titel}|c

… ger resultatet:

1
2
3
<header class="wrapper">
  <h1>Titel</h1>
</header><!-- .wrapper -->

Exempel 2

Lite mer markup.

1
header.page-header>.row>.col.col-100>h1{Title}

… ger resultatet:

1
2
3
4
5
6
7
<header class="page-header">
  <div class="row">
    <div class="col col-100">
      <h1>Title</h1>
    </div><!-- .col col-100 -->
  </div><!-- .row -->
</header><!-- .page-header -->

Lägg märke till att den inte lägger till kommentarer på element som ligger på samma rad.

Exempel 3

Ytterligare markup.

1
.row>.col.col-50>p{Left column content}+.col.col-50>h2{Menu}+ul#menu.menu>li*5>a[href=#]{Link $}|c

… och resultatet blir då;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="row">
  <div class="col col-50">
    <p>Left column content</p>
    <div class="col col-50">
      <h2>Menu</h2>
      <ul id="menu" class="menu">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
      </ul><!-- #menu.menu -->
    </div><!-- .col col-50 -->
  </div><!-- .col col-50 -->
</div><!-- .row -->

Emmet, vad är det?

Jag förutsätter i artikeln att du redan vet vad Emmet är, men skulle du inte ha hittat detta guldkorn tidigare är det väl värt att titta på vad det kan göra för dig.

Det behöver inte vara att den ska skapa en hel HTML markup åt dig men kanske den kan snabba upp vissa saker. Jag använder det ofta som en ersättning för snippets.

Emmet hittar du på emmet.io.

Avslutning

Hoppas detta tips har hjälpt dig lite i alla fall i strävan att hitta det perfekta arbetsflödet.

Jag har använt Emmet (tidigare Zen Coding) sedan ganska länge tillbaka och det är först nu jag upptäckt att den kan kommentera koden.

Uppdatering

Detta fungerar även till Visual Studio Code.

1
2
3
4
{
  // Preferences used to modify behavior of some actions and resolvers of Emmet.
  "emmet.preferences": {}
}