VScode スニペット登録方法と注意点記事にしました。コードを書く時間短縮・スペルミスによるエラー減少になるのでオススメ！【サンプルコード有り】

VScodeを使ってコードを書いてる時、スニペットに
前もって任意のコードを登録しとくと、登録した
文字で自動でコードを記入してくれる機能がある。

その登録方法と注意点を記事にしてみました。
この作業は、スニペットを登録すると言います。

登録していけばコーディング作業の時短になるので
おススメです。
登録してれば、コードのスペルミスによるエラーも激減！

例えば
mq と記入してEnterクリックで

<?php if ( have_posts() ) : while ( have_posts() ) : the_post();?>

<?php endwhile; endif; ?>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post();?>

<?php endwhile; endif; ?>

↑登録しておくと、これが自動で表示されま。

スニペット登録画面を表示する方法
1. 登録画面開く方法もう１つ
自作スニペットを登録する方法
1. スニペットの記述例
2. 複数のスニペットを登録
フリーランス案件

スニペット登録画面を表示する方法

実際に登録する手順になります。Windowsでの方法になります。

VScodeを開いて、左上 ファイル をクリック。

ユーザー設定にカーソル合わせます。
すると一覧表示が出るので、その中の
ユーザースニペットの構成をクリック。

すると下記の画面が表示されるので、この中から今回
登録するコードの言語の種類を選択。

もしくは自分で任意の名前のファイル作成する場合は、
新しいグローバルスニペットファイル・・・をクリック。

すると登録画面になるのでそこに記述していきます。
これで、登録は完了です。

登録画面開く方法もう１つ

画面左下、歯車マークをクリック。

ユーザースニペットクリックでも可能です。

自作スニペットを登録する方法

スニペット登録画面開くと、英語で記述方法等が書かれてますが
削除していきます。
その際に、上下にある｛｝は削除しないように注意！

スニペットの記述例

下記はcssにbgi⇒ENterで背景に画像を挿入する時のコード
が表示されます。

"バックグランドに画像": {
"prefix": "bgi",//呼び出すときの記号
"body": [　//body[ここに書いたコードが表示される。
"background-image: url();"
"background-repeat: no-repeat;"
"background-position: center;"
"background-size: cover;"
],
"description": "Prints 'バックグランドに画像指定"//スニペット名
}

"バックグランドに画像": {

"prefix": "bgi",//呼び出すときの記号

"body": [　//body[ここに書いたコードが表示される。

"background-image: url();"

"background-repeat: no-repeat;"

"background-position: center;"

"background-size: cover;"

"description": "Prints 'バックグランドに画像指定"//スニペット名

}

↑こんな感じで記述していきます。

また、コードが表示された時にカーソルの位置の指定も可能。
カーソルをあてたいところに ‘$1’ と記述します。
すると、その場所にカーソルがある状態でコードが表示されます。

"prefix": "bgi",
"body": [　
"background-image: url('$1');",//url(ここにカーソルが表示される)
"background-repeat: no-repeat;",
"background-position: center;",
"background-size: cover;",
],
"description": "Prints 'バックグランドに画像指定"
}

"prefix": "bgi",

"body": [　

"background-image: url('$1');",//url(ここにカーソルが表示される)

"background-repeat: no-repeat;",

"background-position: center;",

"background-size: cover;",

"description": "Prints 'バックグランドに画像指定"

}

複数のスニペットを登録

複数のスニペットを登録する場合には下記の点に注意する必要があります。

スニペットの名前ダブらないようにしましょう。
万一同じ名前を持つスニペットが複数ある場合、
最後に定義されたスニペットが優先されます。

表示したいコード内に”　”がある場合は、’　’ で記述しましょう。
”　”で書いちゃうとうまく動作しなくなる。

複数のスニペットを登録する場合は、各スニペットの最後の　}の後ろに,をつける。

以上の点に注意して、複数のスニペットを登録することができます。

"バックグランドに画像": {
"prefix": "bgi",
"body": [
"background-image: url('$1');",
"background-repeat: no-repeat;",
"background-position: center;",
"background-size: cover;",
],
"description": "Prints 'バックグランドに画像指定"
},//ここに , の記述が必要。

"header.phpの読み込み": {
"prefix": "gh",
"body": [
"<?php get_header(); ?>"
],
"description": "get_header(header.phpの読み込み)"
},