Extend code autocompletion with custom snippets. Learn how to further improve your productivity by creating you own custom shortcut for commonly used code blocks.
- [Christina] So you've chosen an editor and it's almost perfect, if only it had a few more features. Well, you're in luck because many editors in IDEs have options for extending functionality, and adding customizations such as making your own snippets. We've talked about the tab completion features, but it only works for standard code snippets. Here's the documentation for adding your own in Atom. Let's take a closer look at how to create the snippet. In Atom, custom snippets are created in a file called snippets.cson and uses CoffeeScript Object Notation.
So let's go to Atom, Preferences, and search for the language package in the Packages tab. Packages are like plug-ins, they add specific features and some are included by default, and some can be added to customize your editor. So let's say we wanted to create a custom snippet for HTML. We can search for the HTML language, and look for a package that starts with language. In this case, since we're looking for HTML, this is the package that we want to find the settings for.
Click Settings, scroll down to HTML Grammar, and here is the scope for HTML. Let's copy that and go back to the CSON file. So to create our own snippet, we'll follow these instructions, right underneath. Type snip and Tab, and I'm going to update the source to HTML. Something to look out for, notice that there's a dot at the beginning, so we're going to leave that there and add the HTML source.
The next line is the Snippet Name. This is what will appear in the autocomplete dropdown menu. So let's say I want to create a snippet for my own name, I'm too lazy to type out all nine characters, so I'm just going to make a snippet for that. The prefix is the abbreviation for your snippet, and the body is what you want your snippet to expand to. As you can see, you can pretty much create a snippet for anything.
So let's save that, and since the scope is for an HTML file, we have to make sure we're in an HTML file first, to be able to use this snippet. So I'm just going to create a blank HTML file. My abbreviation was just ct, and as you can see in the dropdown, there's my snippet name, Tab, and it expands. You can also create multi-line snippets. Let's make one for jQuery's shorthand document ready. Right underneath, I'm going to add another one, use snip, Tab.
My shortcut was jq, you could see the name in the dropdown, press Tab, and there you go. So now that I have the shortcut, that's going to be the last time I'm going to have to type that full syntax out manually. In Sublime Text, the method for creating snippets is a little different, it uses an XML syntax, and each snippet it saved as an individual file. Make sure to view the documentation for more information about creating snippets in Sublime Text.
- Using browser development tools
- Testing mobile layouts
- Coding in text editors and IDEs
- Using front-end frameworks and CSS preprocessors
- Working with the command line
- Using version control (such as Git)