Considering how popular my CSS snippets for Sublime Text have been, I thought I’d better collate and release some of the HTML snippets I use regularly. Put simply, they allow you to turn this:
doctype
Into this:
<!doctype html>
<html>
<head>
<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>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
$3
<script src="js/main.js"></script>
</body>
</html>
Note: the dollar signs indicate tab markers.
Further details can be found on the GitHub repository. If you have any suggestions, send a pull request, or let me know in the comments below.
Installation instructions
The easiest way to install these snippets is through Package Control; simply search for ‘HTML snippets’. If you don’t use Package Control (you really should, it’s awesome) then you can copy the set into the Sublime Text packages 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 article on Sublime Text, including why I use it, a few hidden tricks, some of my favourite packages, and other work flow enhancements!
Update
If you are also using Emmet then you need to add the following to Emmet’s user settings file to avoid conflicts:
"disabled_single_snippets": "fig meta nav ol script style ul"
