VSCodeのスニペットを整えたら爆速になった話

2025.07.29 09:00
2025.07.22 09:36
VSCodeのスニペットを整えたら爆速になった話

はじめに

SCSSのネストをやめて、BEMで全クラスを書いていたら、タイピング量がものすごいことになりました。指が疲れるし、長いクラス名を毎回打つのはさすがにしんどい…。で、前回の記事の中で「VSCodeのスニペットを活用」というのをピックアップしてみました。

ちなみにスニペットは、「毎回手で書くのは面倒だけど、何度も出てくる決まったパターン」を登録しておくと、タイピングが爆速になる便利ツールのことですね。

僕が設定したスニペットの考え方

  • よく使うパターンを1発で呼び出せるようにする
  • BEMの記法やFLOCSSのprefixを省略できるようにする
  • SCSSだけじゃなく、HTMLでも使えるようにする
  • 補完候補に出やすい短いprefixにする

スニペット例

{
  "BEM Block": {
    "prefix": "bblock",
    "body": [
      ".${1:block} {",
      "  $0",
      "}"
    ],
    "description": "BEM Block"
  },
  "BEM Element": {
    "prefix": "belem",
    "body": [
      ".${1:block}__${2:element} {",
      "  $0",
      "}"
    ],
    "description": "BEM Element"
  },
  "BEM Modifier": {
    "prefix": "bmod",
    "body": [
      ".${1:block}--${2:modifier} {",
      "  $0",
      "}"
    ],
    "description": "BEM Modifier"
  },
  "MQ": {
    "prefix": "mq",
    "body": [
      "@include mq(${1:md}) {",
      "  $0",
      "}"
    ],
    "description": "Media Query"
  }
}

補足

  • スニペットは VSCode のメニューから
    ⌘⇧P → 「ユーザースニペット: Configure User Snippets」で編集できる。
  • 言語ごとに分けて書くと管理しやすい。
  • 補完候補が多すぎると逆に使いづらいので、よく使うものだけに絞るのがおすすめ。

まとめ

スニペットを整えるだけで、BEMの長ったらしいクラス名も一瞬で書けるし、無駄なストレスが減りました。
地味だけど、作業効率を大きく上げてくれるので、もっと早くやればよかったと思います。

もし興味があれば、このJSONをコピペして、自分用にカスタマイズしてみてください！

今回は以上です！