Zenn
🤖

HTML・CSSコーディングでよく使うVScodeスニペット集

2020/09/30に公開
CSS
HTML
JavaScript
Scss
VS Code
tech

日頃マークアップで使用しているVScodeのスニペットをまとめてみました。

スニペットの指定方法

VScodeを開いて
Code(WindowはFile) → Prefences→ User Snippets
から、スニペットを指定したい言語を選ぶ

あとはデフォルトの記述例に従ってjsonファイルにスニペットを記載していく

使い方

設定した言語のファイルを開いて、"prefix"に指定した単語を入力してTabキーを押せば展開される

例：
html.jsonで以下のスニペットを指定した場合

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

.htmlファイルでtestと入力してTabキーを押すと以下のようにコードが展開される

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

また、スニペット内に$1と入力するとTabで展開したときに$1の部分にカーソルが置かれる
$2,$3と入力するとTabキーを押す毎に$2,$3の部分にカーソルが移動する

スニペット一覧

HTML（PHP）

HTMLは基本的にEmmetで事足りるのでスニペットはほとんど使用しなくていいと思っています
強いて言うならの一つが以下のスニペット

.php

php記述の囲いを呼び出すスニペット
マークアップでもフォームやWordPress.phpファイルを扱うことがあるのであると便利

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

CSS（SCSS）

css兼scss用のスニペットになります
css.jsonとscss.jsonにそれぞれ書き込む必要があるので注意です。

FlexBox

FlexBoxを呼び出すスニペット
align-itemsやjustify-contentなどオプションはいろいろありますが、この形が体感で一番よく使っています

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

position: absolute

position: 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

擬似要素を
contentは必須＆慣れないうちは忘れやすいのでスニペットで書いてしまいます
displayも大抵必要なのでセットで指定

"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のonClick

jQueryのonClick指定のスニペット
使用頻度に応じてonChangeやresizeなど追加しても良いかも

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

まとめ

マークアップの場合、基本はCSSにスニペットを追加するのが良いです
（1番コードを書く時間が長いので

ただし増やしすぎるとどのスニペットがあったか忘れがちになるので、特に使用頻度が高いものだけスニペットを作成しておくとコーディングが捗ります

Discussion