A Set of HTML Snippets for Sublime Text 2

Considering how pop­u­lar my CSS snip­pets for Sublime Text have been, I thought I’d bet­ter col­late and release some of the HTML snip­pets I use reg­u­larly. Put simply, they allow you to turn this:

doctype

Into this:

<!doctype html>
<html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="$1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>$2</title>
<body>
\$3
<script src="js/main.js"></script>
</body>
</html>

Note: the dol­lar signs indic­ate tab markers.

Further details can be found on the GitHub repos­it­ory. If you have any sug­ges­tions, send a pull request, or let me know in the com­ments below.

Installation instruc­tions

The easi­est way to install these snip­pets is through Package Control; simply search for ‘HTML snip­pets’. If you don’t use Package Control (you really should, it’s awe­some) then you can copy the set into the Sublime Text pack­ages folder. On a Mac this can be found in:

Library > Application Support > Sublime Text 2 > Packages

For Windows, it can be found in:

C: > Users > {username} > AppData > Roaming > Sublime Text 2 > Packages.

Stay tuned for a more in-depth art­icle on Sublime Text, includ­ing why I use it, a few hid­den tricks, some of my favour­ite pack­ages, and other work flow enhancements!

Update

If you are also using Emmet then you need to add the fol­low­ing to Emmet’s user set­tings file to avoid conflicts:

"disabled_single_snippets": "fig meta nav ol script style ul"

TWEET THIS

+ 订阅