Added Adding-Snippets-To-Sublime-Text.md, corrected for typos

FreeCodeCamp · 0f1c16a3bafd675739d68f5e0316ed522514d04a · NormanBenbrahim committed Feb 28, 2016 · Feb 28, 2016 · 0f1c16a
1 parent 8fefbbc
commit 0f1c16a3bafd675739d68f5e0316ed522514d04a
Unified Split

Showing with 41 additions and 0 deletions.

+41 −0 Adding-Snippets-To-Sublime-Text.md
@@ -0,0 +1,41 @@
+# Adding Snippets To Your Sublime Text Installation
+
+If you are a user of sublime text (I hope you are, it kicks ass. You can get it [here](https://www.sublimetext.com/)), then you may have
+already noticed some of the tab completion capabilities. For example, when you are opening an html tag such as `<p>`, it automatically closes
+the tag as soon as you type `/`. You can get similar functionality for pieces of code you end up re-writing over and over, and it's surprisingly
+easy! 
+
+Here's an example, which activates after typing `div` and then tab:
+
+![alt text](http://i.imgur.com/J1Tj2B0.png)
+
+# The Steps
+
+### Step 1. 
+
+Click `Tools > New Snippet...` in the navigation bar. This will open a snippet skeletton file which will look like this:
+
+![alt text](http://i.imgur.com/rjTmAuA.png)
+
+### Step 2.
+
+You will add the snippet by replacing the text `Hello, ${1:this} is a ${2:snippet}.`
+
+In the case of the `div` snippet, it's as simple as placing the following text in the snippet area:
+
+``` html
+<!-- $1 -->
+<div class= "$1">
+	
+</div>
+<!-- $1 -->
+```
+
+The `$` operator references the variables that will be typed in once you type `div` and then tab. In fact you can have any number of them!
+
+### Step 3.
+
+Save the file. You can give it any filename you want, but the extension **must** be `.sublime-snippet`. Remember, you can only have one 
+snippet per file! I like to give them descriptive names such as `html-div.sublime-snippet`.
+
+And there you have it! You can get as creative as you want.