VSCode に必ず入れておきたい拡張機能

普段使用しているエディタはPhpStormですが、PHP以外を書くときはVSCodeはとても便利なので重宝しています。

私が個人的におすすめする拡張機能を紹介します。
他にも良い拡張機能があればコメントにて教えてもらいたいです。

この記事があなたのお役に立てれば幸いです。

## VSCode 関連記事

- [VSCode の初期設定](https://qiita.com/ucan-lab/items/daba38a597ab9c982de2)

## 拡張機能の探し方

https://marketplace.visualstudio.com

マーケットプレイスが用意されているので、ここからお好みの拡張機能を探すと良いでしょう。

- Featured: おすすめ、注目されている拡張機能
- Trending: 急上昇の拡張機能
- Most Popular: 最も人気のある拡張機能
- Recently Added: 最近追加された拡張機能
  - まだ評価されてない追加されたばかりのものが多いので追加する場合はご注意ください

## 基本

### Material Theme

https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme

VSCodeの数あるテーマの中の一つです。

<img width="488" alt="スクリーンショット 2020-04-16 0.31.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/34c19b1d-26b9-7106-7143-39fdb6429ebd.png">

歯車のアイコンから `Set Color Theme` を選ぶをいくつかバリエーションを選択できます。

<img width="979" alt="スクリーンショット 2020-04-16 0.31.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/d8f0ffc6-e194-d2d8-665d-89fcc25fa7f0.png">

私は `Material Theme Darker Hight Contrast` を使っています。

### 追記: GitHub Theme

https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme

GitHub公式のテーマがリリースされました！
`Material Theme` から `GitHub Dark` テーマに乗り換えました！

![80668639-595e9e00-8add-11ea-8673-4a481cc7e2dd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/1c028e08-dbee-0695-50d0-0b44b12f3738.png)

### Material Icon Theme

https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

![fileIcons.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/c138a506-410a-e903-e292-ea382af88156.png)

拡張子に合わせてアイコンを表示してくれる拡張機能です。
とても見やすくなります。

## Japanese Language Pack for Visual Studio Code

https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja

VSCodeを日本語化します。
日本語化したい人は入れると幸せになれるかと思います。
ちなみに私は入れてないです。

## キーマップ(キーボードショートカット)

Preferences > Keyboard Shortcuts (`Command` + `K`, `S`)
から登録されているショートカットキーを確認できます。

他のエディタから乗り換える人は新しくショートカットの組み合わせを覚えるのはとても大変です。
拡張機能としてキーマップが用意されていますので、そちらを利用すると幸せになれるかもしれません。

Preferences > Keymaps (`Command` + `K`, `M`)

- Vim
- Sublime Text Keymap and Settings Importer
- Atom Keymap
- IntelliJ IDEA Keybindings
- Notepad++ keymap
- Eclipse Keymap
- Visual Studio Keymap
- Emacs Keymap
- Delphi Keymap

これは好みの問題ですが、オススメは標準のショートカットキーに慣れるか、Atom Keymap がいいかなと思います。

2020.01.12追記: Atom Keymap を使っていた理由が、 `Command` + `Shift` + `l` に割り当てられていた `Add Cursors to Line Ends` が便利だったのですが、キーボードショートカットを変更したので、デフォルトキーマップのまま使ってます。

[VSCode 選択した複数行をマルチカーソルにするキーボードショートカット](https://qiita.com/ucan-lab/items/b271f96ef9d846655b9b)

## 整形

### EditorConfig for VSCode

https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig

[EditorConfig](https://editorconfig.org) のVSCode版の拡張機能です。
様々なエディタやIDEでコーディングスタイルを統一するためのツールです。

`.editorconfig` にルールを定義して、プロジェクトに配置して使います。
使い方は公式サイトや他の記事をご参考ください。

チームで開発する際は必ず入れておきたい拡張機能です。

### Bracket Pair Colorizer 2

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

![example.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/18a8ea74-805a-0450-4386-c8db85081217.png)

対応する括弧を色分けして表示してくれる拡張機能です。
これがあるとないとで開発効率が全然違うので入れておいて損はないです。

### indent-rainbow

![example (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/e51374d8-836a-88ce-3acf-6b5053ba8095.png)

https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

インデントを虹色に表示してくれる拡張機能です。
インデントが強調されて見やすくなります。

### Trailing Spaces

~~https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces~~

行末のスペースを削除してくれる拡張機能です。

**追記**

公式機能で行末のスペースを削除してくれる設定があります。
公式機能の方を利用しましょう。

`Command` + `,` で設定を開き「Trim Trailing Whitespace」設定を有効化する。

<img width="786" alt="スクリーンショット 2020-05-04 15.43.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/8bffcbc8-d35b-3c5a-e814-1a6411ee070b.png">

### zenkaku

https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku

全角スペースを強調して表示してくれる拡張機能です。
不本意ではありますが、全角スペース起因の問題で時間を費やしたくないので入れておくのが無難でしょう。

### Prettier - Code formatter

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

[Prettier](https://prettier.io)はソースコードを解析して、ルールに応じてコーディングスタイルを適用してくれるコードフォーマッターです。
ルール等の設定は公式サイトや他の記事をご参考ください。

### Code Spell Checker

![example.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/9be70954-9219-dadb-1485-f1fb5c633c1d.gif)

https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

スペルミスを検出してくれる拡張機能です。タイポを減らせます。

## 補完

### Auto Rename Tag

![usage.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/47c31cdf-37f2-9ac3-197b-169911f7ce4e.gif)

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

ペアになっているHTML/XMLタグの名前を自動的に変更する拡張機能です。
普通に便利です。

### Auto Close Tag

![usage (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/80f4bfd4-41d6-27dd-6c5a-e19ecbeeb232.gif)

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

HTML/XMLの終了タグを自動的に追加してくれる拡張機能です。

### Path Intellisense

![iaHeUiDeTUZuo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/28f73a73-2322-3782-3c44-7610bc897d89.gif)

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

ファイルパスを補完してくれる拡張機能です。入れておいて損はないです。

### Clipboard Ring

https://marketplace.visualstudio.com/items?itemName=SirTobi.code-clip-ring

クリップボードを機能を拡張する拡張機能です。
コピー(`Command`+`C`)やカット(`Command`+`X`)をするたびにクリップボードリングにも追加されます。

クリップボードリングから貼り付け(`Command`+`Shift`+`V`)を数回押して貼り付けたいアイテムを選択します。
通常の貼り付け(`Command`+`V`)も可能です。

デフォルトでは最大10個のアイテムを保存します。
これは設定で自由に増やせます。

```
"clipring.maxRingItems": 128
```

### change-case

![3c5e29b6-7a9c-11e5-9ce4-7eb944889696.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/641f04bb-82fc-6551-82ac-c66419d96146.gif)

![1a9019e8-7a9c-11e5-8f06-91fd2d7e21bf.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/b087fd4a-07ef-2e41-24ac-f9c4fd8aa2fb.gif)

https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case

単語の大文字・小文字変換をしてくれる拡張機能です。

### vscode-input-sequence

https://marketplace.visualstudio.com/items?itemName=tomoki1207.vscode-input-sequence

![screenshot.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/902a2243-bd29-6c9a-c5b1-e76ecaa4103d.gif)

連番入力をサポートしてくれる拡張機能です。

- [VSCodeで連番を入力できる拡張機能を作りました](https://qiita.com/tomoki1207/items/8e38eade574f43b624ec)

## フロント系

### REST Client

https://marketplace.visualstudio.com/items?itemName=humao.rest-client

VSCode上でHTTPリクエストを送信できる拡張機能です。

エディター上で下記のように簡易的にリクエストを書くことができます。

```
https://example.com/comments/1
```

メソッド、ヘッダー、および本文を[RFC 2616](https://www.w3.org/Protocols/rfc2616/rfc2616-sec5.html)で送信できます。

```
POST https://example.com/comments HTTP/1.1
content-type: application/json

{
    "name": "sample",
    "time": "Wed, 21 Oct 2015 18:27:50 GMT"
}
```

GraphQLにも対応しています。

```
POST https://api.github.com/graphql
Content-Type: application/json
Authorization: Bearer xxx
X-REQUEST-TYPE: GraphQL

query ($name: String!, $owner: String!) {
  repository(name: $name, owner: $owner) {
    name
    fullName: nameWithOwner
    description
    diskUsage
    forkCount
    stargazers(first: 5) {
        totalCount
        nodes {
            login
            name
        }
    }
    watchers {
        totalCount
    }
  }
}

{
    "name": "vscode-restclient",
    "owner": "Huachao"
}
```

### HTML CSS Support

https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css

HTMLドキュメントに対するCSSのサポートを行う拡張機能です。
主にクラス属性の補完、ID属性の補完、css、scssファイルの検索をしてくれます。

意識せずサポートしてくれるので、入れておいて損はないです。

サポートしてる言語: html, laravel-blade, razor, vue, pug, jade, handlebars, php, twig, md, nunjucks, javascript, javascriptreact, typescript, typescriptreact

### CSS Peek

![working.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/bc87e802-adb1-5427-447f-559b5fa3673f.gif)

https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

ブラケットのCSSインラインエディターのように、HTMLのidやclassへ定義ジャンプしたり、HTMLファイル上でCSSスタイルを確認できる拡張機能です。

### npm

![validation.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/e7024ee0-8121-227a-0731-b9822f3f58e8.png)

https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script

`package.json` で定義されたnpmスクリプトの実行、および定義された依存関係に対するインストール済みモジュールの検証をサポートしてくれる拡張期機能です。

### yarn

https://marketplace.visualstudio.com/items?itemName=gamunu.vscode-yarn

yarnコマンドを実行してくれる拡張機能です。

### Live Server

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

簡易的なローカルサーバを立てることができる拡張機能です。
起動方法が3つあるので、好きな方法で起動できます。

- サイドバーのファイルを右クリックして `Open with Live Server` を選択
- 起動したいファイルを開いた状態で `Command` + `L`, `O`
- 右下にある `Go Live` クリック

http://127.0.0.1:5500 がブラウザで表示されます。
ファイルの変更を検知してブラウザが自動リロードされます。

### Import Cost

https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

![import-cost.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/a25bc7c8-3be6-91b1-e706-02ad7501351f.gif)

JavaScriptやTypeScriptでimportしたファイル容量を表示してくれる拡張機能です。
コーディング時の指標になるかもです。

## CSV, JSON

### Rainbow CSV

![PRFKVIN.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/898fb4a1-8c5c-0e7f-ccf4-374f545ee4a6.png)

https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv

csvやtsv形式のファイルで列ごとに色分けして表示してくれる拡張機能です。

また、RBQLクエリ言語インタープリターが組み込まれていて、SQLっぽくデータを抽出することもできるので驚きです。

![HsBG2Y1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/d258d26a-04a1-78a3-dd66-05433632dd29.png)

### Json Editor

https://marketplace.visualstudio.com/items?itemName=nickdemayo.vscode-json-editor

JSONファイルをツリー表示してくれる拡張機能です。
大きいJSONを編集する際に役立ちます。

### Paste JSON as Code

![demo-interactive.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/870f45b7-e8f5-7c0c-6097-b3f8f5147c03.gif)

https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype

JSONデータをクラスに変換して貼り付けられる拡張機能です。

## Git

### Git Graph

![demo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/f301f3e2-8a11-6a76-ba41-66c3ce29ce5c.gif)

https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph

コミット履歴をツリー形式で表示してくれる拡張機能です。

### Git Lens

![gitlens-preview.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/c822c740-ccd1-74ef-c3ee-2b9688ccd76e.gif)

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

サイドバーにGitLensのアイコンが表示されます。
リポジトリ一覧からブランチのコミット履歴を確認できたり、ファイル履歴、行履歴、コミットの検索等が行えます。

またソースコードの行またはコードブロックがいつ、誰がコミットしたのか表示されコードの歴史を知るのに役立ちます。

## 共有、設定、その他

### 設定の同期

https://code.visualstudio.com/updates/v1_48#_settings-sync

VSCode1.48から公式の機能として設定同期機能がリリースされました🙌
下記の参考記事に詳しく設定手順が記載されてるのでご覧ください。

- [Visual Studio Code公式の設定同期を利用する](https://qiita.com/Nuits/items/6204a6b0576b7a4e37ea)

### Live Share

https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare

リアルタイムで共同編集やデバッグができる拡張機能です。
ペアプログラミングをする際におすすめです。

### Todo Tree

<img width="1096" alt="screenshot.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/c07f874c-314f-9580-67f9-c6dbd8292d63.png">

https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree

TODOやFIXMEなどのコメントタグを検索し、エクスプローラーペインのツリービューに表示してくれる拡張機能です。
ツリービューをクリックすると対象のファイルの対象のコメント行を表示します。

### vscode-reveal

https://marketplace.visualstudio.com/items?itemName=evilz.vscode-reveal

Markdown でプレゼン資料を手軽に作成できる拡張機能です。
ライトニングトークや社内の軽いプレゼン資料作りにおすすめです。

[公式デモサイト](https://revealjs.com)

HTML や PDF として出力もできます。

### Draw.io Integration

https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio

[Draw.io](https://app.diagrams.net)のVSCode拡張機能です。

![Draw.io Integration](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/f1ec5451-b9eb-ed63-3a0a-18051e220838.gif)

![Draw.io Integration-png.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/518f82ce-cbd3-8367-bc75-47ef8bdc6ee4.gif)

![Draw.io Integration-xml.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/964004b2-e18b-3bc2-8c1d-bc91ed3ac2c3.gif)

- [VSCodeでDraw.ioが使えるようになったらしい！](https://qiita.com/riku-shiru/items/5ab7c5aecdfea323ec4e)