A Set of HTML Snippets for Sublime Text 2-阿里云开发者社区

开发者社区> 开发与运维> 正文

A Set of HTML Snippets for Sublime Text 2

简介: <p style=""><img src="http://joshnh.com/wp-content/uploads/2012/11/A-Set-of-HTML-Snippets-for-Sublime-Text-2.png" alt="A Set of HTML Snippets for Sublime Text 2" style="border:0px; max-width:100%;

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:


Into this:

<!doctype 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">
        <link rel="stylesheet" href="css/main.css">
        <script src="js/main.js"></script>

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!


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"



+ 订阅