VSCode使いのためのオススメ拡張機能まとめ。

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

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

VSCodeの拡張機能の探し方

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

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

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

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

コーディングをサポート

各種スニペット

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

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

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でバージョン管理するなら絶対入れておきたいツールがこれ。

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

見た目を美しく

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

Material Icon Theme

Material Icon Theme

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

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

Titlebar-Less VSCode on macOS

Titlebar-Less VSCode on macOS

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

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

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

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

インテグレーション

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

Slack Chat

Jira Plugin

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

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

Jira Plugin

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

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

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

Transmit

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

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

まとめ

たくさん紹介しましたが、便利だったのがtransmit。

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

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