Home

Awesome

Using

Just enter the prefix name, and the complete code snippet will be automatically completed.

div →
<div></div>
doc → <!DOCTYPE html>

imp → import xxx from xxx;
clo → console.log(xxx);

col → color: #000;
bg  → background: #fff;

HTML/Pug/Jade

PrefixSnippets
doctype<!DOCTYPE>$1
a<a href="$1">$2</a>$3
abbr<abbr title="$1">$2</abbr>$3
address<address>$1</address>
area<area shape="$1" coords="$2" href="$3" alt="$4">$5
article<article>$1</article>
aside<aside>$1</aside>$2
audio<audio controls>$1</audio>
b<b>$1</b>$2
base<base href="$1" target="$2">$3
bdi<bdi>$1</bdi>$2
bdo<bdo dir="$1">$2</bdo>
big<big>$1</big>$2
blockquote<blockquote cite="$2">$1</blockquote>
body<body>$1</body>
br<br>
button<button type="$1">$2</button>$3
canvas<canvas id="$1">$2</canvas>$3
caption<caption>$1</caption>$2
cite<cite>$1</cite>$2
code<code>$1</code>$2
col<col>$2
colgroup<colgroup>$1</colgroup>
command<command>$1</command>$2
datalist<datalist>$1</datalist>
dd<dd>$1</dd>$2
del<del>$1</del>$2
details<details>$1</details>
dialog<dialog>$1</dialog>$2
dfn<dfn>$1</dfn>$2
div<div>$1</div>
dl<dl>$1</dl>
dt<dt>$1</dt>$2
em<em>$1</em>$2
embed<embed src="$1">$2
fieldset<fieldset>$1</fieldset>
figcaption<figcaption>$1</figcaption>$2
figure<figure>$1</figure>
footer<footer>$1</footer>
form<form>$1</form>
h1<h1>$1</h1>$2
h2<h2>$1</h2>$2
h3<h3>$1</h3>$2
h4<h4>$1</h4>$2
h5<h5>$1</h5>$2
h6<h6>$1</h6>$2
head<head>$1</head>
header<header>$1</header>
hgroup<hgroup>$1</hgroup>
hr<hr>
html<html>$1</html>
html5<!DOCTYPE html><html lang="$1en"><head><title>$2</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="$3css/style.css" rel="stylesheet"></head><body>$4</body></html>
i<i>$1</i>$2
iframe<iframe src="$1">$2</iframe>$3
img<img src="$1" alt="$2">$3
input<input type="$1" name="$2" value="$3">$4
ins<ins>$1</ins>$2
keygen<keygen name="$1">$2
kbd<kbd>$1</kbd>$2
label<label for="$1">$2</label>$3
legend<legend>$1</legend>$2
li<li>$1</li>$2
link<link rel="$1" type="$2" href="$3">$4
main<main>$1</main>
map<map name="$1">$2</map>
mark<mark>$1</mark>$2
menu<menu>$1</menu>
menuitem<menuitem>$1</menuitem>$2
meta<meta name="$1" content="$2">$3
meter<meter value="$1">$2</meter>$3
nav<nav>$1</nav>
noscript<noscript>$1</noscript>
object<object width="$1" height="$2" data="$3">$4</object>$5
ol<ol>$1</ol>
optgroup<optgroup>$1</optgroup>
option<option value="$1">$2</option>$3
output<output name="$1" for="$2">$3</output>$4
p<p>$1</p>$2
param<param name="$1" value="$2">$3
pre<pre>$1</pre>
progress<progress value="$1" max="$2">$3</progress>$4
q<q>$1</q>$2
rp<rp>$1</rp>$2
rt<rt>$1</rt>$2
ruby<ruby>$1</ruby>
s<s>$1</s>$2
samp<samp>$1</samp>$2
script<script>$1</script>
section<section>$1</section>
select<select>$1</select>
small<small>$1</small>$2
source<source src="$1" type="$2">$3
span<span>$1</span>$2
strong<strong>$1</strong>$2
style<style>$1</style>
sub<sub>$1</sub>$2
sup<sup>$1</sup>$2
summary<summary>$1</summary>$2
table<table>$1</table>
tbody<tbody>$1</tbody>
td<td>$1</td>$2
textarea<textarea rows="$1" cols="$2">$3</textarea>$4
tfoot<tfoot>$1</tfoot>
thead<thead>$1</thead>
th<th>$1</th>$2
time<time datetime="$1">$2</time>$3
title<title>$1</title>$2
tr<tr>$1</tr>$2
track<track src="$1" kind="$2" srclang="$3" label="$4">$5
u<u>$1</u>$2
ul<ul>$1</ul>
var<var>$1</var>$2
video<video width="$1" height="$2" controls>$3</video>

JavaScript/Typescript

PrefixSnippets
imp→import fs from 'fs';
imn→import 'animate.css'
imd→import {rename} from 'fs';
ime→import * as localAlias from 'fs';
ima→import { rename as localRename } from 'fs';
rqr→require('');
req→const packageName = require('packageName');
mde→module.exports = {};
env→export const nameVariable = localVariable;
enf→export const log = (parameter) => { console.log(parameter);};
edf→export default function fileName (parameter){ console.log(parameter);};
ecl→export default class Calculator { };
ece→export default class Calculator extends BaseClass { };
con→constructor() {}
met→add() {}
pge→get propertyName() {return value;}
pse→set propertyName(value) {}
fre→array.forEach(currentItem => {})
fof→for(const item of object) {}
fin→for(const item in object) {}
anfn→(params) => {}
nfn→const add = (params) => {}
dob→const {rename} = fs
dar→const [first, second] = [1,2]
sti→setInterval(() => {});
sto→setTimeout(() => {});
prom→return new Promise((resolve, reject) => {});
thenc→.then((res) => {}).catch((err) => {});
cas→console.assert(expression, object)
ccl→console.clear()
cco→console.count(label)
cdb→console.debug(object)
cdi→console.dir
cer→console.error(object)
cgr→console.group(label)
cge→console.groupEnd()
clg→console.log(object)
clo→console.log('object :>> ', object);
ctr→console.trace(object)
cwa→console.warn
cin→console.info
clt→console.table
cti→console.time
cte→console.timeEnd

CSS/Sass/Less/Stylus

PrefixSnippets
aialign-items : flex-start;
aibalign-items : baseline;
aicalign-items : center;
aifsalign-items : flex-start;
aifealign-items : flex-end;
aisalign-items : stretch;
asalign-self : flex-start;
anianimation : name 1s linear;
anideanimation-delay : 1s;
anidianimation-direction : alternate;
aniduanimation-duratuion : 1s;
anifmanimation-fill-mode : forwards;
aniicanimation-iteration-count: infinite;
aninanimation-name : name;
anipsanimation-play-state : paused;
anitfanimation-timing-function: linear;
bgbackground : #fff;
bgabackground-attachment : fixed;
bgcbackground-color : #fff;
bgclbackground-clip : border-box;
bgibackground-image : url("background.jpg");
bgobackground-origin : border-box;
bgpbackground-position : left top;
bgrbackground-repeat : no-repeat;
bgrrbackground-repeat : repeat;
bgrxbackground-repeat : repeat-x;
bgrybackground-repeat : repeat-y;
bgrnbackground-repeat : no-repeat;
bgsbackground-size : cover;
borborder : 1px solid #000;
bornborder : none;
borcborder-color : #000;
borsborder-style : solid;
borwborder-width : 1px;
borbborder-bottom : 1px solid #000;
borlborder-left : 1px solid #000;
borrborder-right : 1px solid #000;
bortborder-top : 1px solid #000;
brborder-radius : 2px;
botbottom : 0;
bosbox-shadow : 1px 1px 1px 1px rgba(0, 0, 0, .5);
bozbox-sizing : border-box;
clrclear : both;
colcolor : #000;
concontent : '';
curcursor : auto;
curpcursor : pointer;
curdcursor : default;
disdisplay : none;
disbdisplay : block;
disidisplay : inline-block;
disndisplay : none;
disfdisplay : flex;
flexflex : 1 1 auto;
fleflex : 1 1 auto;
fldflex-direction : row;
fldrflex-direction : row;
fldcflex-direction : column;
flfflex-flow : row, wrap;
flwflex-wrap : wrap;
flfloat : left;
fllfloat : left;
flrfloat : right;
flnfloat : none;
fffont-family : arial;
fzfont-size : 12px;
fstfont-style : italic;
fstifont-style : italic;
fstnfont-style : normal;
fstofont-style : oblique;
fwfont-weight : bold;
fwbfont-weight : bold;
fwlfont-weight : light;
fwnfont-weight : normal;
ftfont : 12px/1.5;
heiheight : 1px;
jcjustify-content : flex-start;
jcfejustify-content : flex-end;
jcfsjustify-content : flex-start;
jccjustify-content : center;
jcsajustify-content : space-around;
jcsbjustify-content : space-between;
lislist-style : disc outside;
lisplist-style-position : outside;
listlist-style-type : disc;
listclist-style-type : circle;
listdlist-style-type : disc;
listlrlist-style-type : lower-roman;
listnlist-style-type : none;
listslist-style-type : square;
listurlist-style-type : upper-roman;
lefleft : 0;
lhline-height : 1.5;
lsletter-spacing : 2px;
lsnletter-spacing : normal;
marmargin : 0;
marbmargin-bottom : 0;
marlmargin-left : 0;
marrmargin-right : 0;
martmargin-top : 0;
maramargin : 0 auto;
mihmin-height : 1px;
miwmin-width : 1px;
mahmax-height : 1px;
mawmax-width : 1px;
opaopacity : 0;
ovoverflow : visible;
ovaoverflow : auto;
ovhoverflow : hidden;
ovsoverflow : scroll;
ovvoverflow : visible;
padpadding : 0;
padbpadding-bottom : 0;
padlpadding-left : 0;
padrpadding-right : 0;
padtpadding-top : 0;
posposition : relative;
posaposition : absolute;
posfposition : fixed;
posrposition : relative;
possposition : sticky;
rigright : 0;
tatext-align : center;
tactext-align : center;
taltext-align : left;
tartext-align : right;
tdtext-decoration : none;
tdutext-decoration : underline;
tdntext-decoration : none;
tdltext-decoration : line-through;
titext-indent : 2em;
tstext-shadow : 1px 1px 1px 1px rgba(0, 0, 0, .5);
tttext-transform : capitalize;
toptop : 0;
vavertical-align : baseline;
vabvertical-align : bottom;
vamvertical-align : middle;
vatvertical-align : top;
visvisibility : visible;
visvvisibility : visible;
vishvisibility : hidden;
wbword-break : break-all;
widwidth : 0;
widawidth : auto;
wswhite-space : nowrap;
wsnwhite-space : nowrap;
wspwhite-space : pre;
wwword-wrap : break-word;
ziz-index : -1;
imp@import 'filename';
inc@include mixin;
key@keyframes name {};
med@media screen and (max-width: 300px) {}
mix@mixin name {}
!!important
i!important

License

HTML/CSS/JavaScript Snippets is released under the MIT.