更新日: 2022 / 05 / 03

2022年最新版 VSCodeのおすすめ拡張機能まとめ

カテゴリー: コーディング

VSCodeもっと活用したいVSCode使いのためのちょっと便利なものから最強レベルまでインストールして損しない拡張機能を集めてみました。

VSCodeには7000以上の拡張機能が登録されていて、テーマやフレームワークの拡張機能以外はあまり使われてないかも。

Slackとの連携やMarkdownの強化など、他にも便利な機能があるのでまとめて紹介します。

VSCodeでコーディングをサポートしてくれる拡張機能

VSCodeでコーディングしているときにあると便利な拡張機能です。コードのフォーマットやコメントの拡張など入れておくとちょっとだけ幸せになれます。

Live Server

Live Server 今書いてるコードをブラウザでチェックしたい!というときはこれ。VSCodeの下に作成される「Go Live」ボタンからすぐにブラウザでチェックすることができるようになります。

Bracket Pair Colorizer 2

Bracket Pair Colorizer 2 カッコを色付けして見分けやすくしてくれる。閉じ括弧がどこかわかりにくい場合がよくありますが、これで一発解決!

Prettier

コードをルールに従って自動的にフォーマットしてくれる。HTMLだけでなくあらゆるプログラミング言語に対応している最強の拡張機能。これがあればお酒を飲んでいようが2日寝てなかろうが、常にコードを綺麗に保つことができます。

Live Sass Compiler

Live Sass Compiler Sassをコンパイルしてくれる拡張機能。わざわざGruntなどを入れなくてもOK。手軽にSassを使えるので重宝してます。

HTML CSS Support

HTMLを書くときに、CSS側で作ったClass名が候補に出るようになります。よく書き間違いでスタイル当たってなかったりしますが、これならバッチリ。

Better Comments

コメントを色分けして見やすくしてくれる拡張機能。//の後に以下のような文字を付け足すことでコメントの分類ができるようになります。

  • * テキストのハイライト
  • ! 警告文
  • ? 疑問文
  • TODO todo

Better Comments

各種コードスニペット

各種スニペット フロントエンドに限らず各種プログラミング言語のスニペットがたくさんあります。

少ない記述でズバッとコードをかき出してくれるので普段使ってる言語やフレームワークのスニペットは入れておきましょう。

open in browser

現在編集中のHTMLファイルをブラウザで開くことができる拡張機能。

HTMLファイルを編集しながら、変更を素早く確認したい時に便利。

CSS Peek

CSS Peek

BracketsのようにHTMLファイル上でCSSスタイルをチェックしたり、class名からCSSファイルを検索したりできる便利な機能。

Markdown All in One

Markdown使うなら入れておきたいのがこれ。

太字や見出しをショートカットで入力できたり、表を見やすく整形してくれます。

Beautify

JavascriptやCSS、SASS、HTMLコードを綺麗に整形してくれる拡張機能。

ガタガタのコードもCommand+Shift+Pでコマンドパレットを開き、beautifyでコマンドを選択すれば一発で綺麗にしてくれます。

その他にもFormatterで検索すると各言語の整形プラグインが多数見つかるので、そちらで代用してもOK。

Snippet

Snippet

Snippetは登録したスニペットの検索や展開が便利になる拡張機能。

Command+Shift+Pでコマンドパレットを開き、Snippet: Findを選んでスニペット名を入力すると使用できます。

Go To Method

こちらはファイル内のメソッドへの移動が簡単に行える拡張機能。

Command+Shift+Pでコマンドパレットを開き、Go to Method in Fileを選択するとファイル内のメソッド一覧が表示され、素早く移動することができます。

GitLens

GitLens Gitでバージョン管理するなら絶対入れておきたいツールがこれ。

コミットの履歴はもちろん、現在編集中のラインがいつ更新されたかなども表示可能。

VSCodeの見た目を美しくしてくれる拡張機能

背景色やコードのカラーを変更してくれるテーマの他に、アイコンやエディターの見た目を変える拡張機能もあります。

Material Theme

Material Theme コードのカラーリングを変えてくれる定番拡張機能。

VSCode入れたらとりあえずインストールしておきたいものの1つ。

Material Icon Theme

Material Icon Theme

コードのカラーリングではなく、ファイルのアイコンを変えてくれる拡張機能。

ファイルの種類が視覚的にわかるので、普段サイドバー表示している人にはオススメ。

Titlebar-Less VSCode on macOS

Titlebar-Less VSCode on macOS

こちらはエディター上部にある開く閉じるボタンをアイコンバーに移動して見た目をスッキリさせることができる拡張機能。

Macユーザーのみですがかなりスタイリッシュになります。

Kitty Time =(^● ⋏ ●^)= ෆ:

仕事中に癒しが欲しいならこれ!可愛い子猫画像をランダムに表示してくれます。

Kitty Time =(^● ⋏ ●^)= ෆ:

VSCodeとWebサービスを連携してくれる拡張機能

他のWebサービスやツールと連携できる拡張機能を使えば、VSCode上で様々な機能を使えるようになります。

Slack Chat

Jira Plugin

エディタを閉じることなく、Slackチャットが出来る拡張機能。コーディングしながら質問したり、確認したりできるのは便利です。

Slackと同じ感じで、Discord Chatというのもあります。

Jira Plugin

インテグレーション系は有料IDEを使うしかないかと思ってたんですが、この拡張機能でVSCodeでもJiraとの連携ができるようになります。

JiraはTrelloをバワーアップしたようなプロジェクト管理ツール。高度なタスク管理やプロジェクトの進行管理ができるので便利なツール。

プロジェクトや課題の検索を素早く行ったり、ステータスバーから取り組む課題を選択したりできます。

Transmit

Macユーザー御用達のFTPツールであるTransmitがVSCode上で操作できるようになります。

サーバとの接続、ファイルのアップロードとダウンロードもばっちり対応。

VSCodeの拡張機能の探し方

VSCodeの拡張機能はエディター上でも探せます。インストールしたい拡張機能がわかっているならこっちの方が早いですね。

どんな拡張機能があるかを調べたい場合は以下のマーケットプレイスを見るのが便利。

VSCode Marketplace VSCodeの拡張機能の探し方

人気順やトレンド順などで調べられるので面白い拡張機能が見つかるかもしれません。

まとめ

たくさん紹介しましたが、便利だったのがtransmit。まるでGithubCIのようにレンタルサーバーにファイルのデプロイができるようになったのですごく便利でした。

あとチームで作業してる場合はChat機能は結構使えそう。

この他にもVSCodeにはたくさん拡張機能があります。便利なものから癒されるもの、今日の晩御飯のレシピまで揃っているので気になるものをインストールしてあなただけのVSCodeを作ってみてください。