5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

VsCode開発を助けてくれた便利な者たち

Last updated at Posted at 2025-08-05

:bulb:はじめに

開発を進めていく上で、エディタの拡張機能であったり、コマンドであったり、
様々な場面で手助けしてくれたツール等がありました。

他の開発者の方も多数紹介してくれているので、重複している部分も多いと思いますが、
今回は自分が開発してきた中で、とても使っていて助かった者たちを紹介していきます!

※特定の言語やファイルには、あまり特化していないので、それなりに共通して使えそうなものだけピックアップしています

:hammer_pick:拡張機能(Visual Studio Code)

:file_cabinet:Git系

Git Graph

GitのブランチをVsCode上で視覚的に確認できるツール
コード編集中にサクッとタブを切り替えるだけで見えるので、GUIツールを開いたりする手間が省ける

Git Lens

Gitを使用しての開発だと、誰がいつ更新をかけたかが一発で分かっちゃう優れもの
実装者に仕様質問する時とか、チケット管理されてるサイトとかを漁らなくても良い

GitHub Copilot※無料・有料プランあり

生成AIによるチャット機能やコード補完機能を使用できる
ただし無料プランだと制限があるので、課金ができる環境であれば有料プランがおすすめ

:mag:インデント系

Trailing Spaces

不要な空行だったり、インデントが入力されている箇所が赤くハイライトされる
各行にカーソルを合わせたら、文末じゃなかったりするのを防げる

zenkaku

全角スペースが入ってしまっていた場合に、ハイライト表示してくれる
上述したTrailing Spacesともしかしたら競合するかもなので注意

Prettier

自動でコードフォーマットを整形してくれる機能
ただし、細かくインデントを調整したい等が発生した場合は、一旦切った方が良いかも

indent-rainbow

インデントが色付けされるので、どれくらい空いているのか、
上下の差がどうなっているのかを確認する時に楽

:hammer:開発系

Live Share

ペアプロをする時、本当に便利
対象者のエディタに接続して、相手方のコード編集や状況確認に使えるのでおすすめ

Code Spell Checker

単純にスペルミスが無いかをチェックしてくれる機能
間違えたスペルで変数やらメソッド名を大量生産してしまうと、リファクタリングが大変・・・

Error Lens

エディター内のエラーや警告の原因を表示してくれる機能
意外とカッコとか記号漏れがあったりするので、そんな時にすぐ表示してくれるので有難い

ESLint

Web開発をしているとJavascriptかTypescriptに遭遇することが多いので、
そんな時に構文チェックをしてくれる機能
ただ設定項目が結構多いはずなので、調べながら調整した方が吉

Remote - SSH

リモートサーバーもしくは仮想サーバー上で作業しないといけない時に、
ローカルファイルのような感じで操作出来たりする

※もしも業務で使う場合は、使用して良いか等の確認は必ず取ること

CSS Peek

別ファイルに定義されているCSSをclassへ付与したときに、フォーカスするだけで定義を参照してくれる
開発後半になるとCSSも数が増えてくるので、そんな時におすすめ

Draw.io

VsCode上で図を描けるようになる
フローチャートとかまとめたい時に、他のツールを開く必要が無くなる

:barber:見た目系

Material Icon Theme

フォルダ・ファイル一覧にアイコンが付くので、各ファイルを区別しやすくなる
ファイル数が増えると何が何だか分らなくなる可能性があるので、地味に嬉しい機能

Color Highlight

カラーコードの記述があると、該当する色が表示される
フロント側の開発をやっている時は地味に便利

:floppy_disk:CSV系

Rainbow CSV

CSVファイルをエディタで開いたときに、各値が色付けされてかなり見やすくなる

Edit CSV

CSVファイルをVsCode上で編集できるようになる
エクセルを開く必要がないので、サクッと作業ができるのも良い

RainbowCSVと組み合わせると、もっと効率よく作業できるかも

:label:その他

fzf

導入するとコマンドライン上で曖昧検索が可能になる
何個も何個もコマンド打っていても忘れることがあるので、そんな時に簡単に検索できる優れもの

clipy※Mac限定

コピーしたテキストを複数保持しておくことができる
テスト中にテストアカウントを切り替える時とかに便利

:pushpin:まとめ

今では拡張機能や何かを導入しなくても、備え付けでできたりする可能性があるので、
情報が一部古いかもしれませんが、今まで使ってきてよかったものをまとめてみました!

今後新しい拡張機能が増えたりすると思うので、何かあればまた紹介できればと思います。

:gift:おまけ

導入したことは無いが、
タイピングする度にエフェクトが出てくるちょっと面白そうな機能を見つけたので、
個人開発する時に入れて試してみたい

※この拡張機能を入れる場合は、仕事中にやるのは控えましょう!(多分怒られます:skull_crossbones:

5
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?