Visual Studio Code おすすめ拡張機能
Microsoftが提供している無料のテキストエディター「Visual Studio Code（以下vscode）」に是非インストールしておきたいおすすめの拡張機能（プラグイン）をまとめました。
今回紹介する拡張機能は、フロントサイドの作業する方向けになります。
また、HTML SnippetsやSassなどの言語系の拡張機能は割愛していますので、ご自身が使用する言語に応じて各種インストールすることをおすすめします。
表示拡張系
括弧をペアごとに違う色に - Bracket Pair Colorizer
括弧をペアごとに違う色で表示してくれます。対応している括弧ごとに色が変わるので、入れ子になってもどれがどの括弧かが分かりやすくなります。
カラーコードの色を可視化 - Color Highlight
#fffやrgba(0, 0, 0, .5)などのカラーコードの箇所にその色をつけて可視化してくれます。
全角スペースをハイライト - EvilInspector
コード上の全角スペースを可視化してくれます。
行末のスペースを可視化 - Trailing Spaces
行末のスペースを可視化してくれます。設定を変更すれば保存時に削除もしてくれます。
インデントの背景色を変える - indent-rainbow
インデントごとに背景色を変えて見やすくしてくれます。設定ファイルを触れば好きな色にすることも出来ます。
任意の文字をハイライト -
任意の文字列をハイライトすることが出来ます。例えば、文字参照しなければいけない丸数字や旧字体などを設定しておけば、コーディング時に文字化けを防ぐことが出来ます。
ハイライトしたい文字列は、vscodeの設定ファイルで設定することが出来ます。
"todohighlight.keywords": [
"①",
"②",
"③"
]
機能拡張系
開始タグと終了タグを同時に編集 - Auto Rename Tag
開始タグを編集すると、同時に終了タグも編集してくれます。
マークダウンファイルをプレビュー - Auto-Open Markdown Preview
マークダウンファイル（.md）を開くと、自動的に画面を分割してマークダウンのプレビューを表示してくれます。
注意点としては、既に画面を分割している状態でマークダウンファイルを開くと、分割している片方のタブが全て閉じられてしまうことです。
行ごとにブックマークを付けて手軽に移動 - Bookmarks
行ごとにブックマークを付けることが出来るようになり、ショートカットキーでそこに移動することも出来ます。
デフォルトのショートカットキーは以下の通りです。
| ショートカットキー | 動作 |
| ［ Command ］+［ Option ］+［ k ］ | ブックマークを作成 |
| ［ Command ］+［ Option ］+［ l ］ | 次のブックマークに移動 |
| ［ Command ］+［ Option ］+［ j ］ | 前のブックマークに移動 |
コピー履歴が保存され自由にペースト出来る - Clipboard Ring
エディタ上でコピー、またはカットしたテキストを履歴（初期設定では10件まで保存）としてクリップボードに保存され、それを自由に呼び出せるようになります。
［Command］+［Shift］+［v］で最後にコピーしたテキストをペーストすることが出来ます。このキーを繰り返し実行することで履歴を遡ることも出来ます。
Gitの操作を使いやすく - GitLens — Git supercharged
vscode上でのGit操作を拡張してくれます。git logやgit commitを見やすい状態で遡れたり、誰がバグを紛れ込ませたかなどを探す時に便利な機能です。
選択範囲を新たなタグで囲める - htmltagwrap
選択している箇所を新たなタグで囲んでくれます。
任意の箇所を選択した状態にして［Option］ + ［w］で実行します。すると、そのテキストを<p>で囲んでくれます。囲んだ後は<p>が選択されている状態なので、そこから違うタグに編集することも出来ます。
まとめ
便利な拡張機能はたくさんあるので、最初はいろいろインストールしてみるといいでしょう。
しかし、拡張機能をインストールし過ぎると動作が重くなる原因になるので、必要最低限以外はインストール（機能を有効に）せず、使わなくなったらアンインストールか機能を無効にしておきましょう。
