【2019年】VSCodeおすすめプラグイン

今回は人気のエディタVSCode(Visual Studio Code)のプラグインについてご紹介をさせていただけたらと思います。VimやEmacsをご活用の方には失礼かもしれませんが、最近の開発現場で一番人気のエディタといっても過言ではないエディタだと思います。そんなVSCodeですが、どんなプラグインがあるか人気のプラグインを掲載してきます。

よかったら一読いただけますと幸いです。

vscodeおすすめプラグインの紹介

目次

1. GitHub Pull Requests
   • デモ
   • 導入設定方法
2. Theme
   • 導入設定方法
   • VSCode内でテーマを探す方法
3. Git Graph
   • デモ
   • 導入設定方法
4. vscode-icons
   • デモ
   • 導入設定方法
5. Excel Viewer
   • デモ
   • 導入設定方法
6. まとめ

1.GitHub Pull Requests

GitHub Pull Requests

vscode公式のプラグインでGithubの操作が容易にできるようになります。

デモ

※(2021/05/03更新)現在公式サイトのgifがリンク切れのため、デモが表示出来ません

左のサイドバーにGithubのマークが表示され、リポジトリの変更差分などもかんたんにわかるようになります。

導入設定方法

1.GitHub Pull Requestsのインストール

Visual Studio Marketplaceで「GitHub Pull Requests」と検索すると下記のように表示されますので「Install」を押します。

自分はすでにインストール済みなのでボタンが表示されていないですが、未導入の場合ここに表示されます。インストール後はリロードを求められるので「Reload」を押し、再起動をしてください。

2.Giihubにサインインをする

インストールすると下記のようにポップアップが表示されるのでGitアカウントを設定してください。

「Sign in」ボタンを押すとGithubのサイトに遷移し、認証を求められるため、そのまま進めてください。

3.設定完了

vscodeに再び遷移したら設定が完了になります。ブランチなどは左下へ表示がされ、ここでブランチを新しくきることもできます。

「master*」をクリックすると新しくブランチをきることができます。

Githubのリモートリポジトリを開く、リポジトリに対してコミット、プッシュ、プルをする場合は「Commend + Shift + P」を押し、windowsの場合は「Ctrl + Space」を押すと検索機能にアクセスすることができ、そこで「git」と入力すると下記サジェストが表示されます。

※上記は「Japanese Language Pack for Visual Studio Code」を導入後の表記で実際は英語表記になってます。

ここからGitの操作が可能です。

2.Theme

導入設定方法

下記サイトでvscodeのテーマを公開しているため、テーマの導入、設定方法をご紹介します。

VSCodeThemes

好きなテーマにマウスオーバーをすると「View Extension」と左下に表示されるため、クリックします。右下の数字はユーザにダウンロードされた数になります。

「Open in VSCode」を押すとVSCodeが立ち上がり、テーマをインストールする画面に遷移するので、「Install」ボタンを押し、「Reload」をしてください。

VSCode内でテーマを探す方法

左下の歯車をクリックすると下記のようなメニューが表示されます。

「配色テーマ」を押すと下記画面が表示されます。※先程同様に「Japanese Language Pack for Visual Studio Code」を導入後の表記で実際は英語表記になってます。

ここからインストールしたテーマとデフォルトテーマが表示されるので、好みに合わせて選択してください。

VSCodeでは、SublimeText(サブライムテキスト)、Atom(アトム)、Terminal(ターミナル)などのテーマを提供しているので、馴染みのある配色に設定が可能です。

私はEclipse　→　SublimeText　→　AtomとIDE・エディタを変更していたため、今はAtom Themeに設定をしてます。・

3.Git Graph

Gitリポジトリのコミット履歴を視覚的に確認することができます。

デモ

ブランチを作成したところからpull、マージした履歴を一覧で確認できることができます。

導入設定方法

Git Pull Requestsが入っている前提で下記記載してきます。

Visual Studio Marketplaceで「Git Graph」で検索し、「Install」するとこまでは他のプラグイン同様です。

そのあとgit ブランチファイルを開いて、サイドバーからSource Controlを開くと上記のオレンジ枠で記載しているボタンが追加されてます。

こちらのボタンを押すとデモ画面のように上から下にコミット履歴が表示されコミットのコメントも確認することが可能です。変更履歴をクリックすると下記のような画面になります。

変更したファイルがなにでだれがコミットしたかを瞬時にな確認することができます。

差分を見る場合はファイルをクリックすれば前回のコミットからどこが変更されたかを細かく見ることもできます。

操作も直感的にでき、シンプルなためとても重宝してます。

4.vscode-icons

VSCodeで開いているファイルを拡張子ごとにアイコンをつけてくれるプラグインです。VSCodeで色々なファイルを開らくときにわかりやすくなります。

デモ

特筆すべき点がないぐらいシンプルなプラグインでデモ通り、アイコンをつけてくれます。

導入設定方法

インストール後、設定で下記の「ファイルアイコンのテーマ」をクリックします。

クリック後はサジェストが立ち上がり、VSCodeテーマと同様にアイコンのテーマを選択することができます。

ここでVSCode Iconsを選択すれば設定は完了です。

5.Excel Viewer

CSV、TSV、ExcelファイルをOffice同様に視覚的に見ることが可能になるプラグインになります。CSVなどExcelでひらくと改行コードや文字コードがかわるなど起こるためとてもおすすめです。

また最近VSCodeのPythonでJupyter notebookが標準装備されたため、Pandasを利用してCSVに加工する、もしくは事前にデータを確認する場合など大変役立つプラグインだとおもいます。

デモ

CSVのプレビュー

Excelのプレビュー

導入設定方法

インストール後の設定等は特になく、対象のcsv,tsv,Excel等を右クリックすると「Open Preview」が表示されるため、これをクリックすればExcelのような描画が可能です。

またExcelのフィルタが自動でついているため、ソートなども容易になります。

VSCodeからExcelへいったり来たりしなくて済むのでとても楽です。

まとめ

今後もおすすめのプラグインが出てきたらどんどん追加していこうと思います。ここまで読み進めていただきありがとうございました。