📘

Visual Studio Code の 拡張機能

2021/11/11に公開約4,000字

2021年11月11日時点のWindows10での情報です。

Visual Studio Code (vscode)に入れると個人的に便利だと思う拡張機能です。
随時更新していきます。


拡張機能のインストール方法

  1. vscodeを開き、拡張機能アイコンを選択します。
  2. 検索ボックスで拡張機能を検索します。
  3. 見つかった拡張機能のインストールをクリックします。
    【注意】
    追加した拡張機能が実際にインストールされるのは、vscodeを閉じたときです。
    インストール後はvscodeを一度終了し、起動しなおします。

便利な拡張機能

Japanese Language Pack for VS Code

vscodeを日本語化してくれます。

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


MarkDownを書くのに便利な拡張機能

Markdown PDF

MarkdownをPDFとして出力できます。

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

使い方
MarkDownファイルを開き、コマンドパレット(Ctrl + Shift + P)より、
「Markdown PDF:Export(pdf)」を選択します。

Text Tables

テーブル(表)を作成が楽にできるようになります。

https://marketplace.visualstudio.com/items?itemName=RomanPeshkov.vscode-text-tables

使い方

  1. Ctrl + q + q でテーブル作成モードのON/OFFを切り替えます。
  2. コマンドパレット(Ctrl + Shift + P)より、
    「Text Tables: Create table」でテーブルを作成します。
  3. Ctrl + q + f でテーブルの整形ができます。

Paste Image

クリップボードの画像を貼り付けできるようになります。

https://marketplace.visualstudio.com/items?itemName=mushan.vscode-paste-image

使い方
Ctrl + Alt + v でクリップボードの画像を貼り付けます。
デフォルトの設定では、貼り付けた画像がマークダウンファイルと同じフォルダに「タイムスタンプ.png」として保存されます。


貼り付けた画像の保存フォルダを変更する方法は、
別記事 Visual Studio Code 拡張機能Paste Imageの画像保存先を変更する
を参照してください。

ソースコードを書くのに便利な拡張機能

zenkaku

全角スペースを表示する拡張機能です。
半角スペースはvscodeの設定で表示できますが、全角スペースを表示する方法がないので、この拡張機能を使用して全角スペースを表示できるようにします。

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



半角スペースを表示する方法は、
別記事 Visual Stdio Code の設定で、半角スペースを表示する を参照してください。

vscode-icons

vscodeのエクスプローラーに表示されているファイルにアイコンを表示してくれます。

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

2022/01/23 追加です。
いろいろ便利な拡張機能をインストールしてみたのですが、本当に必要なものだけにしたいなと、すべての拡張機能を一度アンインストールしてみました。
開発作業をしながら本当に必要なものだけを順次インストールしていってるのですが、このファイルにアイコン表示をしてくれる機能は、なくて困るということもないですが、あると視認性がよくなって、少しだけ開発効率がよくなります。
やっぱり必要ということでインストールしました。

括弧のペアに色付けする機能

VsCodeのv1.60より、括弧のペアに色付けする機能はVsCodeの設定から行えるようになりました。
設定 > 「Bracket Pair Colorizaton: Enabled」のチェックをONにします。


Dockerにお勧めの拡張機能

Docker使用時に必須の拡張機能です。
VsCodeからコンテナー化されたアプリケーションを簡単に構築、管理、およびデプロイできるようになります。

https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker

Angularにお勧めの拡張機能

Angular Language Service

Angular開発をする時に必須の拡張機能です。
コード補完、コンパイルエラーチェック、入力補完、定義へ移動などができるようになります。

https://marketplace.visualstudio.com/items?itemName=Angular.ng-template

ESLint(イーエスリント)

静的解析ツールです。
定義されているコーディングルールに従って、構文エラーをチェックします。

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Prettier(プリティア)

コードフォーマッター(コード整形ツール)です。

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
使い方
コマンドパレット(Ctrl+Shift+p)から、
Format Documentでドキュメントをフォーマットします。
Format Selectionで選択範囲をフォーマットするします。

Debugger for Microsoft Edge

Edgeを使ってデバッグする際には必要です。
※以前は、Chromeでデバッグする時は「Debugger for Chrome」拡張機能が必要でしたが、
現在はVsCode自体にこの機能が組み込まれたため、不要になっています。

https://docs.microsoft.com/ja-jp/microsoft-edge/visual-studio-code/debugger-for-edge

Auto Rename Tag

HTML、XMLの開始タグを変更すると、終了タグも自動で変更しれくれます。

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
2022/01/24 追加です。
なくても困らないですが、ないと地味に不便です。

Reactにお勧めの拡張機能

ESLint(イーエスリント)

静的解析ツールです。
定義されているコーディングルールに従って、構文エラーをチェックします。

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Prettier(プリティア)

コードフォーマッター(コード整形ツール)です。

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
使い方
コマンドパレット(Ctrl+Shift+p)から、
Format Documentでドキュメントをフォーマットします。
Format Selectionで選択範囲をフォーマットするします。

Auto Rename Tag

HTML、XMLの開始タグを変更すると、終了タグも自動で変更しれくれます。

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
2022/01/24 追加です。
なくても困らないですが、ないと地味に不便です。

Discussion

ログインするとコメントできます