Tricks Tutorial 101: Code Faster with Emmet, Snippets & More

A CodeMix eLearning Tutorial

Learn to code faster using CodeMix editor features like Emmet, snippets, and more!

For a hands-on learning experience, an interactive version of this tutorial is included in CodeMix.

Try it Yourself

What is CodeMix eLearning? | Discover Other Tutorials | View Steps

# Tricks 101: Code Faster with Emmet, Snippets and More

### 01

# Welcome to Power Web Coding!

In this tutorial, we are going to explore a list of useful tips and tricks to code faster and in a more efficient way by using CodeMix editor features.

This tutorial takes approximately 5 minutes to complete.

### 02

# HTML Snippets

When using the CodeMix editor for code files, you have access to a vast set of snippets depending on the language you are coding. Let's try some of them. Notice we added a project named `tutorial-tricks101` in your workspace.

1. Open the empty `hello.html` file located at `src/hello.html`.
2. Start typing `html` and notice how it automatically suggests some options.
3. Select the html option with the snippet icon (a file drawn with dashes) and press `TAB`.

As you can see, this `html` snippet automatically generates a basic html file structure saving you a lot of typing. If you hit `TAB` the cursor gets positioned in interesting areas to start filling up.

### 03

# JavaScript Snippets

Now let's try a JavaScript snippet:

1. Start typing inside the `<Script>` tags `foreach` and hit `TAB`.
2. Do the same for the `ifelse` snippet.

Snippets are available depending on the language you are coding and the <a href='http://www.genuitec.com/docs/power-ups/extensions-in-codemix/' target='_blank'>CodeMix extensions</a> that are installed.

See a list of available snippets:

1. Press `Ctrl+Shift+P / Com+Shift+P(Mac)`.
2. Type `insert snippet` and hit ENTER.

### 04

# Emmet

CodeMix editor uses Emmet to save us from typing repetitive code by using abbreviations, snippets and a list of useful commands.

For instance, see `hello.html` file. Right now it contains one line with an Emmet abbreviation. Do not overthink it right now, just do the following:

1. Place the cursor at the end of the line and hit `Ctrl+Space` to invoke content assist.
2. Press `TAB` key.

See the magic?! It's an example of code generated by expanding an Emmet Abbreviation.

### 05

# IDs and Classes

Emmet abbreviations use `#` to define an element ID and `.` to define an element class.

Type the following in the `hello.html` file  and then hit the `TAB` key.

```
div#main.container.example
```

It should result in the following:

```
<div id="main" class="container example"></div>
```

### 06

# Children Elements

Use `>` to create children elements and `*` to multiply an element a number of times.

Type the following in the `hello.html` file  and then hit the `TAB` key.

```
div>ul>li*3
```

### 07

# Sibling Elements

Use `+` to create sibling elements

Type the following to create basic HTML structure with an Emmet abbreviation:

```
html>(header>title)+body
```

### 08

# Create Page Bones

Use `{` and `}` to specify element values and `$` to numer items.

Let's create a simple web page bones by using a little more complex abbreviation. At this point it should be easy for you to identify most of the parts of it.

Type the following abbreviation inside the `<body>` tags in `hello.html` and then hit the `TAB` key:

```
#page>(div#header>ul#nav>li*4>a{section$})+(#content>h1{Hello world}+p)+#foot
```

### 09

# More Cool Emmet Stuff

To explore more cool stuff about Emmet, see <http://docs.emmet.io/cheat-sheet/>

### 10

# Wrap with Abbreviation

After expanding an abbreviation you can use TAB to make the cursor navigate to interesting places to fill up the generated code. You can save some time by automatically fill some fields with values you type.

1. In the `hello.html` file, find and select the three lines containing

```
1. Apple
2. Mango
3. Pineapple
```

2. Press `Ctrl+Shift+P / Com+Shift+P(Mac)`.
3. Type `Wrap Individual Lines with Abbreviation` and press `ENTER`.
4. Type `ol>li*|t` and press `ENTER` again.

Observe how textual numbers are removed and converted into an ordered HTML list. The result will be:

```
<ol>
    <li>Apple</li>
    <li>Mango</li>
    <li>Pineapple</li>
</ol>
```

### 11

# Command: Update Image Size

There are a number of Emmet commands available from the command palette. Let's use one of them right now.

1. In `hello.html` place the cursor at the end of the `<img>` tag.
2. Press `Ctrl+Shift+P / Com+Shift+P(Mac)`.
3. Type `Update Image Size` and then press `ENTER`.

Observe how it automatically filled the image size information.

### 12

# Command: Evaluate

Let's use another useful command.

1. In `hello.html` highlight `630/3` in the `<div>` tag.
2. Press `Ctrl+Shift+P / Com+Shift+P(Mac)`.
3. Type `Evaluate Math Expression` and then press `ENTER`.

Explore more Emmet commands by pressing `Ctrl+Shift+P / Com+Shift+P(Mac)` and then type `emmet`.

### 13

# CSS Fuzzy search

With CodeMix editor, you can code CSS or SASS files easily thanks to the `Fuzzy search` technology that guesses what you want to write by just providing a few letters.

Let's try it out.

1. Place the cursor inside the `body` rule in `style.css`.
2. Type `c` and press the `TAB` KEY. Observe how it automatically injected a `color` property.
3. In a new line type `bg` and then press the `TAB` Key. It will inject a `background` property.
4. Now try `w10`.

### 14

# Useful shortcuts

Here you can see a list of useful shortcuts you can use while coding to speed up a little bit more your coding:

`{binding:codemix.extension.htmlTagWrap}`: Wrap selection in tag.
`{binding:codemix.editor.emmet.action.wrapIndividualLinesWithAbbreviation}`: Wrap with abbreviation.
`{binding:codemix.editor.emmet.action.removeTag}`: Remove tag.
`{binding:codemix.editor.emmet.action.prevEditPoint}`: Previous edit point.
`{binding:codemix.editor.emmet.action.nextEditPoint}`: Next edit point.
`{binding:codemix.editor.emmet.action.mergeLines}`: Merge lines.
`{binding:codemix.editor.emmet.action.splitJoinTag}`: Split/Join tag.
`{binding:codemix.editor.emmet.action.updateImageSize}`: Update image size.

### 15

# More tips and tricks

Thanks for taking the time to complete this tutorial! There are plenty of code powering features available in CodeMi but it's difficult to land them all in one single tutorial. So stay tunned for future tutorial entries!

You can explore more coding tips at the CodeMix learning center: <a href='http://www.genuitec.com/docs/workbench/intellisense-in-codemix/' target='_blank'>IntelliSense</a>, <a href='http://www.genuitec.com/docs/workbench/refactoring-in-codemix/' target='_blank'>Refactoring</a>, <a href='https://www.genuitec.com/docs/power-ups/emmet-in-codemix/' target='_blank'>More Emmet</a>.

Explore other courses <a href='https://www.genuitec.com/elearning/' target='_blank'>here</a>.