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;| Prefix | Snippets |
|---|---|
| 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> |
| Prefix | Snippets |
|---|---|
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 |
| Prefix | Snippets |
|---|---|
ai |
align-items : flex-start; |
aib |
align-items : baseline; |
aic |
align-items : center; |
aifs |
align-items : flex-start; |
aife |
align-items : flex-end; |
ais |
align-items : stretch; |
as |
align-self : flex-start; |
ani |
animation : name 1s linear; |
anide |
animation-delay : 1s; |
anidi |
animation-direction : alternate; |
anidu |
animation-duratuion : 1s; |
anifm |
animation-fill-mode : forwards; |
aniic |
animation-iteration-count: infinite; |
anin |
animation-name : name; |
anips |
animation-play-state : paused; |
anitf |
animation-timing-function: linear; |
bg |
background : #fff; |
bga |
background-attachment : fixed; |
bgc |
background-color : #fff; |
bgcl |
background-clip : border-box; |
bgi |
background-image : url("background.jpg"); |
bgo |
background-origin : border-box; |
bgp |
background-position : left top; |
bgr |
background-repeat : no-repeat; |
bgrr |
background-repeat : repeat; |
bgrx |
background-repeat : repeat-x; |
bgry |
background-repeat : repeat-y; |
bgrn |
background-repeat : no-repeat; |
bgs |
background-size : cover; |
bor |
border : 1px solid #000; |
born |
border : none; |
borc |
border-color : #000; |
bors |
border-style : solid; |
borw |
border-width : 1px; |
borb |
border-bottom : 1px solid #000; |
borl |
border-left : 1px solid #000; |
borr |
border-right : 1px solid #000; |
bort |
border-top : 1px solid #000; |
br |
border-radius : 2px; |
bot |
bottom : 0; |
bos |
box-shadow : 1px 1px 1px 1px rgba(0, 0, 0, .5); |
boz |
box-sizing : border-box; |
clr |
clear : both; |
col |
color : #000; |
con |
content : ''; |
cur |
cursor : auto; |
curp |
cursor : pointer; |
curd |
cursor : default; |
dis |
display : none; |
disb |
display : block; |
disi |
display : inline-block; |
disn |
display : none; |
disf |
display : flex; |
flex |
flex : 1 1 auto; |
fle |
flex : 1 1 auto; |
fld |
flex-direction : row; |
fldr |
flex-direction : row; |
fldc |
flex-direction : column; |
flf |
flex-flow : row, wrap; |
flw |
flex-wrap : wrap; |
fl |
float : left; |
fll |
float : left; |
flr |
float : right; |
fln |
float : none; |
ff |
font-family : arial; |
fz |
font-size : 12px; |
fst |
font-style : italic; |
fsti |
font-style : italic; |
fstn |
font-style : normal; |
fsto |
font-style : oblique; |
fw |
font-weight : bold; |
fwb |
font-weight : bold; |
fwl |
font-weight : light; |
fwn |
font-weight : normal; |
ft |
font : 12px/1.5; |
hei |
height : 1px; |
jc |
justify-content : flex-start; |
jcfe |
justify-content : flex-end; |
jcfs |
justify-content : flex-start; |
jcc |
justify-content : center; |
jcsa |
justify-content : space-around; |
jcsb |
justify-content : space-between; |
lis |
list-style : disc outside; |
lisp |
list-style-position : outside; |
list |
list-style-type : disc; |
listc |
list-style-type : circle; |
listd |
list-style-type : disc; |
listlr |
list-style-type : lower-roman; |
listn |
list-style-type : none; |
lists |
list-style-type : square; |
listur |
list-style-type : upper-roman; |
lef |
left : 0; |
lh |
line-height : 1.5; |
ls |
letter-spacing : 2px; |
lsn |
letter-spacing : normal; |
mar |
margin : 0; |
marb |
margin-bottom : 0; |
marl |
margin-left : 0; |
marr |
margin-right : 0; |
mart |
margin-top : 0; |
mara |
margin : 0 auto; |
mih |
min-height : 1px; |
miw |
min-width : 1px; |
mah |
max-height : 1px; |
maw |
max-width : 1px; |
opa |
opacity : 0; |
ov |
overflow : visible; |
ova |
overflow : auto; |
ovh |
overflow : hidden; |
ovs |
overflow : scroll; |
ovv |
overflow : visible; |
pad |
padding : 0; |
padb |
padding-bottom : 0; |
padl |
padding-left : 0; |
padr |
padding-right : 0; |
padt |
padding-top : 0; |
pos |
position : relative; |
posa |
position : absolute; |
posf |
position : fixed; |
posr |
position : relative; |
poss |
position : sticky; |
rig |
right : 0; |
ta |
text-align : center; |
tac |
text-align : center; |
tal |
text-align : left; |
tar |
text-align : right; |
td |
text-decoration : none; |
tdu |
text-decoration : underline; |
tdn |
text-decoration : none; |
tdl |
text-decoration : line-through; |
ti |
text-indent : 2em; |
ts |
text-shadow : 1px 1px 1px 1px rgba(0, 0, 0, .5); |
tt |
text-transform : capitalize; |
top |
top : 0; |
va |
vertical-align : baseline; |
vab |
vertical-align : bottom; |
vam |
vertical-align : middle; |
vat |
vertical-align : top; |
vis |
visibility : visible; |
visv |
visibility : visible; |
vish |
visibility : hidden; |
wb |
word-break : break-all; |
wid |
width : 0; |
wida |
width : auto; |
ws |
white-space : nowrap; |
wsn |
white-space : nowrap; |
wsp |
white-space : pre; |
ww |
word-wrap : break-word; |
zi |
z-index : -1; |
imp |
@import 'filename'; |
inc |
@include mixin; |
key |
@keyframes name {}; |
med |
@media screen and (max-width: 300px) {} |
mix |
@mixin name {} |
! |
!important |
i |
!important |
HTML/CSS/JavaScript Snippets is released under the MIT.