2018.5.2

Visual Studio Code おすすめ拡張機能

Microsoftが提供している無料のテキストエディター「Visual Studio Code(以下vscode)」に是非インストールしておきたいおすすめの拡張機能(プラグイン)をまとめました。

今回紹介する拡張機能は、フロントサイドの作業する方向けになります。

また、HTML SnippetsSassなどの言語系の拡張機能は割愛していますので、ご自身が使用する言語に応じて各種インストールすることをおすすめします。

表示拡張系

括弧をペアごとに違う色に - Bracket Pair Colorizer

Bracket Pair Colorizer - Visual Studio Marketplace
Extension for Visual Studio Code - A customizable extension for colorizing matching brackets

括弧をペアごとに違う色で表示してくれます。対応している括弧ごとに色が変わるので、入れ子になってもどれがどの括弧かが分かりやすくなります。

カラーコードの色を可視化 - Color Highlight

Color Highlight - Visual Studio Marketplace
Extension for Visual Studio Code - Highlight web colors in your editor

#fffrgba(0, 0, 0, .5)などのカラーコードの箇所にその色をつけて可視化してくれます。

全角スペースをハイライト - EvilInspector

EvilInspector - Visual Studio Marketplace
Extension for Visual Studio Code - inspect evil charactors on your code

コード上の全角スペースを可視化してくれます。

行末のスペースを可視化 - Trailing Spaces

Trailing Spaces - Visual Studio Marketplace
Extension for Visual Studio Code - Highlight trailing spaces and delete them in a flash!

行末のスペースを可視化してくれます。設定を変更すれば保存時に削除もしてくれます。

インデントの背景色を変える - indent-rainbow

indent-rainbow - Visual Studio Marketplace
Extension for Visual Studio Code - Makes indentation easier to read

インデントごとに背景色を変えて見やすくしてくれます。設定ファイルを触れば好きな色にすることも出来ます。

任意の文字をハイライト -

TODO Highlight - Visual Studio Marketplace
Extension for Visual Studio Code - highlight TODOs, FIXMEs, and any keywords, annotations...

任意の文字列をハイライトすることが出来ます。例えば、文字参照しなければいけない丸数字や旧字体などを設定しておけば、コーディング時に文字化けを防ぐことが出来ます。

ハイライトしたい文字列は、vscodeの設定ファイルで設定することが出来ます。

"todohighlight.keywords": [
    "①",
    "②",
    "③"
]

機能拡張系

開始タグと終了タグを同時に編集 - Auto Rename Tag

Auto Rename Tag - Visual Studio Marketplace
Extension for Visual Studio Code - Auto rename paired HTML/XML tag

開始タグを編集すると、同時に終了タグも編集してくれます。

マークダウンファイルをプレビュー - Auto-Open Markdown Preview

Auto-Open Markdown Preview - Visual Studio Marketplace
Extension for Visual Studio Code - Open Markdown preview automatically when opening a Markdown file

マークダウンファイル(.md)を開くと、自動的に画面を分割してマークダウンのプレビューを表示してくれます。

注意点としては、既に画面を分割している状態でマークダウンファイルを開くと、分割している片方のタブが全て閉じられてしまうことです。

行ごとにブックマークを付けて手軽に移動 - Bookmarks

Bookmarks - Visual Studio Marketplace
Extension for Visual Studio Code - Mark lines and jump to them

行ごとにブックマークを付けることが出来るようになり、ショートカットキーでそこに移動することも出来ます。

デフォルトのショートカットキーは以下の通りです。

ショートカットキー動作
[ Command ]+[ Option ]+[ k ]ブックマークを作成
[ Command ]+[ Option ]+[ l ]次のブックマークに移動
[ Command ]+[ Option ]+[ j ]前のブックマークに移動

コピー履歴が保存され自由にペースト出来る - Clipboard Ring

Clipboard Ring - Visual Studio Marketplace
Extension for Visual Studio Code - A Visual Studio Code plugin that extends the clipboard and stores copied data in a ring storage.

エディタ上でコピー、またはカットしたテキストを履歴(初期設定では10件まで保存)としてクリップボードに保存され、それを自由に呼び出せるようになります。

[Command]+[Shift]+[v]で最後にコピーしたテキストをペーストすることが出来ます。このキーを繰り返し実行することで履歴を遡ることも出来ます。

Gitの操作を使いやすく - GitLens — Git supercharged

GitLens — Git supercharged - Visual Studio Marketplace
Extension for Visual Studio Code - Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotati...

vscode上でのGit操作を拡張してくれます。git loggit commitを見やすい状態で遡れたり、誰がバグを紛れ込ませたかなどを探す時に便利な機能です。

選択範囲を新たなタグで囲める - htmltagwrap

htmltagwrap - Visual Studio Marketplace
Extension for Visual Studio Code - Wraps selected code with HTML tags

選択している箇所を新たなタグで囲んでくれます。

任意の箇所を選択した状態にして[Option] + [w]で実行します。すると、そのテキストを<p>で囲んでくれます。囲んだ後は<p>が選択されている状態なので、そこから違うタグに編集することも出来ます。

まとめ

便利な拡張機能はたくさんあるので、最初はいろいろインストールしてみるといいでしょう。

しかし、拡張機能をインストールし過ぎると動作が重くなる原因になるので、必要最低限以外はインストール(機能を有効に)せず、使わなくなったらアンインストール機能を無効にしておきましょう。

シェアする
フォローする
Web-Guided - web業界で働く方を少しだけ手助けするメディア