![](https://hrdyuic.com/wp-content/uploads/8335d558d151e09a696fb916ebabfbd5.png)
「良く使うコード」や「長いコード」をスニペット登録して呼び出せるようにすることで作業効率をアップさせたいんだけど登録方法が分からないので教えてほしいです。
こういった悩みにお答えします。
本記事で解決できること
- スニペットとは?
- スニペットの登録前後での作業効率の違い。
- スニペットの登録方法
- VSCode用スニペット作成ツールが手に入る。
- スニペットを複数登録する際の注意点
![](https://hrdyuic.com/wp-content/uploads/plug-ge9236baff_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/plug-ge9236baff_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/growtika-9WnjxT1NCoY-unsplash.jpg)
![](https://hrdyuic.com/wp-content/uploads/growtika-9WnjxT1NCoY-unsplash.jpg)
是非、最後までご覧ください。
【VSCode】スニペットを登録してWeb制作の作業効率アップ
スニペットとは?
登録したキーワードを入力することで良く使うコードや長いコードを呼び出すことができるので、コーディングの作業効率がアップします(コーディングの時間短縮にも繋がります)。
スニペットの登録前後の実例
スニペット登録前
スニペット登録後
スニペット登録前の秒数を見て頂ければ分かりますが、作業効率が約5分の1まで短縮されています。
下記動画のように頭文字だけで入力するとさらに短縮されます。
このように、スニペットを登録しておくことで作業効率がアップします(コーディングの時間短縮にも繋がります)。
スニペットの登録方法
「 」>「ユーザースニペット」を選択します。
![](https://hrdyuic.com/wp-content/uploads/bf879c9ad35ed911356b3f4130b7b48b.jpg)
![](https://hrdyuic.com/wp-content/uploads/bf879c9ad35ed911356b3f4130b7b48b.jpg)
css.json (CSS) を選択します。
![](https://hrdyuic.com/wp-content/uploads/2e5fee35b3332ae561507e499b45d152.jpg)
![](https://hrdyuic.com/wp-content/uploads/2e5fee35b3332ae561507e499b45d152.jpg)
css.jsonの中身が表示されました。
この中に呼び出すために必要なコードを書きます。
![](https://hrdyuic.com/wp-content/uploads/3cdf894fb05f53afb7b1adeee6d5ff93.jpg)
![](https://hrdyuic.com/wp-content/uploads/3cdf894fb05f53afb7b1adeee6d5ff93.jpg)
書き方
{
// Place your snippets for css here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"s
// ],
// "description": "Log output to console"
// }
"スニペット名": {
"prefix": "キーワード",
"body": [
"呼び出したいコード1行目",
"呼び出したいコード2行目",
"呼び出したいコード3行目",
],
"description": "スニペットの説明"
}
}
コードを書くにあたっては下記のツールを使用します。
VSCodeスニペット用コード作成ツールにアクセスします。
スニペット用コードの作成手順
- 手順①:スニペット名(コードを呼び出すためのキーワード)を入力します。
- 手順②:呼び出したいコードを記述します。
- 手順③:「スニペットを作成」をクリックします。
![](https://hrdyuic.com/wp-content/uploads/4fdecdda19824a27ef71c90e5c5ab737.jpg)
![](https://hrdyuic.com/wp-content/uploads/4fdecdda19824a27ef71c90e5c5ab737.jpg)
上記の「スニペットを作成」をクリックすると、下記画像のVSCodeスニペット用コードが作成されますので「クリップボードにコピー」をクリックします。
![](https://hrdyuic.com/wp-content/uploads/d5b2e57da497f396929346b92bdb17b8.jpg)
![](https://hrdyuic.com/wp-content/uploads/d5b2e57da497f396929346b92bdb17b8.jpg)
それをcss.jsonに貼り付けます。
css.jsonにスニペット用コードを貼り付けました。
![](https://hrdyuic.com/wp-content/uploads/5cba4b4bde08664965e49ecda62efa83.jpg)
![](https://hrdyuic.com/wp-content/uploads/5cba4b4bde08664965e49ecda62efa83.jpg)
これで、キーワードを入力することでコードを呼び出せるようになりました。
スニペットを複数登録する場合
※スニペット間のコンマ( , )を忘れずに打ちましょう!
{
// Place your snippets for css here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"s
// ],
// "description": "Log output to console"
// }
"スニペット名①": {
"prefix": "キーワード",
"body": [
"呼び出したいコード1行目",
"呼び出したいコード2行目",
"呼び出したいコード3行目",
],
"description": "スニペットの説明"
}, // ⇦スニペット間のコンマ(,)を忘れずに!
"スニペット名②": {
"prefix": "キーワード",
"body": [
"呼び出したいコード1行目",
"呼び出したいコード2行目",
"呼び出したいコード3行目",
],
"description": "スニペットの説明"
}
}
今回は以上です。