Visual Studio Code の 拡張機能
2021年11月11日時点のWindows10での情報です。
Visual Studio Code （vscode）に入れると個人的に便利だと思う拡張機能です。
随時更新していきます。
拡張機能のインストール方法
- vscodeを開き、拡張機能アイコンを選択します。
- 検索ボックスで拡張機能を検索します。
- 見つかった拡張機能のインストールをクリックします。
【注意】
追加した拡張機能が実際にインストールされるのは、vscodeを閉じたときです。
インストール後はvscodeを一度終了し、起動しなおします。
便利な拡張機能
Japanese Language Pack for VS Code
vscodeを日本語化してくれます。
MarkDownを書くのに便利な拡張機能
Markdown PDF
MarkdownをPDFとして出力できます。
使い方
MarkDownファイルを開き、コマンドパレット（Ctrl + Shift + P)より、
「Markdown PDF:Export(pdf)」を選択します。
Text Tables
テーブル（表）を作成が楽にできるようになります。
使い方
- Ctrl + q + q でテーブル作成モードのON/OFFを切り替えます。
- コマンドパレット（Ctrl + Shift + P）より、
「Text Tables: Create table」でテーブルを作成します。 - Ctrl + q + f でテーブルの整形ができます。
Paste Image
クリップボードの画像を貼り付けできるようになります。
使い方
Ctrl + Alt + v でクリップボードの画像を貼り付けます。
デフォルトの設定では、貼り付けた画像がマークダウンファイルと同じフォルダに「タイムスタンプ.png」として保存されます。
貼り付けた画像の保存フォルダを変更する方法は、
別記事 Visual Studio Code 拡張機能Paste Imageの画像保存先を変更する
を参照してください。
ソースコードを書くのに便利な拡張機能
zenkaku
全角スペースを表示する拡張機能です。
半角スペースはvscodeの設定で表示できますが、全角スペースを表示する方法がないので、この拡張機能を使用して全角スペースを表示できるようにします。
半角スペースを表示する方法は、
別記事 Visual Stdio Code の設定で、半角スペースを表示する を参照してください。
vscode-icons
vscodeのエクスプローラーに表示されているファイルにアイコンを表示してくれます。
2022/01/23 追加です。
いろいろ便利な拡張機能をインストールしてみたのですが、本当に必要なものだけにしたいなと、すべての拡張機能を一度アンインストールしてみました。
開発作業をしながら本当に必要なものだけを順次インストールしていってるのですが、このファイルにアイコン表示をしてくれる機能は、なくて困るということもないですが、あると視認性がよくなって、少しだけ開発効率がよくなります。
やっぱり必要ということでインストールしました。
括弧のペアに色付けする機能
VsCodeのv1.60より、括弧のペアに色付けする機能はVsCodeの設定から行えるようになりました。
設定 > 「Bracket Pair Colorizaton: Enabled」のチェックをONにします。
Dockerにお勧めの拡張機能
Docker使用時に必須の拡張機能です。
VsCodeからコンテナー化されたアプリケーションを簡単に構築、管理、およびデプロイできるようになります。
Angularにお勧めの拡張機能
Angular Language Service
Angular開発をする時に必須の拡張機能です。
コード補完、コンパイルエラーチェック、入力補完、定義へ移動などができるようになります。
ESLint（イーエスリント）
静的解析ツールです。
定義されているコーディングルールに従って、構文エラーをチェックします。
Prettier（プリティア）
コードフォーマッター（コード整形ツール）です。
使い方
コマンドパレット（Ctrl＋Shift＋p）から、
Format Documentでドキュメントをフォーマットします。
Format Selectionで選択範囲をフォーマットするします。
Debugger for Microsoft Edge
Edgeを使ってデバッグする際には必要です。
※以前は、Chromeでデバッグする時は「Debugger for Chrome」拡張機能が必要でしたが、
現在はVsCode自体にこの機能が組み込まれたため、不要になっています。
Auto Rename Tag
HTML、XMLの開始タグを変更すると、終了タグも自動で変更しれくれます。
2022/01/24 追加です。
なくても困らないですが、ないと地味に不便です。
Reactにお勧めの拡張機能
ESLint（イーエスリント）
静的解析ツールです。
定義されているコーディングルールに従って、構文エラーをチェックします。
Prettier（プリティア）
コードフォーマッター（コード整形ツール）です。
使い方
コマンドパレット（Ctrl＋Shift＋p）から、
Format Documentでドキュメントをフォーマットします。
Format Selectionで選択範囲をフォーマットするします。
Auto Rename Tag
HTML、XMLの開始タグを変更すると、終了タグも自動で変更しれくれます。
2022/01/24 追加です。
なくても困らないですが、ないと地味に不便です。
Discussion