webSIGHTdesigns - Web Design, Web Development, Web Hosting

How to Set up Sublime Text Snippets

Posted on Friday, January 10th, 2014 at 12:31 pm
by webSIGHTdesigns

How to set up custom code snippets for the Sublime Text IDE.

Sublime Text is a powerful text editor that allows you to create snippets, which are shortcuts to writing out snippets of code you reuse frequently. Sublime Text snippet files are XML files with the .sublime-snippet file extension and are generally compatible with Textmate snippets. They're placed in the Packages/User directory of your Sublime Text install.

Download Sublime Text Snippets

Mac OS users will find their snippets located at:

~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/

Windows users will find their snippets located at:

%APPDATA%\Sublime Text 3\Packages\User\

You can create a file in this directory called html.sublime-snippet and enter the following code to set up a default HTML document by simply typing "html" in Sublime Text:

<snippet>
        <content><![CDATA[<html>
<head>
        <title>${1:Home}</title>
        <link rel="stylesheet" href="${2:/css/style.css}">
</head>
<body>
        ${3}
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</body>
</html>]]></content>
        <tabTrigger>html</tabTrigger>
</snippet>

In the above example, the code which typing the shortcut should produce is enclosed in a CDATA section and placed within the content tags. The variables such as ${1:Home} allow you to set up fields, optionally defining a default placeholder value for the field. If you don't want to specify a default value, just use ${1} instead. The first place holder will be selected by default and ready for editing. Then each subsequent place holder can be selected by pressing the TAB button, adding the SHIFT button to go backwards. The shortcut you type to trigger the snippet is specified in the tabTrigger tag.

Snippets can be set up for HTML, JavaScript, CSS, whatever you care to set up a snippet for.

Check out our github repository out for more examples.

View the documentation for full details on the Sublime Text Snippets syntax.

Please Sign In

Please sign in to post a comment.

Web Development

View details »

Web Hosting

View details »

Our Portfolio

View portfolio »

WebSight Designs webSIGHTdesigns preferred email webSIGHTdesigns United States United States