Visual Studio Code の使ってるおすすめ拡張機能

  • 投稿日:2020.04.12
  •        
  • 更新日:2020.04.25
  •           
  • IT
Visual Studio Code の使ってるおすすめ拡張機能

ここ数年エディターは Visual Studio Code (VS Code)を使っています。Microsoft 製のエディターで豊富な拡張機能が提供されているのが特徴です。単なるエディターの機能にとどまらず、開発環境のような機能すらも提供するソフトウェアです。

今回は私の環境で使ってる拡張機能を紹介します。

使いやすい機能色々

Japanese Language Pack for Visual Studio Code

VS Code を日本語環境にする機能です。インストールしたらCtrl + Shift + P⌘ + Shift + P)でコマンドパレットを表示し、Configure Display Language コマンドからjaを選択して日本語化します。

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

vscode-icons

VS Code のエクスプローラーに表示するファイル名の頭にアイコン画像を表示します。拡張子によって自動的にアイコンが変わるので判別しやすいです。

demo

リンク:https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

Peacock

ワークスペースごとに色を変えて環境を把握しやすくする機能です。VS Code はワークスペースという単位で環境を定義できるので、複数のワークスペースを使い分けるのに役立ちます。

コマンドパレットからPeacock: Change to a favorite colorを実行することで、ワークスペースの色を変更できます。

Peacock Windows

リンク:https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock

Setting Sync

VS Code の環境設定をクラウド上に保存し、他の環境に同期できるようにする機能です。一度環境設定をアップロードしておけばいつでもどこでも同じ環境をすぐに構築できます。利用には GitHub アカウントを用意しておく必要があります。

Login with GitHub

リンク:https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

PlantUML

UML 図をコーディングで描画できます。記述方法を覚える必要はありますが、慣れれば簡易で綺麗な図をすぐに描画できます。

audo update demo

リンク:https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml

Rainbow CSV

CSV ファイルを区切りごとに自動で色付けしてくれます。列数が多いとどのデータに対応しているかわかりづらくなるのでこちらも便利です。

screenshot

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

プログラミング関連

シンタックスハイライトやスニペットなども各言語でサポートする機能が提供されています。

PowerShell

リンク:https://marketplace.visualstudio.com/items?itemName=ms-vscode.PowerShell

Python

リンク:https://marketplace.visualstudio.com/items?itemName=ms-python.python

Bracket Pair Colorizer

コード中の対応するカッコを色付けしてくれます。フォーマットを合わせてもカッコの数が揃っていないなどのケアレスミスを防ぐのに役立ちます。

Screenshot

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

Prettier – Code formatter

コード整形機能です。基本的には WEB 開発系のファイル形式が対象ですが、あるのは便利です。

JavaScript · TypeScript · Flow · JSX · JSON 
CSS · SCSS · Less 
HTML · Vue · Angular 
GraphQL · Markdown · YAML 

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

Markdown 関連

Markdown All in One

Markdown を記述するのに基本的な機能が全て揃っています。自動補完に加えて、VS Code 内でページビュワーも表示できます。

リンク:https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one

Markdown PDF

Markdown を PDF で出力する機能です。CSS でフォーマットを整備しておけば簡易にドキュメントを作成できます。

リンク:https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf

Excel to Markdown table

エクセルのテーブルをコピペで Markdown 記法へ変換できます。

excel-to-markdown-table

リンク:https://marketplace.visualstudio.com/items?itemName=csholmq.excel-to-markdown-table

Markdown+Math

Tex のような数式を記述するための拡張機能です。標準ではできないきれいな数式を記述できます。

リンク:https://marketplace.visualstudio.com/items?itemName=goessner.mdmath

Azure 関連

ARM Template Viewer

Azure ARM テンプレートファイルからリソース依存関係を自動で描画してくれる機能です。簡易的なシステム構成図が描けてしまいます。

s1

ARM テンプレートの JSON ファイルを開くとタブの部分に可視化のアイコンが表示されます。ショートカットキーは[ctrl + shift + P]、もしくは[⌘ + shift + P]で表示します。

toolbar

リンク:https://marketplace.visualstudio.com/items?itemName=bencoleman.armview

Azure Resource Manager Snippets

Azure ARM テンプレートを自動で補完、読み込みしてくれる便利機能です。ゼロからだと大変ですが、これがあれば個人で ARM テンプレートを作成する負担がかなり減ります。

skeleton

リンク:https://marketplace.visualstudio.com/items?itemName=samcogan.arm-snippets

Azure ARM Tools

Azure ARM テンプレートを色付けしたりと、記述を支援してくれる便利な機能です。まだプレビュー中ですが、既にすごく使いやすいです。

リンク:https://marketplace.visualstudio.com/items?itemName=msazurermtools.azurerm-vscode-tools

Azure Tools

Azure Functions やアカウント、ストレージなどの Azure サービス機能をまとめて追加してくれます。

Azure Explorer in VS Code

リンク:https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-node-azure-pack