Join Ray Villalobos for an in-depth discussion in this video Installing Emmet, part of Coding Faster with Emmet.
Installing Emmet depends a lot on the type of browser you have. So if you go to the main Emmet website at emmet.io and scroll down here to the bottom of the page, you can click on this Download button. This will take you to this page, which shows all the different editors that Emmet supports. And you can see that there's a lot of them. Each of those is going to have one or two ways of installing Emmet and sometimes it'll depend on the platform you're using. So to install Emmet for something like say sublime text, you would click on this, and then read the instructions for that editor and your platform. So, if you'll scroll down here it shows you that in order to install Emmet, you need to have Package Control installed, or you can do it by cloning the get repo. A lot of the editors will give you a cloning to get repo option. We'll use Package Control.
So to do that, I'm going to click on this link right here and this is the website for Package Control, which is a big part of sublime text. If you click on the installation instructions, you can see that it tells you that you need to hit Ctrl key and then Paste this command in the dialog box that you get. So I already have Package Control installed in my version of sublime text so let me go ahead and read some of the other instructions. So it says, simply run package control, and then install package, and find the Emmet plugin. And then restart the sublime text editor if required. I don't think it's required, so I'm going to switch over to sublime text. And what I want to do is run Package Control, which you could do by going to the Menu, selecting Tools and then hitting the Command Pallete right here. I can tell that you can hit Cmd+Shift+P on a Mac, so I'll do that and type in install and then the command install package will come up. So I'm going to hit Enter, and another list will come up, like this, and I want to type in the package that I want to install.
In this case, it's going to to be Emmet. Now you don't want to install Emmet CSS Snippets, just the regular Emmet, right here. So I'm going to click on this and Emmet will be installed when I get this text right here. So you want to test to make sure that it's been installed, cause you may have to restart your editor. So, I'm going to type in an abbreviation here h1 and then plus, p and then hit tab. And notice that it's expanded that into headline and a paragraph, and that means that Emmett is working. Now, one thing you have to be careful is, I saved this file already as test.html. So if this is on untitled or if you haven't saved this file, then what you want to do is hit Ctrl+E or for Save to file as .html document. So that seemed pretty easy.
Let's go ahead and find out how you would install it in a different editor. So I'm going to go back into my download page, and I'm going to click on another one. I have Coda in my machines, so I'll click on Coda. Now the Coda instruction again takes you to a github page. You can see we're in github if I scroll up. And it tells you that you can install either by cloning the project into a folder on your hard drive, right? And it looks something like this. And there's actually two ways and so if you have Coda 1 you do this. If you have Coda 2 you actually have to use this one right here.
So I'm going to Copy this cause this seems the easier of the two instructions. Notice that Coda 1 is right here, Coda 2 is there and then there's also this other way of doing it which seems longer. So I'm going to Copy that command, and I'll switch over to my terminal. And I'm going to type this CD command, and then Paste that URL right there. Which switches you to the proper directory. Now if it doesn't, you probably need to go to your home folder and just find it manually. And actually what's happening here is that whenever you have a base like this, you need to actually put in quotations. because it doesn't like to use bases and then names. So we're going to go ahead and fix this by typing in quotations and then hitting Return.
And I'm going to do pwd for Present Work and Directory and that tells us we're in the right place. Now I need to use git to clone into this folder, do, back into my browser. So what I want to do here is copy the URL, except for the readme pound sign right here. So Copy all this, and go back into my terminal. And say, get clone, and Paste all that, and hit Return. And it's going to clone Emmet into the plugins for Coda 2. So that should be it for Coda. Let me go into coda and make sure that it's been installed properly. So, I'm going to run Coda 2, and, go ahead and type in an abbreviation here, and see if it works.
Paragraph, hit Tab, I'm going to hit Ctrl+E, if that doesn't work. So you can see that it's installed now into Coda, but I have to hit Ctrl+E to make it work, and that's not very cool. Now, if you noticed in your menu, there's actually going to be an additional menu called Plug-Ins, and then Emmet. And in here you can go to Emmet Preferences. Which is what you want to do, because it's always better to set the Tab key if possible as the abbreviation expansion. So I'm going to click on that, and close this, and now if I hit tab it should expand it which is much better way of working with Emmet. You want to make sure that you look for that option in any installation that you do cause it will make things go a lot smoother.
Otherwise you will always have to remember to hit Ctrl+E to expand the Emmit shortcut. Now I did use get, to get my Coda installation to work, it seemed like the easiest of the options. If you don't know how to use Git, make sure you check out Git Essential Training with Kevin Skoglund. Or you can also install Emmet by following some of the other instructions. I showed you how to use two popular editors on the Mac. If you're trying to install for your editor, just make sure you go to the emmet.io page. You find the editor that you want to use, and then follow the instructions for that editor.