VScodeのスニペット登録について

今回はよく使われているテキストエディタ「Visual Studio Code」でのスニペット登録を説明したいと思います。

スニペットとは

コード群を予めスニペットに登録することで短いコードで簡単に呼び出せる機能です。

普段からよく使うコードや、長いコードを毎回 1 からコードを入力するのは大変なので、そういったコードを短縮して出せるようになるとコーディングスピードの向上に繋がります。

よく使うネーミングでいえば、PCやスマホでいう「ユーザー辞書」のようなものです。

スニペット登録の方法

実はこのスニペット登録は、すでに色んな人がやり方を書いています。

僕も最初にやる時は色々な登録方法を探していくつも目にしています。

なのになぜこのテーマで書こうとしたかといえば！

この機能、初心者の内から使いたい機能だと思います。

ですが、初心者あるあるでここで詰まってしまう方が一定数いると思っています。

僕もその一人。。。

そして身近な人からも相談を受け、同じ方法で解決出来たことを知って、これは時間の無駄だ！と思い、ある1箇所を特に強調してお伝えしたいと思います。

それではいってみましょう！

１. 　「Code」→　(歯車マーク)　→「ユーザー スニペット」を選択。

2. 　検索欄で登録したいスニペットの言語を入力し、選択します。

　　（今回はHTMLの登録と仮定して「html.json」を選択）

さて、ここで問題の場所がやってまいりました。

みなさん説明の中で少しずつ違いはあるものの概ね同じような説明をされています。

上の画像の部分にサンプルコードが入っていますが、これは実はあってもなくても変わりません。

人によっては全部消してから書いている人もいれば、サンプルコードの下にそのまま書いていく人もいます。

サンプルコードの書き方を真似れば良いとは言いつつも、英語なのでちょっとややこしいです。

ですが、大体は登録時のサンプルも入れてくれるので、わかるかと思いますが、初心者がやりがちなミスをここで一つお知らせします。

ここにそのままコードを書いていってしまうことです！

全く同じような構成で書いているのに、なぜか動かない！改行の位置やスペースをチェックしたり他の記事をみてみたりと、30〜1時間くらい悩んでもわからない！

そんな初心者がいるのです！（僕もその1人です。。。）

ここにフォーカスして説明してくれている記事は中々ないと思います。

ここにそのままコードを入れていってもだめなのです！

中括弧{}の中に書かなくては！

こんな感じですね！

というわけで、この中括弧の中でコードを書いていけばしっかりスニペットとして機能しますので、

入力するキーを自分でわかりやすく決めて、そのキーを打てば変換の欄に出てきますので、後は通常の変換と同じ動きになります。

ちょっと変なテンションになってしまいましたが、僕自身無駄に詰まった部分でもありますので、（他数名、僕の知人でも無駄な時間を使ってしまった・・・）

これが誰かのお役に立っていただければと幸いです。