VSCodeの入力を楽にするスニペットの使い方
はじめに
プログラミングエディタとしてVSCodeを使っている方は多いと思います。
多機能なエディタですが、多機能すぎてすべての機能を使いこなしている人はいないでしょう。
今回紹介するのはそのうちの便利機能の１つ、スニペットです。
よく使う文字列を辞書のように登録しておけば、少ない文字数で入力できるという優れものです。
さっそく見ていきましょう。
設定の仕方。
VSCodeを開き、Ctrl + Shift + Pを押します。
「Snippets: Configure Snippets」を検索して選択します。
そうすると、このようにプログラミング言語を選択するメニューが出てくるので、対象の言語を選択します。
試しにjavascriptを選んでみましょう。
そうするとスニペットを登録するjsonが開かれるので、以下のように書いてみます。
{
// Place your snippets for javascript 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"
// ],
// "description": "Log output to console"
// }
"Timestamped Console Log": {
"prefix": "logt",
"body": [
"console.log(`[${new Date().toISOString()}] ▼▼▼ ${1:メッセージ} ▼▼▼`);"
],
"description": "タイムスタンプ付きのconsole.log"
}
}
これで、prefixにあるlogtとタイプしてタブキーを押すとbodyの内容がペーストされます。
毎回使う文言をテキストファイルに控えておかなくてもよくなるわけです。
設定ファイルの場所
ちなみにこの設定ファイルの本体はどこにあるかというと、以下になります。
%APPDATA%\Code\User\snippets
このパスをエクスプローラーのアドレスバーに入力すると直接アクセスできます。
例:
C:\Users\あなたのユーザー名\AppData\Roaming\Code\User\snippets
~/Library/Application Support/Code/User/snippets
%APPDATA%\Code\User\snippets
このパスをエクスプローラーのアドレスバーに入力すると直接アクセスできます。
また、このやり方で書いたものはグローバル領域になるため、すべてのワークスペースから使えるようになります。
逆に特定のワークスペースだけに反映させたい場合は以下のファイルを手動で作ります。
中身の書き方は同じです。
.vscode/workspace.code-snippets/workspace.code-snippets
おわりに
以上でスニペットの説明は終わりです。
コンソールログなどは頻繁に使う割に、コミット禁止の案件も多いため、これを知っているかどうかで作業スピードに大きな差が出ます。
使いこなせるようになっておきましょう。
株式会社ONE WEDGE
【Serverlessで世の中をもっと楽しく】 ONE WEDGEはServerlessシステム開発を中核技術としてWeb系システム開発、AWS/GCPを利用した業務システム・サービス開発、PWAを用いたモバイル開発、Alexaスキル開発など、元気と技術力を武器にお客様に真摯に向き合う価値創造企業です。
Discussion