Sublime settings and snippets

ayu theme with customized preferences. See Setup for info on how to set up your Sublime Text for these snippets.

• CSS
• HTML
• Javascript
• Node
• Vue

Note: Snippet docs below are out of date.

Snippets

CSS

animanimation: ${1:name} 0.5s linear 0s forwards;

bshbox-shadow: ${1:0} ${2:1px} ${3:5px} rgba(0,0,0,${4:0.15}); $0

comAdd a comment, useful for headings/* $1 */ $0

cdcursor: default;

cpcursor: pointer;

dbdisplay: block;

dfdisplay: flex;

dgdisplay: grid;

didisplay: inline;

dibdisplay: inline-block;

dndisplay: none;

fsfont-size: $1;$0

fwfont-weight: ${1:400};$0

key

@keyframes $1 {
0% { $2 }
100% { $3 }
}

hs$1 h1, $1 h2, $1 h3, $1 h4, $1 h5, $1 h6 { $2 }

maumargin: ${1:0} auto; $0

noselectuser-select: none;

ohoverflow: hidden;

opopacity: ${1:1}; $0

pabsposition: absolute;

pafillposition: absolute; top: 0; right: 0; bottom: 0; left: 0;

prpadding-right: $1; $0

pfixposition: fixed;

prelposition: relative;

rgbrgb(${1:255}, ${2:255}, ${3:255}); $0

rgbargba(${1:255}, ${2:255}, ${3:255}, ${4:1}); $0

tactext-align: center;

taltext-align: left;

tartext-align: right;

tratransition: ${1:all} ${2:0.15}s ${3:ease};

tshtext-shadow: ${1:0} ${2:1px} ${3:5px} rgba(0,0,0,${4:0.15}); $0

varvar(--$1)$0

vatvertical-align: top;

:aft:after { $1 content: ''; }

:bef:before { $1 content: ''; }

:fc:first-child { $1 }

:lc:last-child { $1 }

Chunks

cols

.${1:class} { $2 }
.${1:class} li { width: ${3:33%}; display: inline-block; }
$0

fbase

form { $1 }
input[type='text'], textarea { $2 }
input[type='submit'] { $3 }

Partials

baseBase CSS file (with simple common settings)

responsiveResponsive media query (with simple common settings)

HTML

a<a href="$1">$2</a>$0

baseBase HTML template

c<${1:component}$2></${1:component}>$0

comAdd a comment<!-- $1 -->$0

dcAdd a comment<div class=!-- $1 -->$0

gaGoogle Analytics snippet

scSpan with class<span class="$1">$2</span>$0

secSection with class<section class="$1">$2</section>$0

Javascript

Javascript style is no semicolons and tab indenting.

clconsole.log($1)$0

comAdd a comment/* $1 */ $0

method

${1:name}: function ($2) {
$3
},

si

setInterval(function() {
${2}
}, ${1:1000})$0

st

setTimeout(function() {
${2}
}, ${1:1000})$0

vstvar self = this

Node

memodule.exports = ${1:name}

peprocess.exit(${1:0})$0

revar ${1:module} = require('${1:module}')$0

Vue

importimport ${1:module} from './${1:module}'$0

vcdata

data () {
return {
${1:name}: ${2:data}
}
},$0

vcomponentBase Vue component

vdirectiveBase Vue directive

---

Setup

Set up theme

• Install Package Control: Cmd + Shift + P -> Install Package Manager

• Install and activate ayu theme: https://packagecontrol.io/packages/ayuCmd + Shift + P -> ayu: Activate theme -> ayu mirage

• Set up a symlink between repo preferences and sublime preferences, e.g. ln -s ~/Projects/sublime/Preferences.sublime-settings ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/Preferences.sublime-settings

Link snippets

• Set up a symlink between this repo's snippets folder and Sublime's User Settings folder, e.g. ln -s ~/Projects/sublime/Snippets/ ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/

Why Sublime?

It's simple and fast, e.g.: https://pavelfatin.com/typing-with-pleasure/https://blog.xinhong.me/post/sublime-text-vs-vscode-vs-atom-performance-dec-2016/