システムデザイン

VS Codeの Snippet(スニペット)で高速コーディング

*本記事は旧TechblogからCOLORSに統合した記事です。

こんにちは!
エンジニアリングソリューション事業部のS.Rです。
今回は初心者向けにvisual studio code(VS code)のSnippet(スニペット)を設定して
効率よくコーディングを行う方法をご紹介します。
開発をしていてこんな事をしていませんか?

  • 似たようなコードを他のソースコードからコピーしている
  • テーブルの名前などをコーディングする際、逐一設計書に切り替えてコピーしている


こんな時に役に立つのがSnippet(スニペット)です。
Snippet(スニペット)とは・・・

スニペット英語: snippet)とは、「断片」という意味である。情報処理の分野ではよく使う短いプログラムコードを統合開発環境から呼び出す機能の事である。

https://ja.wikipedia.org/wiki/スニペット

簡単に言うとIDEでcontrol + スペースを押すと呼び出せる
便利なショートカットのことでほぼ大丈夫です。
と言うことで実際に設定を行っていきましょう。
VS codeで任意のフォルダを開いた状態にし、(ここではhogeフォルダを開いたものとします。)
Code >Preferences > User Snippetsをクリックします。
(Windows版だとFile配下にあるはずです。)
このボタンをクリックすると、以下のような画像が表示されます。

Snippetの作成画面
Snippetの作成画面

ここでは、どのプログラミング言語を対象にした
Snippetsを作成するかをクリックして指定します。
指定は言語を問わない(New Global Snippets file)や、
このフォルダ内のみで有効(New Snippets file for ‘フォルダ名’)を指定することができます。
今回は「このフォルダ内のみで有効」をクリックします。
Snippetsファイル名を適当に指定して保存します。(今回はbar.jsonとして保存しました。)
するとこのようなファイルが表示されます。

[code lang=”JavaScript”]
{
// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
// is left empty or omitted, the snippet gets applied to all languages. 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”: {
// “scope”: “javascript,typescript”,
// “prefix”: “log”,
// “body”: [
// “console.log(‘$1’);”,
// “$2”
// ],
// “description”: “Log output to console”
// }
}
[/code]

さて、察しが良い方は先ほどのファイル名でJSONファイルと言うことがわかったと思います。
生成されたJSONファイルに書き込んでSnippetsを設定していきましょう。

[code lang=”JavaScript”]
{
// Place your global snippets here. ←先ほどの長いコメント
“Select_emp_table_by_id”: {
“prefix”: “select_emp_by_id”,
“body”: [
“‘SELECT ID, NAME, WORKDEPT, PHONENO’ + \\” ,
” ‘FROM EMP’ + \\”,
” ‘WHERE ID = ${1:ID}'”
],
“description”: “select_emp_by_id”
}
}
[/code]

詳しい解説については公式ドキュメントを参照していただくとして、
まずは上記のファイルを保存してみましょう。
そして適当なファイルtest.pyを作成し、”sql = se”と打ったところでcontrolとspaceを同時に押しましょう。すると・・・

Snippetの呼び出し
Snippetの呼び出し

先ほどのJSONファイルで指定したprefixの名前でSnippetが出てきていますね!
これを指定してみましょう!

 bodyに指定した内容が表示される。
 bodyに指定した内容が表示される。

bodyに指定した内容が表示されました!
しかも、${1:ID}で指定した部分が既に選択状態になっているので
この状態でIDを入力すればあっと言う間にSQL文を完成させることができます。

この機能を使いこなして素早くコードを仕上げましょう!

なお、Snippetsは公式のマーケットで配布されているものもあるので
ここから検索してみるのも良いかも知れません。

それでは素敵なコーディング生活を!