magnus.dev
4/22/2016 - 9:28 AM

My Atom Snippets file.

My Atom Snippets file.

# COMMENTS
'.source':
	'Comment Level 1':
		'prefix': '=='
		'body': """
			/* =============================================================================
			 * ${1:Level 1 heading}
			============================================================================= */$2
		"""

	'Comment Level 2':
		'prefix': '==-'
		'body': """
			/* ${1:Level 2 headline}
			${2: * ${3:Comments (optional)}}
			============================================================================= */$4
		"""

	'Comment Level 3':
		'prefix': '--'
		'body': """
			/* ${1:Level 3 headline}
			${2: * ${3:Comments (optional)}}
			----------------------------------------------------------------------------- */$4
		"""

# JAVASCRIPT
'.source.js':
	'Define require module':
		'prefix': 'define'
		'body' : """
			define(function (require) {
				'use strict';

				${1:var $ = require('jquery');}

				${2:$('body').on('newcontent', function (event) {
					var $newcontent = $(event.target);
					$3
				\\});}
			});
		"""

	'New Content':
		'prefix': 'newcontent'
		'body': """
			$('body').on('newcontent', function (event) {
				var ${1:$newcontent} = $(event.target);
				$2
			};
		"""

	'Consol Log Key-Value':
		'prefix': 'log\'',
		'body': 'console.log(\'$1\', $2));$3'

	'Throw New Error':
		'prefix': 'throw',
		'body': 'throw new Error(\'$1\');$2'

# GNIT
'.source.html':
	'GNIT Object':
		'prefix': 'o-'
		'body': '<div class="o-$1">$2</div>'
	'GNIT Component':
		'prefix': 'c-'
		'body': '<div class="c-$1">$2</div>'
	'GNIT Parameter':
		'prefix': '?=p'
		'body': '<?= p($1); ?>$2'
	'GNIT Snippet':
		'prefix': '?=s'
		'body': '<?= snippet($1); ?>$2'

'.source.css':
	'var(--text-style)':
		'prefix': '--text-style'
		'body': 'var(--text-style-$1);$2'
	'var(--color)':
		'prefix': '--color'
		'body': 'var(--color-$1);$2'

My Atom snippets

Comments

Level 1 ==

/* =============================================================================
 * [Level 1 heading]
 ============================================================================= */

Level 2 ==-

/* [Level 2 headline]
 * [Comments (optional)]
 ============================================================================= */

Level 3 --

/* [Level 3 headline]
 * [Comments (optional)]
 ----------------------------------------------------------------------------- */

Javascript

Define function define

define(function (require) {
    'use strict';
        
    // Optional
    var $ = require('jquery');

    // Optional
    $('body').on('newcontent', function (event) {
        var $newcontent = $(event.target);
    });
});

CSS

Variables

NamePrefixOutput
Text styles--text-stylevar(--text-style-$1);
Colors--colorvar(--color-$1);