⎙ L o M ⎙

# Emmet emmet_comandos.md

Uma das melhores extensões para editores de código é o emmet. Seu uso para o trabalho com tags extendidas é um diferencial de produtividade para quem utiliza o Sublime Text, o Visual Studio Code, o Atom, o Bracket entre outros editores.

Estou documentando os comandos do emmet, usando o (Bracket)[http://brackets.io/] mas os mesmos funcionam da mesma maneiro nos demais editores.

  1. To create skeleton of HTML To create a skeleton of HTML, type exclamation mark(!) and click the 'Tab' key Output

    <!DOCTYPE html> Document

  2. To create child elements using '>'

    If you wish to create child elements, you can do so by simply using the ‘>’ character as below – Child Example 1: ul>li After typing the above command, place your cursor at the end(after li) and then press the 'Tab' key. Output

    Child Example 2: div>ul>li After typing the above command, place your cursor at the end(after li) and then press the 'Tab' key. Output

    1. To create Sibling elements using '+'

    To create a sibling elements, you can do so by simply using the ‘+’ character as below – Sibling Example: section+p+bq After placing your cursor at end, press 'Tab' key. Output

    1. To create ID & CLASS attributes

    To create an Id, just use a ‘#’ character ID Example: #resnavbar-type After placing your cursor at end, press 'Tab' key. Output

    To create a class, simply use a ‘.’ character CLASS Example: div.container After placing your cursor at end, press 'Tab' key. Output

    Note/Info You can also type .container to achieve the same result.

    To create a class with Id. CLASS with ID Example: #container.x1.x2.x3 After placing your cursor at end, press 'Tab' key. Output

    1. To create implicit tag names

    Suppose, you wish to create implicit tags, you can simply use a ‘.’ character followed by the class name. Implicit tag Example 1: .xyz After placing your cursor at end, press 'Tab' key. Output

    Implicit tag Example 2: em>.car After placing your cursor at end, press 'Tab' key. Output

    Implicit tag Example 3: ul>.car After placing your cursor at end, press 'Tab' key. Output

    Implicit tag Example 4: table>.r>.c After placing your cursor at end, press 'Tab' key. Output

    1. To create text within an element using {} character

    The simplest way to create text is by using the text inside the {} character. Text Example 1: a{Link Text} After placing your cursor at end, press 'Tab' key. Output

    Link text

    Text Example 2: .container>li>{Click }+a{Here} After placing your cursor at end, press 'Tab' key. Output

  3. Click Here

Text Example 3: div>p{lorem} Note/Info You should place your cursor just after the lorem(i.e. just before the } & it will generate a random Lorem Ipsum texts. Once done, you need to place your cursor at end & press the Tab key so that you get the complete expanded tag. Output

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum consequatur repudiandae repellat blanditiis sed commodi sint dolorum vero. Animi provident quod magnam, incidunt, optio earum dolores quia suscipit neque quaerat.

  1. To create the code multiple times using *

Let’s create a list of 6 items Multiply Example 1: ul>li*6 After placing your cursor at end, press 'Tab' key. Output

Multiply Example 2: ol.multiplication>li.items*6>a{Item Name} After placing your cursor at end, press 'Tab' key. Output

  1. Item Name
  2. Item Name
  3. Item Name
  4. Item Name
  5. Item Name
  6. Item Name
  1. To add numbers using $

Assume that your requirement is to create a table with 3 columns like below Numbers Example 1: table>tr>th{version$}*3 Step 1- After placing your cursor at end, press 'Tab' key. Output

version1 version2 version3

Step 2- To create another row , you can write tr>td>{java$}*3. Now, place your cursor after number 3 and press 'Tab' key

version1 version2 version3
java1 java2 java3

Numbers Example 2: .container>img.image$*5 Keep your cursor at the end & press 'Tab' key. Output

Numbers Example 3: h$[title="title$"]{Heading $}*3 Keep your cursor at the end & press 'Tab' key. Output

Heading 1

Heading 2

Heading 3

Numbers Example 4 - Start number in different format .vehicle>ul>li.tmodel_$$$*6 Keep your cursor at the end & press 'Tab' key. Output

Note/Info: Here, the numbers are shown in the format 001, 002, 003, etc because the definition has $$$.

Similarly, if we give $$ in the definition, it will display 01, 02, 03, etc in the output. Numbers Example 5 - Start number other than 1 in ascending order .vehicle>ul>li.tmodel$@4*6 Keep your cursor at the end & press 'Tab' key.

Note/Info: Here, we are using the symbol $@ to start from number 4. Output

Numbers Example 6 - Start number other than 1 in descending order .vehicle>ul>li.tmodel$@-*8 Keep your cursor at the end & press 'Tab' key. Output

  1. To show the custom attributes

Emmet allows us to expand custom attributes as well. Custom Attribute Example 1 .Insurance>img[class="life-insurance"]*3 Keep your cursor at the end & press 'Tab' key. Output

Custom Attribute Example 2 div.Insurance>p[title="Welcome to TutorialBrain"] Keep your cursor at the end & press 'Tab' key. Output

  1. Climb-up

Let’s assume that you need to add 2 paragraphs with a div along with some other elements.

As the symbol > enables to create child elements which means everything after the > symbol will be the child of its previous element.

So, in this case, you will get unexpected result Climb Up Example-1(Unexpected Result) div>p>img+p Keep your cursor at the end & press 'Tab' key. Output

But, we want 2 separate paragraphs and you can achieve this by the climb-up process by simply using a caret symbol(^). Climb Up Example-1(Expected Result) div>p>img^p Keep your cursor at the end & press 'Tab' key. Output

  1. Grouping

Grouping is a clear way to group elements to avoid an unexpected error.

Now, if you do not want to apply the Climb-up on the above example i.e. div>p>img+p but wish to fix this using Grouping.

In this case, you can simply separate the different elements using a parentheses. Grouping Example-1 div>(p>img)+p Keep your cursor at the end & press 'Tab' key. Output

Grouping Example-2 .container>(nav>ul>li*4)+article>p Keep your cursor at the end & press 'Tab' key. Output

← Compactadores (title do readme compactadores) →