今回はVisual Studio Code(以下VsCode)上で、Easy Snippetを使ったスニペットの登録方法についてご紹介させていただきます。

スニペットを活用することで、今行っているコーディング作業(プログラミング)の生産性がグッと上がるため、是非ご覧ください。

スニペット概要・メリット

まずEasy Snippetの話題に入る前に、簡単にスニペットの概要とメリットについてご紹介させていただければと思います。

スニペットとは、英語で「切れ端」や「断片」という意味を持ちますが、プログラミング界隈の意味合いとしては、“特定のキーワードを入力することで、定型文を出力することができる機能”のことを指します。

プログラミングをする際に、たびたび同じ記述・構文を繰り返すことになります。スニペットをあらかじめ登録しておくことで、キーワード1つで複数行にもなる定型文(ソースコード)を呼び出すことが可能なので、同じ記述を繰り返す必要がなくなり作業の効率化に繋がるというメリットを持ちます。

Easy Snippetについて

では本題のEasy Snippetについて触れていきたいと思います。
Easy Snippetとは、“スニペットを簡単に登録/編集することができる機能”です。

また単に登録するだけでなく、CSS・javascriptなど言語ごとにフォルダで管理することができるため、VSCodeに標準搭載されているユーザースニペットと比べて、メンテナンスがしやすいというメリットもあります。

以降では、Easy Snippetの具体的な使い方と、スニペットの記述に関する内容をご紹介させていただきます。

Easy Snippetの使い方

Easy Snippetのインストール

VsCodeを開き、拡張機能にて「Easy Snippet」と検索しインストールを押下します。
(以下のマーケットプレイスからもインストールいただけます)

Easy Snippetマーケットプレイスはこちら
https://marketplace.visualstudio.com/items?itemName=inu1255.easy-snippet

拡張機能のアイコンの下に、スニペットのアイコンが表示がされればインストールは無事完了しています。

スニペットの登録

今回は「javascript」を例にスニペットを登録したいと思います。
順を追って手順を紹介いたします。

① スニペットのアイコンを押下します。

② 「＋」を選択します。

③ 検索欄にて「javascript」を入力し、入力候補に表示される「javascript」を選択します。

④ SNIPPET MANAGERの欄に「javascript」が表示されているか確認します。

⑤ 鉛筆マークを押下し、javascript.jsonを開きます。

⑥ javascript.jsonに、登録したいスニペットを記述します。

スニペットの記述内容について、各項目以下のような形式になります。

  • スニペットの名前（下記コードでいう「Print to export default function」）
  • prefix：定型文を呼ぶためのキーワード
  • body：prefixを元に呼び出される定型文
  • description：スニペットの説明(入力は任意)

⑦ jsファイル上で、登録したスニペットのprefixを入力します。(今回はexd)
※prefixを入力すると、複数入力候補が表示される場合がありますが、入力候補にスニペットの名前が表示されるため、自分が登録した名前に一致するスニペットを選択してください。

⑧ prefixに紐づくbodyの内容が呼び出されていればOKです。

スニペットの記述について

タブ(\t)によるインデント調整

スニペットを呼び出す際、明示的にタブ(\t)を入れないと、インデントが調整されず見栄えの悪い状態で出力されます。

〈タブなし〉

〈タブあり〉

$マークによる可変入力の指定

スニペット内に「$1」や「$2」などを記載すると、スニペット呼び出し時にまず「$1」の位置に入力カーソルが移動します。

また入力後にTabキーを押すと、$2の位置に入力カーソルが移動します。

スニペット呼び出し時に毎回入力内容が変わる場合は、このように入力したい位置に記述します。

変数の定義

スニペットには変数が用意されており、スニペット内で使用することでファイル名や現在の年などを表示することができます。

※下記画像は現在の年を表示しております。

また使用できる変数は随時更新されているため、最新の情報に関してはVisual Studio Codeの公式サイトをご確認ください。

Visual Studio Code｜公式サイト
https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables

変数の加工

変数をそのまま使うことできるのは上記の通りですが、例えばファイル名を変数で取得して、正規表現やupcaseなどで大文字に変換することも可能です。

※下記画像はファイル名を大文字に加工して表示しております。

まとめ

今回はEasy Snippetを使ったスニペットの登録方法についてご紹介させていただきました。

使い始めの時は、スニペット登録の部分で時間がかかるかもしれませんが、1度登録してしまえばプログラミングの生産性もかなり上がるので、是非1度試してみて効果を実感いただけたら幸いでございます。