Visual Studio Codeの機能拡張をする方法

★画像アップ先の不調により、過去のエントリーで画像が見られないものが多数あります。もし画像の見たいものがありましたらご連絡いただければ復活するようにします。

以前MicrosoftのVisual Studio Codeを使ってみたのエントリーでは正式リリース前のもので、機能拡張に(恐らく)対応していなかったのですが、現在は正式版が出ていて拡張機能をインストールするやり方が↓このように出ています。そこで試しに拡張機能をインストールしようとしたのですが、微妙に違うところがあって分かりづらかったので手順をご紹介します。


Visual Studio Codeの拡張機能を使ってみよう (1/2)
Visual Studio Codeの拡張機能



Visual Studio Code正式版の入手


私の前回のエントリーを参考にインストールされた方はVisual Studio Code正式版を別途インストールする必要があります。入手は↓こちらから、DebパッケージになっているのでダウンロードしたらそのままダブルクリックでUbuntuソフトウェア(センター)が立ち上がってインストールできます。


Download Visual Studio Code
Visual Studio Codeの拡張機能


ちなみに正式版前のものとは共存できるようなので、そのままインストールしても問題ありません。


拡張機能の入手


拡張機能は↓こちらのサイトから入手できます。


Extensions for the Visual Studio family of products
Visual Studio Codeの拡張機能


試しに「HTML Snippets」をインストール


わたしが使うとしたらHTML周りなのですが、まず上記サイトの下の方にある「Snippets」を開いてみました。


Visual Studio Codeの拡張機能


すると左側上から2番目に「HTML Snippets」というのがあるので、クリックしてみます。


Visual Studio Codeの拡張機能


開くとその機能拡張の説明やインストール方法などが書かれています。「Installation」のところにインストールに必要なコードがあるので、「Copy」というボタンを押して、そのコードをコピーします。


HTML Snippets
Visual Studio Codeの拡張機能


次に「Visual Studio Code」を立ち上げて、「Ctrl-Shift-P」キーを押すと「> 」のような窓が現れるので、先ほどコピーしたコードをペーストします。その際「>」は要らないので消します。


Visual Studio Codeの拡張機能


すると以下のように「HTML Snippets」が現れるので、下図「×」となっている(もうインストールしたあとなので「×」になっています)ところのボタンをクリックすればインストールが完了します。


Visual Studio Codeの拡張機能


「HTML Snippets」について


これコードを打ち込む時にコードを補ってくれるのですごく便利です。


例えば「do」と入力すると↓このように「doctype」という候補が上がって、


Visual Studio Codeの拡張機能


そのまま「Enter」キーを押せば↓このように「<!DOCTYPE>」とコードが入ります。


Visual Studio Codeの拡張機能


その他以下のGIFを参考にしてみてください。


Visual Studio Codeの拡張機能

関連記事

テーマ : Linux
ジャンル : コンピュータ

コメントの投稿

非公開コメント

GNOME3 moi moe please

GNOME3 moi moe please

Re: GNOME3 moi moe please

> GNOME3 moi moe please

I'll try but I can't guarantee anything.
I don't have a lot of time to spare.
プロフィール

TOY

Author:TOY
萌え萌えmoebuntu
ようこそ!
moebuntuサイト
moebuntu wiki
お気軽にコメントください。

Auto-Translate
最新記事
最新コメント
tweet
萌え萌えAD




月別アーカイブ
06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01 
カテゴリークラウド
RSSリンクの表示
リンク
QRコード
QRコード
最新トラックバック