【Visual Studio Code】 拡張機能をどんどん活用しよう (Extension)

皆さん、こんにちは。テクニカルエバンジェリスト戸倉彩です。

Visual Studio Code（以下、VS Code/読み方:ブイエス コード）には拡張機能 (Extension/読み方:エクステンション) と呼ばれる機能があり、開発ワークロードをサポートするために、言語、デバッガ、およびツールを追加機能としてインストールすることができます。2016年12月、今日現在、約2,000もの拡張機能が公開されていますので、是非皆さんが普段お使いにならているプログラミング言語や、欲しいなと感じている言語サポートや機能が拡張機能として公開になっていないか、ご覧になってみてください。

[参考文献] VS Code Extension Marketplace (https://code.visualstudio.com/Docs/editor/extension-gallery)

■VS Codeで拡張機能をブラウズおよびインストールする方法について
VS Codeでは、以下の2つの方法で拡張機能の閲覧やインストールすることができます。

1) VS Codeからブラウズする方法
①VS Codeを起動すると、左側に表示されるビューバーの中の四角いアイコンをクリックすると、「拡張機能」がサイドバーに表示されます。

②検索ボックスから探したい拡張ツールやプログラミング言語を入力して検索することができます。
※例えば、今回は「PowerShell」と入力してみます。

➂該当するものがあった場合には、それを選択し、「インストール」ボタンをクリックしてインストールを実行します。
※今回はPowerShellを選択します。
④インストール終了後、「インストール」ボタンが「再度読み込む」に変わります。初回インストール直後に有効にしたい場合には「再度読み込む」をクリックしてください。

➄「このウィンドウを再度読み込んで ‘(選択した拡張機能名)’　拡張機能をアクティブにしますか？」と確認画面が表示された場合には「OK」を選択します。

⑥VS Codeの再度読み込み(再起動)されたタイミングで、拡張機能が有効になって起動されます。

[Tips] 現在、拡張機能は毎回アンインストールしなくても拡張機能アイコンより「無効にする」ことができるようになっています。VS Codeを軽量にお使いいただくためには、不要な拡張機能は無効にしておくことをオススメします。

2) VS Code Marketplaceからブラウズする
①VS Code Marketplace サイト(https://marketplace.visualstudio.com/)へアクセスすると、一覧が表示されます。

②検索ボックスから探したい拡張ツールやプログラミング言語を入力して検索することができます。現在は、「Featured(オススメ)」、「Most Popular(総合ランキング)」、「Trending(月間/週間/今日のランキング)」、「Recently Added(最近追加された拡張機能)」の順にアイコンが並んでいます。また画面下のほうにいくと 「Debuggers(デバッガ)」、「Formatters(フォーマッター)」、「Keymaps(キーマップ)」、「Languages(プログラミング言語)」、「Linters(リンター)」、「Snippets(スニペット)」、「Themes(テーマ・壁紙)」、「Other(その他)」のカテゴリから表示させることも出来ます。

➂追加したい拡張機能のアイコンをクリックします。
※今回はオススメに表示されている「Docker Support」をクリックします
④該当の拡張機能紹介サイトが表示されます。発行元やダウンロード件数、拡張機能紹介やインストール方法等が書かれています。
※今回はDocker Supportサイトが表示されます。

➄Installation(インストール方法)の部分に、VS Codeからこの拡張機能のインストールを呼び出すためのコマンドが記載されています。

⑥VS Codeを起動して「Ctrl」+「P」を同時に押し、表示された欄にコマンドをコピペします。
※今回はext install vscode-dockerと入力します

➆画面に従って「Enter」キーを押します。拡張機能画面が表示されるので「インストール」をクリックして進めてください。

⑧あとは上記の「VS Codeからブラウズする方法」と同様に再度読み込みをすると利用できるようになります。

私自身がオススメしたい拡張機能は、今後こちらのブログでも紹介していきたいと思いますが、すべての拡張機能を試すことはできないので、皆さんが面白いと思った拡張機能や、役立ったものがありましたら、是非教えてくださいね。
また近いうちにお会いしましょう。

Have a nice Code♪

※Twitterで最新情報発信中 @ayatokura