emmet-user-settings.js

{
	// With this option enabled, all Emmet's CSS snippets
	// will be available in standard auto-complete popup
	"show_css_completions": true,

	// If set to `true`, Emmet will automatically insert final tabstop
	// at the end of expanded abbreviation
	"insert_final_tabstop": false,

	///////////////////////////////
	// Emmet customization
	// Each section has the same meaning as the same-named JSON file
	// described here:
	// http://docs.emmet.io/customization/
	///////////////////////////////


	// Custom snippets definitions, as per https://github.com/emmetio/emmet/blob/master/snippets.json
	"snippets": {
		"html": {
			"abbreviations": {
				"php": "<?php ${1} ?>",
				"php/": "<?php /*${1}*/ ?>",
				"\\$data": "<pre>\n\t<?php print_r($data); ?>\n</pre>}"
			}
		},
		"css": {
			"abbreviations": {
				"mqxs": "@include breakpoint(${1:xsmall only}) {\n\t|${2}\n}",
				"mqs": "@include breakpoint(${1:small}) {\n\t|${2}\n}",
				"mqm": "@include breakpoint(${1:medium}) {\n\t|${2}\n}",
				"mql": "@include breakpoint(${1:large}) {\n\t|${2}\n}",
				"flex": "@include flex(${1:null}, ${2:null}, ${3:null}, ${4:null}, ${5:null});",
				"inc": "@include ${1};",
				"ext": "@extend ${1};",
				"clear": "@include clearfix;",
				"qqq": "&${1:-} {${2}}",
				"dn": "display: none;",
				"db": "display: block;",
				"df": "display: flex;",
				"di": "display: inline;",
				"dib": "display: inline-block;",
				"trans": "transition: \\$transition;",
				"colw": "color: \\$whitish;",
				"colb": "color: \\$blackish;",
				"colp": "color: \\$primary;",
				"cols": "color: \\$secondary;",
				"bgcw": "background-color: \\$whitish;",
				"bgcb": "background-color: \\$blackish;",
				"bgcpr": "background-color: \\$primary;",
				"bgcs": "background-color: \\$secondary;",
				"hover": "@include superhover {\n\t|${1}\n}",
			}
		},
	},

	// Emmet preferences
	// List of all available preferences:
	// http://docs.emmet.io/customization/preferences/
	"preferences": {
		// "css.valueSeparator": ": ",
		"css.color.short": "true",
		"css.propertyEnd": ";",
		"css.syntaxes": "css, scss, Sass",
		"css.autoInsertVendorPrefixes": false
	},

	// Output profiles for syntaxes
	// http://docs.emmet.io/customization/syntax-profiles/
	"syntaxProfiles": {
		// Enable XHTML dialect for HTML syntax
		// "html": "xhtml"
		//
		// Write chained CSS abbreviations on single line:
		// "css": "css_line"
	}
}