VSCodeもっと活用したいVSCode使いのためのちょっと便利なものから最強レベルまでインストールして損しない拡張機能を集めてみました。
VSCodeには7000以上の拡張機能が登録されていて、テーマやフレームワークの拡張機能以外はあまり使われてないかも。
Slackとの連携やMarkdownの強化など、他にも便利な機能があるのでまとめて紹介します。
VSCodeでコーディングをサポートしてくれる拡張機能
VSCodeでコーディングしているときにあると便利な拡張機能です。コードのフォーマットやコメントの拡張など入れておくとちょっとだけ幸せになれます。
Live Server
Bracket Pair Colorizer 2
Prettier
コードをルールに従って自動的にフォーマットしてくれる。HTMLだけでなくあらゆるプログラミング言語に対応している最強の拡張機能。これがあればお酒を飲んでいようが２日寝てなかろうが、常にコードを綺麗に保つことができます。
Live Sass Compiler
HTML CSS Support
HTMLを書くときに、CSS側で作ったClass名が候補に出るようになります。よく書き間違いでスタイル当たってなかったりしますが、これならバッチリ。
Better Comments
コメントを色分けして見やすくしてくれる拡張機能。//の後に以下のような文字を付け足すことでコメントの分類ができるようになります。
*テキストのハイライト!警告文?疑問文TODOtodo
各種コードスニペット
少ない記述でズバッとコードをかき出してくれるので普段使ってる言語やフレームワークのスニペットは入れておきましょう。
open in browser
現在編集中のHTMLファイルをブラウザで開くことができる拡張機能。
HTMLファイルを編集しながら、変更を素早く確認したい時に便利。
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は登録したスニペットの検索や展開が便利になる拡張機能。
Command+Shift+Pでコマンドパレットを開き、Snippet: Findを選んでスニペット名を入力すると使用できます。
Go To Method
こちらはファイル内のメソッドへの移動が簡単に行える拡張機能。
Command+Shift+Pでコマンドパレットを開き、Go to Method in Fileを選択するとファイル内のメソッド一覧が表示され、素早く移動することができます。
GitLens
コミットの履歴はもちろん、現在編集中のラインがいつ更新されたかなども表示可能。
VSCodeの見た目を美しくしてくれる拡張機能
背景色やコードのカラーを変更してくれるテーマの他に、アイコンやエディターの見た目を変える拡張機能もあります。
Material Theme
VSCode入れたらとりあえずインストールしておきたいものの１つ。
Material Icon Theme
コードのカラーリングではなく、ファイルのアイコンを変えてくれる拡張機能。
ファイルの種類が視覚的にわかるので、普段サイドバー表示している人にはオススメ。
Titlebar-Less VSCode on macOS
こちらはエディター上部にある開く閉じるボタンをアイコンバーに移動して見た目をスッキリさせることができる拡張機能。
Macユーザーのみですがかなりスタイリッシュになります。
Kitty Time =(＾● ⋏ ●＾)= ෆ:
仕事中に癒しが欲しいならこれ！可愛い子猫画像をランダムに表示してくれます。
VSCodeとWebサービスを連携してくれる拡張機能
他のWebサービスやツールと連携できる拡張機能を使えば、VSCode上で様々な機能を使えるようになります。
Slack Chat
エディタを閉じることなく、Slackチャットが出来る拡張機能。コーディングしながら質問したり、確認したりできるのは便利です。
Slackと同じ感じで、Discord Chatというのもあります。
Jira Plugin
インテグレーション系は有料IDEを使うしかないかと思ってたんですが、この拡張機能でVSCodeでもJiraとの連携ができるようになります。
JiraはTrelloをバワーアップしたようなプロジェクト管理ツール。高度なタスク管理やプロジェクトの進行管理ができるので便利なツール。
プロジェクトや課題の検索を素早く行ったり、ステータスバーから取り組む課題を選択したりできます。
Transmit
Macユーザー御用達のFTPツールであるTransmitがVSCode上で操作できるようになります。
サーバとの接続、ファイルのアップロードとダウンロードもばっちり対応。
VSCodeの拡張機能の探し方
VSCodeの拡張機能はエディター上でも探せます。インストールしたい拡張機能がわかっているならこっちの方が早いですね。
どんな拡張機能があるかを調べたい場合は以下のマーケットプレイスを見るのが便利。
人気順やトレンド順などで調べられるので面白い拡張機能が見つかるかもしれません。
まとめ
たくさん紹介しましたが、便利だったのがtransmit。まるでGithubCIのようにレンタルサーバーにファイルのデプロイができるようになったのですごく便利でした。
あとチームで作業してる場合はChat機能は結構使えそう。
この他にもVSCodeにはたくさん拡張機能があります。便利なものから癒されるもの、今日の晩御飯のレシピまで揃っているので気になるものをインストールしてあなただけのVSCodeを作ってみてください。