Главная » Языки программирования

$2

Содержание
  1. Using
  2. HTML/Pug/Jade
  3. $1
  4. $1
  5. $1
  6. $1
  7. JavaScript/Typescript
  8. CSS/Sass/Less/Stylus
  9. License
  10. VSCode CSS Snippets
  11. Installation
  12. Table of Contents
  13. Snippets
  14. Common
  15. CSS Reset
  16. Pseudo Styles
  17. Breakpoints
  18. Создание своих сниппетов в VS Code
  19. Видео по сниппетам в VS Code
  20. Материалы из видео

Using

HTML/Pug/Jade

$2

$1$1

$2

$1$1

$2

$1

$2

Prefix Snippets
doctype $1
a $2$3
abbr $2$3
address
$1
area $5
article
$1
aside

$2
audio
b $1$2
base $3
bdi $1$2
bdo $2
big $1$2
blockquote

$1
body $1
br
button $3
canvas
caption
$1
cite $1$2
code $1$2
col $2
colgroup
command $1$2
datalist $1
dd
$1

$2
del $1$2
details
$1
dialog $1$2
dfn $1$2
div
$1
dl
$1
dt
$1

$2
em $1$2
embed $2
fieldset
$1
figcaption
$1
$2
figure
$1
footer
$1
form
$1
h1

$1

$2
h2

$1

$2
h3

$1

$2
h4

$1

$2
h5
$1

$2
h6
$1

$2
head $1
header
$1
hgroup
$1
hr
html $1
html5 $4
i $1$2
iframe $3
img $2$3
input $4
ins $1$2
keygen $2
kbd $1$2
label $3
legend $1

$2
li $1$2
link $4
main
$1
map $2
mark $1$2
menu $1
menuitem $1$2
meta $3
meter $2$3
nav
noscript
object $4$5
ol
    $1
optgroup $1
option $3
output $3$4
p

$1

$2
param $3
pre 
$1
progress $3$4
q $1$2
rp $1$2
rt $1$2
ruby $1
s $1$2
samp $1$2
script
section
$1
select
small $1$2
source $3
span $1$2
strong $1$2
style
sub $1$2
sup $1$2
summary $1

$2
table $1
tbody
td $1
textarea $4
tfoot
thead
th $1
time $3
title $2
tr
track $5
u $1$2
ul
    $1
var $1$2
video

JavaScript/Typescript

Prefix Snippets
imp→ import fs from ‘fs’;
imn→ import ‘animate.css’
imd→ import 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()
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 = 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

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

License

Источник

VSCode CSS Snippets

Collection of CSS Snippets to make your life easier by auto-completing common css rules, Tailwind utility classes as css rules — Tailwind and 1 line layouts It’s not debatable, most of us got used to utility classes from Tailwind, BootStrap etc,. But when you come back to write plain CSS, wouldn’t be great to have those utility classes converted as snippets instead of typing the CSS rules? Apart from CSS Utility snippets, collection of snippets from popular CSS examples found all over the web can be found. To see the list of all the CSS Snippets, go here → Want to have your own favourite CSS Snippets in this extension, see Contributing →

Installation

Install via the Visual Studio Code Marketplace → You can enable tab completion (recommended) by opening Code > Preferences > Settings (on a Mac) and applying «editor.tabCompletion»: «onlySnippets» to your personal settings

Table of Contents

Оцените статью
© 2024 Программирование