Learn to create code quickly with Emmet & Sublime Text 2

Learn to create code quickly with Emmet & Sublime Text 2

Views:39183|Rating:4.77|View Time:5:19Minutes|Likes:163|Dislikes:8
In this video tutorial, I’ll show you how to create list of images super quickly using some of Sublime Text 2 awesome multi-cursor editing controls as well as the Emmet package that lets you write shortcuts to create complex HTML code.

in this video I'm going to show you how to create a grid of images using sublime text – and a package called Emmet that lets you create abbreviations for HTML and expand them into some really complicated things what I have here is just a simple index file that has some basic HTML code and I also have an images folder inside the images folder I have a series of images that have two versions of thumbnail as well as a high resolution version and I want to go ahead and create a grid of images now that would normally involve me writing a bunch of code for unordered lists and list items anchor tags to wrap around each thumbnail as well as image tags inside those now let's see how sublime text and Emmet can help us do that quicker so the website for Emmet is right here if you want to go to the syntax you can see how easy it is to do you just type in an abbreviation like this and it expands it to something like this this is available for a lot of different text editors so you can see the full list right here if you want to add that to you something like sublime text you're going to need a package Control Manager you get that right here and after you've installed that then it's pretty easy to install you just go to your package manager like this and then you just go package install when you hit return then you would type in the package that you want I've already got M it in here installed so it's not showing up in this list but it would show up in yours so what I want to do now is just kind of use this to create a list of images first thing I'm going to do is get the list of names of all my images I've got two versions of each image one is just a regular photo and the other one is a thumbnail version of the same photo now what I want to do here first is to click on the size tab in my desktop that way they'll organize by size and I know all the thumbnails are going to be smaller so they're going to just organize together in all my high-resolution versions of the images are here this was just a texture so we're not going to use that so what I'll do is I select all those and if I hit copy then I can paste that over here and at least I got all the names of the images that I want now the next thing I want to do is hold down the option key that gives me a multi-line selector so that I can drag on all these lines and then get rid of the J peg by just deleting a few times now that leaves me just the plain names now what I want to do is use Emmet to create my list so normally that would be an unordered list with a list item sort of like this if I hit ctrl e it expands that into that if I want to do multiple list items then I can just type in the times and that's what's cool about Emmet it's sort of really easy to understand once you learn a few shortcuts even if you just install it you don't want to use anything else once you learned that you can say hey I want an unordered list that is that has a list item inside and I want say nine of them because there's nine of those cars then when I expand it's just going to do that all at once but you can even do better than that so you know that you want an unordered list with a list item with nine list items and then inside that you also want an anchor tag with an image tag right there so let's expand that you can see that it even adds the source tag and the alt tag that's pretty cool you could hold on the option and then maybe edit things in here to add the underscore TN dot jpg of all the thumbnails but I could do something better than that so let's go ahead and undo and what I'll do is I know that in each of my anchor tags I want to have a hyperlink reference that has the extension that JPEG because it's going to click to the large resolution version of the image and then in my image tags I want to do something similar my SRC tags are all going to end with underscore TN dot jpg because those are the low resolution versions and I can use these brackets to put in attributes and then I can put the other attribute that I want which is alt and all my alt tags are going to start with photo of and then the name of each of these images so let's see how that expands whenever you expand you want to go all the way to the end and then hit ctrl e that expands pretty well and everything looks like it's there however I want to be able to just kind of edit all these at once so what I'll do is let me undo that so I also need to add the images folder for this one as well as this one I'm going to add a special character the @ symbol right here that's really not going to do anything except be a placeholder for where these are going to go so I'll put that right there and there and let me go ahead and hit expand and what I could do next is grab each one of these I'm going to cut them select one of these and hit command-d a few times command defines the next instance of what you had selected and it places multiple cursors in those spots so that you can then paste one of those items there so now you can see that we have spring v8 here and it also pasted it here and here perfect so I could keep on doing that for all these other elements select I'm going to grab this cut it so like the first one command D a couple of times pasted and that does the next one and I'll go ahead and finish up all the other ones as well and I'll go ahead and save this let's go ahead and preview it in the browser you can see the grid of images is coming up just fine combination of Emmet with sublime text is pretty powerful you should definitely check it out

26 Replies to “Learn to create code quickly with Emmet & Sublime Text 2”

  1. laggingreflex

    @4:42 I would've used multiple selection vertically to first paste all names on the first instance of "/images/@", and then moved the multiple vertical selection horizontally right to the next "@" via cursor and then pasted there again. Would've saved a lot of copy pasting.

  2. Will Farley

    You convinced me to switch from being a VIM user for the last 2.5 years.  Thought you might like to know. Thanks

  3. Joseph McMurray

    Good question. Github:Gists would be the best way that I know.


    Jeffrey Way has a great tutorial on that. Also, you can use other peoples snippets who have them public but I don't see them using the actual snippets. I would probably just use GIT. I have a server where I host my private repos and I would just create a sublime user repo to host all my custom snippets. That way I have version control on them also.

  4. Ray Villalobos

    Yep…snippets in Sublime can be super powerful. TextExpander does some of the cursor placement and clipboard stuff too, but it's definitely cross platform. I have some snippets in Sublime, but I hate to be married to a single IDE. How do you keep your snippets sync'ed. With TE, they auto sync via Dropbox. There's even a PC program that will keep itself sync'ed with it, but I can't remember the name.

  5. Joseph McMurray

    Yeah but I have customized tab triggers and placements of the cursor when I hit tab for my snippets. Its not just a copy and paste its a bit more. Plus, I work from a Mac, PC, and Linux so its usually best to keep a program that can handle my snippets on all platforms and Sublime does all that.

    If Emmet didn't prevent custom snippets I would use it no problem. But thats not the case.

  6. Ray Villalobos

    I usually keep all snippets in TextExpander. I like to have my snippets be independent of any app since I move around so much.

  7. Joseph McMurray

    I have never upgraded my package from ZenCoding to Emmet for one reason and one reason only…..they don't allow your custom snippets to work.

    The way Emmet was designed is a little flawed in the way that Sublime was meant to be used. Its a shame that they removed the repo for ZenCoding because it worked with my snippets but luckily I copied the Repo before it was removed and I continue to use it.

Leave a Reply

Your email address will not be published. Required fields are marked *