HTML·CSS 인코딩에 자주 사용되는 VScode sni 펫 세트

다음은 평소 표시에 사용되는 VScode의 가벼운 애완동물을 정리한 것이다.

지정 방법

VScode 열기
Code(Window는 File) → Prefences → User Snipets
구문을 사용합니다.

그리고 기본 설명례에 따라 json 파일에 sni 애완동물을 기록합니다

사용법

설정된 언어 파일을 열고 prefix에 지정된 단어를 입력한 다음 Tab 키를 눌러 확장합니다.
예:
html.json에서 다음 sni 애완동물을 지정할 때

"test1": {
  "prefix": "test",
  "body": [
    "<div class="test">test</div>"
  ]
},

.> 파일에 test를 입력하고 Tab 키를 누르면 코드가 다음과 같이 확장됩니다.

<div class="test">test</div>

sni 애완동물에 $1을 입력하면Tab에서 펼칠 때 $1의 부분에 커서를 놓습니다
$2, $3을 입력하면 Tab 키를 누를 때마다 커서가 $2, $3 부분으로 이동합니다.

스니 펫 일람표

HTML（PHP）

HTML은 기본적으로 Emmet만 있으면 충분하기 때문에 가벼운 애완동물을 사용할 필요가 없다
꼭 해야 한다면 다음 중 하나는 가벼운 운동이다

.php

php에 기술된 울타리를 호출한 sni 애완동물
태그는 형식 및 WordPress일 수도 있습니다.php 파일을 사용하면 편리합니다

"PHP": {
  "prefix": "php",
  "body": [
    "<?php $1 ?>"
  ]
},

CSS（SCSS）

css 겸 scss용 가벼운 운동입니다.
css.제이슨과 scss.json을 각각 기입해야 한다는 것을 주의하십시오.

FlexBox

FlexBox의 sni 애완동물 호출
align-items,justify-content 등 옵션은 여러 가지가 있는데 이런 형식은 체감적으로 가장 많이 쓰인다

"flexBoxFull": {
  "prefix": "fbf",
  "body": [
    "display: flex;",
    "flex-wrap: wrap;",
    "align-items: center;",
    "justify-content: space-between;"
  ]
},

position: absolute

absolute를 통해 상하좌우 중앙 접근, 상하 중앙 접근, 좌우 중앙 접근
특히 상하좌우 중앙 접근과 상하 중앙 접근은 사용 빈도가 높지만 기술량이 많아 스니 펫에 등록하기 편하다

"absoluteCenter": {
  "prefix": "aba",
  "body": [
    "position: absolute;",
    "top: 50%;",
    "left: 50%;",
    "transform: translate(-50%, -50%);",
  ]
},
"absoluteVerticalCenter": {
  "prefix": "abv",
  "body": [
    "position: absolute;",
    "top: 50%;",
    "left: $1;",
    "transform: translateY(-50%);",
  ]
},
"absoluteHorizontalCenter": {
  "prefix": "abh",
  "body": [
    "position: absolute;",
    "top: $1;",
    "left: 50%;",
    "transform: translateX(-50%);",
  ]
},

background

배경 지정
자주 사용하는 옵션을 지정하고 바로 가기로 요약

"backGroundUrl": {
  "prefix": "bgu",
  "body": [
    "background: url($1) no-repeat center center/cover;",
  ]
},

before,after

위조 요소 식별
conntent는 반드시 & 익숙하지 않을 때 잊어버리기 쉬우므로 애완동물로 쓴다
디스플레이도 대체로 필요하기 때문에 세트로 지정합니다

"before": {
  "prefix": "before",
  "body": [
    "&::before{",
    " content: '';",
    " display: $1",
    "}"
  ],
},

"after": {
"prefix": "after",
  "body": [
    "&::after{",
    " content: '';",
    " display: $1",
    "}"
  ],
},

미디어 쿼리

SCSS가 사용할 수 없을 때 사용할 미디어 쿼리 지정
px부분은 안건에 따라 적절하게 변경해서 사용한다

"@media_max": {
  "prefix": "medimax",
    "body": [
      "@media screen and (max-width: 768px) {",
      "}",
    ]
},
"@media_min": {
  "prefix": "medimin",
  "body": [
    "@media screen and (min-width: 768px) {",
    "}",
  ]
},

include

예를 들어 SCSS에서 다음 mixin을 지정한 경우

@mixin pc($width: 960px){
  @media screen and (min-width: $width){
    @content;
  }
}

아래의 가벼운 애완동물을 적으면include는 쉽게 기술할 수 있습니다.

"include_pc": {
  "prefix": "ip",
  "body": [
    "@include pc {",
      "  $1",
    "}"
  ],
}

mixin의 수량에 따라 적당히 증가 사용

Javascript(jQuery)

줄리의 온클릭.

지정된 애완동물
사용 빈도에 따라 온찬과 리즈 등을 추가할 수 있다

 "jQuery On Click": {
    "prefix": "joc",
    "body": [
      "$('$1').on('click', function() {",
      " $2",
      "});",
    ],
  }

총결산

표시된 경우 기본적으로 CSS에 sni 펫을 추가하는 것이 좋다
(첫 번째 코드를 쓰는 시간이 길다
하지만 너무 많이 늘면 어떤 애완동물이 있는지 잊기 쉬워요. 특히 사용 빈도가 높은 애완동물은 애완동물로 만들면 코딩이 잘 돼요.