VSCodeのスニペット機能で定型コードを秒速挿入｜現場で使える実践テクニック
こんにちは！
今日は「VSCodeのスニペット機能で定型コードを秒速挿入」について解説します。
スニペット機能って何？僕の失敗談から始まります
実は僕も最初、VSCodeのスニペット機能って「難しそうだな」って敬遠してたんですよ。
新卒の時は、毎回フレックスボックスのコードをコピペして、パパッと直すっていう、ほんまに非効率な作業をしてました。
いや、ほんまにもったいなかった。
スニペット機能っていうのは、簡単に言うと「短いキーワードを入力して、あらかじめ登録したコードブロックを自動挿入する機能」です。
たとえば、flexって打ってTabキーを押すと、フレックスボックスの基本コードがバーッと出てくる、みたいなやつですね。
これを使えば、毎回同じコードを手で書く手間が本当になくなります。
現場でよく見るのは、この機能を知らずに延々とコピペしてる後輩たちなんですよ。
僕がこの話をすると、みんな「えっ、そんな便利な機能あるんですか？」って驚くんです。
スニペットの設定方法は意外とシンプル
VSCodeでスニペットを作成するのは、めっちゃ簡単です。
難しく考えなくて大丈夫ですよ。
まず、VSCodeの左下にあるギアアイコンから「ユーザー設定」を開きます。
そして「設定」の検索窓に「snippet」って入力すると、「Configure User Snippets」が出てきます。
そこをクリックすると、スニペットの編集画面が開きます。
スニペットの基本形式はこんな感じです。
"Flexbox Layout": {
"prefix": "flex",
"body": [
".container {",
" display: flex;",
" justify-content: center;",
" align-items: center;",
"}"
],
"description": "Flexbox container"
}
ここで大事なのは三つです。
一つ目は prefix で、これが実際に打つキーワードになります。
二つ目は body で、ここに展開されるコードを書きます。
三つ目は description で、サジェスト時に表示される説明文ですね。
$1、$2 みたいなプレースホルダーを入れると、展開後にカーソルが自動で移動します。
これほんまに便利ですよ。
現場で役立つスニペット活用例
では、実際の現場で役に立つスニペット例をいくつかご紹介します。
HTML基本テンプレート
"HTML Template": {
"prefix": "htmlbase",
"body": [
"<!DOCTYPE html>",
"<html lang=\"ja\">",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <title>$1</title>",
"</head>",
"<body>",
" $2",
"</body>",
"</html>"
],
"description": "Basic HTML template"
}
これを htmlbase で登録しておくと、新しいHTMLファイルを作った時に一瞬で基本テンプレートが挿入されます。
毎回 DOCTYPE から meta タグまで書く手間が完全になくなりますよ。
レスポンシブなメディアクエリ
"Media Query Mobile": {
"prefix": "mq",
"body": [
"@media (max-width: 768px) {",
" $1",
"}"
],
"description": "Media query for mobile"
}
mq って打ってEnterを押すと、メディアクエリの枠組みが出てきます。
現場でレスポンシブ対応をしてると、これめっちゃ使う機会ありますよ。
JavaScriptのイベントリスナー
"Event Listener": {
"prefix": "evl",
"body": [
"document.querySelector(‘$1’).addEventListener(‘$2’, function() {",
" $3",
"});"
],
"description": "Basic event listener"
}
これで evl を打つだけで、イベントリスナーの基本形が出てきます。
セレクター、イベント名、処理内容の三か所に $1、$2、$3 を入れてるので、Tabキーで順に移動しながら必要な部分だけ打てばいいんです。
まとめ
VSCodeのスニペット機能は、本当に地味だけどめっちゃ効果的な時短テクニック