Sublime Text - Snippets

Advertisements

Previous Page
Next Page  

Snippets are the smart templates which can be reused whenever needed. Sublime text editor includes snippets feature for HTML templates. In this chapter, you will learn about them in detail.

Understanding Snippets

Snippets are simple XML supported files with various attributes. They include an extension called sublime-snippet. The root tag of XML element will be the <snippet> tag. Snippets created are saved in the Packages folder and are considered to live in this folder.

Understanding Snippets

The file format and syntax of snippets are discussed in detail as follows −

  • Content −This section includes description of the snippet.

  • tabTrigger − It includes a sequence of characters which trigger when the snippet is written.

  • Scope − It defines the scope in which the snippet remains active.

  • Description − It includes all the meta description. It will be displayed when snippet’s menu is open.

Creating First Snippet

You can create the default snippet using Tools → Developer → Snippet option.

Create Snippet Using Tools-Developer-Snippet option

Then, a demo snippet with the associated tags will be created as shown below −

Demo Snippet

To create a first snippet in Sublime Text editor, click the Tools menu and select the Snippets option from the drop down window, as shown in the screenshot here.

Create a First Snippet

Now, choose Snippet:html from the options displayed.

Choose Snippet:html

This creates a default snippet on the specified html file as shown below.

Default Snippet on HTML File

Note that there are various snippets for different types of files. For html files in the code base, there are three snippets defined in Sublime Text editor, as shown below.

Three Snippets in Sublime Text editor

Package Control Snippets

Control snippets are primarily used for product development. With install packages option in Sublime editor, you can download any snippet needed for web development and install it.

Package Control Snippets

You may need the following packages for web development −

  • EverCodeLab Sublime supports for Ruby on Rails
  • Additional PHP snippets for PHP
  • HTML snippets for HTML files
  • Twitter Bootstrap snippets for Twitter Bootstrap
  • JavaScript snippets for JS files
  • jQuery snippets pack for jQuery
Advertisements