Sublime Text JavaScript Snippets

angular-before-each-inject.sublime-snippet

<snippet>
    <content><![CDATA[beforeEach(inject((${1:name}) => {
    ${2:}
}));]]></content>
    <tabTrigger>befinj</tabTrigger>
    <scope>source.js</scope>
    <description>beforeEach inject</description>
</snippet>

angular-before-each-provide.sublime-snippet

<snippet>
    <content><![CDATA[beforeEach(module((\$provide) => {
  \$provide.value('${1:name}', ${2:value});
}));
]]></content>
    <tabTrigger>befprov</tabTrigger>
    <scope>source.js</scope>
    <description>beforeEach provide</description>
</snippet>

angular-constant.sublime-snippet

<snippet>
    <content><![CDATA[/**
* @ngdoc object
* @name ${1:moduleName}.object:${2:constantName}
* @description
* Description of the ${2:constantName} constant service.
*/
angular.module('${1:moduleName}').constant('${2:constantName}', '${3:}');
]]></content>
    <tabTrigger>angcon</tabTrigger>
    <scope>source.js</scope>
    <description>Angular Constant</description>
</snippet>

angular-controller.sublime-snippet

<snippet>
    <content><![CDATA[/**
* @ngdoc controller
* @name ${1:moduleName}.controller:${2:controllerName}
* @description
* Description of the ${2:controllerName} controller.
*/
angular.module('${1:moduleName}').controller('${2:controllerName}', [
  function ${2:controllerName}(){
    'use strict';

  }
]);]]></content>
    <tabTrigger>angcont</tabTrigger>
    <scope>source.js</scope>
    <description>Angular Controller</description>
</snippet>

angular-directive.sublime-snippet

<snippet>
    <content><![CDATA[/**
* @ngdoc directive
* @name ${1:moduleName}.directive:${2:directiveName}
* @description
* Description of the ${2:directiveName} directive.
*/
angular.module('${1:moduleName}').directive('${2:directiveName}', [
  function ${2:directiveName}(){
    'use strict';

    var
      scope = {};

    function link (\$scope, \$element) {
      ${3://body}
    }

    return {
      restrict: 'A',
      scope: scope,
      link: link
    };
  }
]);]]></content>
    <tabTrigger>angdir</tabTrigger>
    <scope>source.js</scope>
    <description>Angular Directive</description>
</snippet>

angular-factory.sublime-snippet

<snippet>
    <content><![CDATA[/**
* @ngdoc service
* @name ${1:moduleName}.service:${2:serviceName}
* @description
* Description of the ${2:serviceName} service.
*/
angular.module('${1:moduleName}').factory('${2:serviceName}', [
  function ${2:serviceName}(){
    'use strict';

    function ${3:api}(){
      // ${4:body}
    }

    return {
      ${3:api}: ${3:api}
    };
  }
]);]]></content>
    <tabTrigger>angfac</tabTrigger>
    <scope>source.js</scope>
    <description>Angular Factory</description>
</snippet>

angular-import.sublime-snippet

<snippet>
    <content><![CDATA[import angular from 'angular';]]></content>
    <tabTrigger>iman</tabTrigger>
    <scope>source.js</scope>
    <description>import angular</description>
</snippet>

angular-module.sublime-snippet

<snippet>
    <content><![CDATA[/**
* @ngdoc overview
* @name ${1:moduleName}
* @description
* Description of the ${1:moduleName} module.
*/
angular.module('${1:moduleName}', [${2:}]);
]]></content>
    <tabTrigger>angmod</tabTrigger>
    <scope>source.js</scope>
    <description>Angular Module</description>
</snippet>

angular-scope-destroy.sublime-snippet

<snippet>
    <content><![CDATA[\$scope.\$on('\$destroy', ${1:function(){
  ${2:// body}
\}});]]></content>
    <tabTrigger>scodes</tabTrigger>
    <scope>source.js</scope>
    <description>(Rodu) On Scope destroy</description>
</snippet>

angular-test-controller.sublime-snippet

<snippet>
    <content><![CDATA[describe('Controller ${1:ControllerName}:', () => {

  let \$controller;
  let \$scope;

  beforeEach(module('${2:moduleName}'));

  beforeEach(inject((\$rootScope, _\$controller_) => {
    \$controller = _\$controller_;
    \$scope = \$rootScope.\$new();
  }));

  describe('When ${3:}:', () => {
    it('should ${4:}', () => {
      \$controller('${1:ControllerName}', { \$scope });

      ${5:}
    });
  });
});
]]></content>
    <tabTrigger>tescon</tabTrigger>
    <scope>source.js</scope>
    <description>Test Angular Controller</description>
</snippet>

angular-test-directive.sublime-snippet

<snippet>
    <content><![CDATA[describe('Directive ${1:directiveName}:', () => {

  beforeEach(module('${2:moduleName}'));

  // The element on which we attach the dashboardPanel directive
  const ELEMENT_HTML = '<div ${3:directive-name}></div>';

  let \$rootScope;
  let \$compile;

  function initScope(\$scope){
    const \$directiveScope = \$scope || \$rootScope.\$new();
    const \$element = \$compile(ELEMENT_HTML)(\$directiveScope);

    \$directiveScope.\$digest();

    // Access the directive scope object
    return \$element.isolateScope();
  }

  beforeEach(() => {

    inject(['\$rootScope', '\$compile', (_\$rootScope_, _\$compile_) => {
      \$rootScope = _\$rootScope_;
      \$compile = _\$compile_;
    }]);

  });

  describe('When ${4:}:', () => {
    it('should ${5:}', () => {
      ${6:}
      initScope();

    });
  });
});
]]></content>
    <tabTrigger>tesdir</tabTrigger>
    <scope>source.js</scope>
    <description>Test Angular Directive</description>
</snippet>

angular-test-service.sublime-snippet

<snippet>
    <content><![CDATA[describe('Service ${1:serviceName}:', () => {

  let ${1:serviceName};

  beforeEach(module('${2:moduleName}'));

  beforeEach(inject((_${1:serviceName}_) => {
    ${1:serviceName} = _${1:serviceName}_;
  }));

  describe('When ${3:}:', () => {
    it('should ${4:}', () => {
      ${5:}
    });
  });
});
]]></content>
    <tabTrigger>tesser</tabTrigger>
    <scope>source.js</scope>
    <description>Test Angular Service</description>
</snippet>

angular-value.sublime-snippet

<snippet>
    <content><![CDATA[/**
* @ngdoc object
* @name ${1:moduleName}.object:${2:valueName}
* @description
* Description of the ${2:valueName} value service.
*/
angular.module('${1:moduleName}').value('${2:valueName}', '${3:}');
]]></content>
    <tabTrigger>angval</tabTrigger>
    <scope>source.js</scope>
    <description>Angular Value</description>
</snippet>

array-map-es6.sublime-snippet

<snippet>
    <content><![CDATA[map((${1:arguments}) => {
  ${4:// body}
}${2:,})${3:;}]]></content>
    <tabTrigger>arrmaes</tabTrigger>
    <scope>source.js</scope>
    <description>Array map ES6</description>
</snippet>

console.log.sublime-snippet

<snippet>
    <content><![CDATA[console.log(${1:something});]]></content>
    <tabTrigger>co</tabTrigger>
    <scope>source.js</scope>
    <description>console log</description>
</snippet>

debug.sublime-snippet

<snippet>
    <content><![CDATA[debug('${1:something}');]]></content>
    <tabTrigger>deb</tabTrigger>
    <scope>source.js</scope>
    <description>debug</description>
</snippet>

define-bound-module.sublime-snippet

<snippet>
    <content>
    <![CDATA[define(["jquery"], function(\$){
    "use strict";
    
    function initialise(\$component) {
        ${0}
    }

    return {
        "initialise": initialise
    };
});
]]></content>
    <!-- Optional: Tab trigger to activate the snippet -->
    <tabTrigger>defbou</tabTrigger>
    <!-- Optional: Scope the tab trigger will be active in -->
    <scope>source.js</scope>
    <!-- Optional: Description to show in the menu -->
    <description>RequireJS Bound Module Define</description>
</snippet>

define.sublime-snippet

<snippet>
  <content>
  <![CDATA[define([${1:'jquery'}], function(${2:\$}){
  'use strict';

  ${3:$TM_SELECTED_TEXT}
});]]></content>
  <!-- Optional: Tab trigger to activate the snippet -->
  <tabTrigger>def</tabTrigger>
  <!-- Optional: Scope the tab trigger will be active in -->
  <scope>source.js</scope>
  <!-- Optional: Description to show in the menu -->
  <description>RequireJS define</description>
</snippet>

es6-method.sublime-snippet

<snippet>
    <content><![CDATA[${1:name}(${2:arguments}) {
  ${3:// body}
}]]></content>
    <tabTrigger>meth</tabTrigger>
    <scope>source.js</scope>
    <description>(Rodu) ES6 Method</description>
</snippet>

function-inline-es6.sublime-snippet

<snippet>
    <content><![CDATA[(${1:arguments}) => {
  ${3:// body}
}${2:;}]]></content>
    <tabTrigger>funes</tabTrigger>
    <scope>source.js</scope>
    <description>Inline Function ES6</description>
</snippet>

function-inline.sublime-snippet

<snippet>
    <content><![CDATA[function (${1:arguments}) {
  ${3:// body}
}${2:;}]]></content>
    <tabTrigger>func</tabTrigger>
    <scope>source.js</scope>
    <description>Inline Function</description>
</snippet>

function_iife.sublime-snippet

<snippet>
    <content><![CDATA[(function ${1:myFn}(${2:arguments}){
	${0:// body}
}(${2:arguments}));]]></content>
    <tabTrigger>ifun</tabTrigger>
    <scope>source.js</scope>
    <description>Function</description>
</snippet>

grunt-config.sublime-snippet

<snippet>
    <content><![CDATA[<%= ${0:config.} %>]]></content>
    <tabTrigger>con</tabTrigger>
    <scope>source.js</scope>
    <description>Grunt variable</description>
</snippet>

import.sublime-snippet

<snippet>
    <content><![CDATA[import {${1:value}} from '${2:module}';]]></content>
    <tabTrigger>impo</tabTrigger>
    <scope>source.js</scope>
    <description>(Rodu) Import ES6</description>
</snippet>

node-require-es6.sublime-snippet

<snippet>
    <content><![CDATA[let ${1:module} = require('${2:}${1:module}');
]]></content>
    <tabTrigger>req</tabTrigger>
    <scope>source.js</scope>
    <description>(Rodu) Node Require ES6</description>
</snippet>

return.sublime-snippet

<snippet>
    <content>
    <![CDATA[return {
    ${0}
};]]></content>
    <!-- Optional: Tab trigger to activate the snippet -->
    <tabTrigger>ret</tabTrigger>
    <!-- Optional: Scope the tab trigger will be active in -->
    <scope>source.js</scope>
    <!-- Optional: Description to show in the menu -->
    <description>return object</description>
</snippet>

Sublime Text JavaScript Snippets

These are the snippets I use in Sublime Text.

use-strict.sublime-snippet

<snippet>
    <content><![CDATA['use strict';]]></content>
    <tabTrigger>use</tabTrigger>
    <scope>source.js</scope>
    <description>use strict</description>
</snippet>