Using

December 11, 2020 · View on GitHub

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.