Sublime - AngularJS - Useful Auto-complete Snippets
Join the DZone community and get the full member experience.
Join For FreeFollowing are the steps to create snippet file for each angularjs script:
- In Sublime Text Editor, go to Tools > New Snippet. A new untitled file consisting of following code would open:
<snippet> <content><![CDATA[ Hello, ${1:this} is a ${2:snippet}. ]]></content> <!-- Optional: Set a tabTrigger to define how to trigger the snippet --> <!-- <tabTrigger>hello</tabTrigger> --> <!-- Optional: Set a scope to limit where the snippet will trigger --> <!-- <scope>source.python</scope> --> </snippet>
- Write following code within CDATA by replacing with code such as “Hello….”. The code would look like following.
<content><![CDATA[ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/$1.$2.$3/angular.min.js"></script> ]]></content>
- Give an appropriate name within “TabTrigger” element. This would be name you would write in the editor followed by ctrl + “space bar” to autocomplete. I put the name such as “jsng”. The code would look like following:
<tabTrigger>jsng</tabTrigger>
- Write the source type as “text.html” within scope element. The code would like following:
<scope>text.html</scope>
- Once done with above steps, its time to save the file. The file name must end with .sublime-snippet. You could choose format such as filetype-triggername.sublime-snippet. For above, I used filename such as html-jsng.sublime-snippet
- Close and re-open the sublime. Test by writing “js” and ctrl + “space bar” to see autocomplete option. You shall find your snippet displayed for selection. Once you select, you would see “/../”. This is left empty to put the version name. You could type in as 1.2.23 as per the current version and you are all set. You could however choose to create snippet for different versions separately.
Code Samples for Inclusion of AngularJS Scripts
The code below represents custom auto-complete snippet for following AngularJS libraries. Create snippet files for following scripts based on above instructions.
- angular.min.js: Type “jsng” & ctrl + “space bar” to include angular.min.js
- angular-route.js: Type “jsngroute” & ctrl + “space bar” to include angular-route.min.js
- angular-resource.js: Type “jsngresource” & ctrl + “space bar” to include angular-resource.min.js
Sublime Snippet for Inclusion of Angular.min.js
<snippet> <content><![CDATA[ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/$1.$2.$3/angular.min.js"></script> ]]></content> <tabTrigger>jsng</tabTrigger> <scope>text.html</scope> </snippet>
Sublime Snippet for Inclusion of Angular-route.min.js
<snippet> <content><![CDATA[ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/$1.$2.$3/angular-route.min.js"></script> ]]></content> <tabTrigger>jsngroute</tabTrigger> <scope>text.html</scope> </snippet>
Sublime Snippet for Inclusion of Angular-resource.min.js
<snippet> <content><![CDATA[ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/$1.$2.$3/angular-resource.min.js"></script> ]]></content> <tabTrigger>jsngresource</tabTrigger> <scope>text.html</scope> </snippet>
Feel free to suggest/comment.
Published at DZone with permission of Ajitesh Kumar, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments