- Mastering CSS
- Rich Finelli
- 333字
- 2021-07-08 09:45:48
Snippets
In Sublime Text 3, you simply need to type in html:5 in your HTML file and hit the Tab key to get a basic boilerplate for your HTML. So, all of the code that we had to type in TextEdit can be quickly written for us:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Another thing is when you type in div and hit the Tab key, you can have div expanded with the closing tag created automatically and the cursor right in between the opening and closing div tag:
We can do this for any HTML element; just type in something like p and hit Tab and get your cursor right in between:
That is beautiful! It's really nice to have something that simple.
We can take this one step further and install the Emmet package. I highly encourage you to do so. This will provide you with even better code snippets. In fact, the html:5 code snippet that produced the basic HTML boilerplate before, is actually an Emmet snippet; it doesn't come standard with Sublime:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
The ability to install packages, which are basically plugins, in Sublime is another reason why it's so powerful. There's a package for everything you need that doesn't come out of the box with Sublime. So let's say you need syntax highlighting for ColdFusion code; there's a package available that will do this for you. I have an article on my site that covers package installation, which is pretty simple. Just check it out at richfinelli.com/installing-sublime-package-manager/:
By far, this is the best package, and the first thing you should install is Emmet. With Emmet, say you go to your HTML and type in something like this:
div>ul>li*5>a{link$}
This will expand to the following:
<div>
<ul>
<li><a href="">link1</a></li>
<li><a href="">link2</a></li>
<li><a href="">link3</a></li>
<li><a href="">link4</a></li>
<li><a href="">link5</a></li>
</ul>
</div>
Notice that the $ expanded in to 1 for the first a, and 2 for second, and so on, which can be very useful. Writing HTML quickly using a CSS selector-like syntax is just one of the nice things that Emmet allows you to do.