Notes

How to create a Snippet in Sublime Text

Edit on GitHub
Workflow
2 minutes

Basics

  • The file name should end in .sublime-snippet.
  • It should be saved in (Mac) /Users/yourname/Library/Application Support/Sublime Text 3/Packages/User See this page for the data folder on other OS.
  • The code must ve wrapped in a tag.
  • You can use $1 to indicate where to place the cursor after inserting the template. For example, for an HTML5 template you can place it between <title> tags like so: <title>$1</title> and this is where the cursor will be after the snippet is inserted.
  • You can designate multiple cursors points for after snippet expansion, like $1, $2, $3 and so on.. Use tab to go to the next cusrsor point.
  • You can define a tabTrigger. It’s the word that you need to type before pressing tab. For example, html5 is the tab trigger for HTML5 snippet.
  • You should define scope. Which basically means that you can define in what type of files this snippet should expand. For example, a snippet with <scope>source.css</scope> will only expand in CSS files. I omit scope in my snippets because i start writing files first and save later. Without a scope given i can expand the snippet in unsaved/untitled files.
  • You can add a description (optional).

Related