俺のおすすめVSCode拡張【2018年7-12月】

【2018年7-12月】に使っていたおすすめのVSCode拡張リストです。言語やフレームワークに偏らず、標準的なもののみ載せています。

> [俺のおすすめVSCode拡張【2018年7\-12月】 \| Ninolog](https://ninolog.com/my-vscode-extension-2018-2/)より転載

リスト
---

### [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)

対応する開始タグと終了タグを同時に編集することができます。タグの閉じ忘れなどの防止に役立ちます。

![my-vscode-extension-2018-2_01.png](https://qiita-image-store.s3.amazonaws.com/0/203758/1c125882-f82f-57fa-4114-a1854739114f.png)

### [Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks)

コード内にブックマークをつけることができます。これにより作業箇所の当たりを付けたり、似たようなファイルやコードが多い時は、次回作業する時の目印にしています。

![my-vscode-extension-2018-2_02.png](https://qiita-image-store.s3.amazonaws.com/0/203758/f9b67ce3-0fc7-5138-bb5d-9e2023e254d8.png)

### [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)

対応する{}・()などの括弧に色を付けて表示してくれます。どこからどこまでが範囲なのかが分かりやすくなります。

![my-vscode-extension-2018-2_03.png](https://qiita-image-store.s3.amazonaws.com/0/203758/cdd8204e-6cfc-ac94-8aba-45ed14fff0dc.png)

### [Docker](https://marketplace.visualstudio.com/items?itemName=PeterJausovec.vscode-docker)

VSCodeに標準でインストールされていたと思うのですが、正直あまり使えていません。説明を読む限りはDokerfileの自動生成など結構便利なことができそうな感じもするのですが...今後もう少し試してみます。

![my-vscode-extension-2018-2_04.png](https://qiita-image-store.s3.amazonaws.com/0/203758/a8ebac3e-5c0f-fff4-59e1-c4b0e0234c9b.png)

### [Dracula Theme](https://marketplace.visualstudio.com/items?itemName=gerane.Theme-Dracula)

霧がかったようなカラーのテーマです。好みはあるでしょうが俺は気に入ってます。他に使うテーマはVSCodeデフォルトで入っているHigh Contrastくらいです。

![my-vscode-extension-2018-2_05.png](https://qiita-image-store.s3.amazonaws.com/0/203758/d3d1a92a-c8da-c777-ccc6-97c64cdabf37.png)

### [Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)

グラフィカルにGitの変更を表示することができます。条件を設定してソートして表示することもできるので流れがわかりやすくて便利です。

![my-vscode-extension-2018-2_06.png](https://qiita-image-store.s3.amazonaws.com/0/203758/05f68bdc-2359-d663-d7df-62dd725fc494.png)

### [GitLens — Git supercharged](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

対象のコードを誰がいつ変更したかと、その内容を確認することができます。

![my-vscode-extension-2018-2_07.png](https://qiita-image-store.s3.amazonaws.com/0/203758/c3647c00-cd58-283c-9f0c-a8cc1c1557c6.png)

### [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)

インデントに色をつけて深さがわかりやすくなります。

![my-vscode-extension-2018-2_08.png](https://qiita-image-store.s3.amazonaws.com/0/203758/9962dcb0-e5ec-562c-dc34-9cfe74ee49d9.png)

### [Japanese Language Pack for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja)

VSCodeの表示言語を日本語に変更できるようになります。

![my-vscode-extension-2018-2_09.png](https://qiita-image-store.s3.amazonaws.com/0/203758/9513814a-9725-4614-17eb-88bcd8009321.png)

### [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)

VSCode内のファイルアイコンをマテリアルアイコンに変更できるようになります。ファイルアイコンは視覚的に分かりやすい方が好きです。

![my-vscode-extension-2018-2_10.png](https://qiita-image-store.s3.amazonaws.com/0/203758/5063767c-b152-fb6d-42e8-3ac3013ed957.png)

### [Output Colorizer](https://marketplace.visualstudio.com/items?itemName=IBM.output-colorizer)

logファイルに色をつけて見やすくしてくれます。

![my-vscode-extension-2018-2_11.png](https://qiita-image-store.s3.amazonaws.com/0/203758/56491230-7be2-4613-e25c-11d11651d76f.png)

### [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)

パスやファイル名の入力補完ができるようになります。

![my-vscode-extension-2018-2_12.png](https://qiita-image-store.s3.amazonaws.com/0/203758/ba5f3357-9bac-5d12-39f1-c4f502af522b.png)

### [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

有名な自動整形ツールです。静的解析ばかりに目がいってフォーマット整形ができていないので、今後はPrettierも活用してクリーンコーディングを意識していきたいです。

![my-vscode-extension-2018-2_13.png](https://qiita-image-store.s3.amazonaws.com/0/203758/a0dd68a6-1f2c-c886-df9b-e9baad617e59.png)

### [Rainbow CSV](https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv)

CSVのカラムデータに色をつけて見やすくしてくれます。

![my-vscode-extension-2018-2_14.png](https://qiita-image-store.s3.amazonaws.com/0/203758/0a028e9d-c52c-9ed3-c926-67aad699e805.png)

### [Regex Previewer](https://marketplace.visualstudio.com/items?itemName=chrmarti.regex)

正規表現のリアルタイムプレビューを表示することができます。

![my-vscode-extension-2018-2_15.png](https://qiita-image-store.s3.amazonaws.com/0/203758/fdf6e75b-0a47-8bc5-dad9-d59c9a2205c5.png)

### [Sort lines](https://marketplace.visualstudio.com/items?itemName=Tyriar.sort-lines)

選択した範囲のコード内で様々な条件でソートができるようになります。

![my-vscode-extension-2018-2_16.png](https://qiita-image-store.s3.amazonaws.com/0/203758/2f967500-6d99-3f51-30eb-6fab20211e9e.png)

### [SVG Viewer](https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer)

VSCode内でSVGのプレビューをできるようにします。これが入ってないとSVGはテキストで表示されてしまうので不便です。

![my-vscode-extension-2018-2_17.png](https://qiita-image-store.s3.amazonaws.com/0/203758/5687389b-341e-c9d9-3bdc-9e0477eaa0e5.png)

### [Todo+](https://marketplace.visualstudio.com/items?itemName=fabiospampinato.vscode-todo-plus)

コード内に書いたTodoなどを検索して一覧表示してくれます。リファクタリングする際の目印になります。

![my-vscode-extension-2018-2_18.png](https://qiita-image-store.s3.amazonaws.com/0/203758/224f5516-d688-24dc-040d-74b37d6009d5.png)

### [Trailing Spaces](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces)

コードの行末スペースを可視化します。削除忘れなどの確認になります。

![my-vscode-extension-2018-2_19.png](https://qiita-image-store.s3.amazonaws.com/0/203758/9cb834d1-857b-838c-2750-1753d27d0471.png)