【2021年版】VSCodeのおすすめ拡張機能(プラグイン)をジャンル別に紹介

Visual Studio Code(以下VSCode)にインストールしておきたい、おすすめの拡張機能(プラグイン)をまとめました。

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

また、HTML SnippetsSassなど言語系の拡張機能は割愛しています。

筆者が感動した拡張機能

最初に、私が感動した拡張機能を紹介させてください。

連番を一瞬で入力できる - vscode-input-sequence

vscode-input-sequence - Visual Studio Marketplace
Extension for Visual Studio Code - sequential-number in vscode

まずは作業風景をご覧ください。


※公式サイトより引用

このように、カーソルを複数箇所に追加 → ショートカットを実行すると連番が一瞬で入力されます。

具体的な使い方は以下の通りです。

使い方
  1. 連番を追加したい箇所にカーソルを追加(Command + Option + ↓ など)
  2. Command + Option + 0 で実行
  3. 連番の始まる数を入力(四則演算で入力される値をコントロールできます)

配色テーマとファイルアイコン

配色テーマ - GitHub Theme(Preview)

GitHub Theme - Visual Studio Marketplace
Extension for Visual Studio Code - GitHub theme for VS Code

GitHubの配色テーマです。ダークモードがとても見やすくて気に入っています。

ファイルアイコン - Material Icon Theme

Material Icon Theme - Visual Studio Marketplace
Extension for Visual Studio Code - Material Design Icons for Visual Studio Code

こちらも見やすく気に入っています。

表示拡張系

日本語化 - Japanese Language Pack for Visual Studio Code

Japanese Language Pack for Visual Studio Code - Visual Studio Marketplace
Extension for Visual Studio Code - Language pack extension for Japanese

VSCode全体を日本語化してくれます。

カッコをペアごと違う色に - Bracket Pair Colorizer 2

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

カッコをペアごとに違う色で表示してくれます。

入れ子になっても見やすいです。

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

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

インデントごとに背景色を変えてくれます。

前述のカッコの色を変える「Bracket Pair Colorizer 2」とセットで使うのがおすすめです。

カラーコードの色を可視化 - 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!

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

こちらもミス防止として便利です。

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

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

任意の文字列をハイライトできます。

例えば、文字参照が必要な丸数字や旧字体などを設定しておけば、コーディング時の抜け漏れを防げるでしょう。

ハイライトしたい文字列は、VSCodeの設定ファイルで設定できます。

 

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

設定ファイルの開き方
  1. Command + カンマ(,)で設定画面を開く
  2. 検索ボックスで「setting」を入力
  3. 検索結果の一番上のsetting.json で編集をクリック

機能拡張系

コード整形 - Prettier - Code formatter

Prettier - Code formatter - Visual Studio Marketplace
Extension for Visual Studio Code - Code formatter using prettier

コードを整形(フォーマット)できる拡張機能。

設定を変えることで保存時に自動整形することも可能です。

こちらのサイトで設定などが丁寧に解説されています。

ローカルサーバーをVSCodeで起動 - Live Server

Live Server
Launch a development local Server by a single click and watch live changes with some extra functionality

これまではMAMPなどで環境構築をしていた方も、ペライチレベルのサイトならLive Serverで手軽に開発できます。

使い方
  1. HTMLファイルを開く
  2. コードの上で右クリック
  3. Open width Live Serverを選択

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

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

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

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

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

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

任意の箇所を選択してOption + wで実行。
すると、その箇所を<p>タグで囲んでくれます。

囲んだ後は<p>タグが選択されている状態なので、そのまま違うタグに入力し直せます。

マークダウンファイルをプレビュー - 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を見やすい状態で遡れたりできます。

まとめ

VSCodeには便利な拡張機能がたくさんあります。

なので、最初はいろいろインストールしてみて実際に触ってみるといいでしょう。

しかし、拡張機能を闇雲にいくつもインストールすると、VSCodeの動作が重くなってしまう可能性があるので、必要最低限以外の拡張機能はインストールしない、または削除・無効するようにしましょう。

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