14
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

VSCodeのスニペットの設定に便利な拡張機能

Last updated at Posted at 2021-10-29

VSCodeのスニペットはとても便利な機能です.スニペットを使えば,頻繁に使うコードのかたまりを一瞬で書き出すことができます.(スニペットがわからない方はこちら.)

ですが,VSCodeのスニペットを使うには,JSON形式のスニペットファイルに,呼び出したいコードを"",で囲って登録するという,少々めんどくさい作業が要ります(詳しくはこちら).そこで今回は,スニペットをかんたんに登録できる拡張機能 Snippet Utilities をご紹介します(私が作りました).

Snippet Utilities のインストール

VSCodeを開き,拡張機能Marketplaceで, Snippet Utilities と検索し,インストールします.
SnippetUtilities.png
このアイコンが目印です.

もしくは,Snippet Utilitiesにアクセスして,VSCodeにインストールします.

Snippet Utilities の使い方

  1. VSCodeにおいてコードの編集中に,スニペットととして登録したい部分を選択します.
    スニペット化する部分を選択.png

  2. Shift + Alt + S(MacならShift + Option + S)を押します.もしくは,右クリックから "Add selection to user snippets."をクリックします.

  3. どの言語のスニペットファイルに追加するかを選びます.
    言語を選択.png

  4. スニペットが追加されたと思います.スニペットの名前と,prefixdescriptionをわかりやすいものに変更します.また,必要に応じてbody${1:label}などを追加します.くわしい文法は,公式ドキュメントの Snippet Syntax を読めばすぐに理解できると思います.
    完成.png

その他の機能

一文字も選択せずにShift + Alt + S(MacならShift + Option + S)を押すと,単にスニペットファイルを開きます.これを使うと,素早くスニペットファイルを開いて直接編集することができます.

おわりに

これでもう,1行1行"",で囲む作業とはおさらばです.
(拡張機能のアイコンの由来がわかりましたか?)

ちなみに,初めてのQiitaへの投稿でした.お気づきの点があればご連絡お願いします.
特に,新機能についてのご意見があれば,QiitaかGitHubのDiscussionsにお願いします!

14
22
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?