はじめに
開発を進めていく上で、エディタの拡張機能であったり、コマンドであったり、
様々な場面で手助けしてくれたツール等がありました。
他の開発者の方も多数紹介してくれているので、重複している部分も多いと思いますが、
今回は自分が開発してきた中で、とても使っていて助かった者たちを紹介していきます!
※特定の言語やファイルには、あまり特化していないので、それなりに共通して使えそうなものだけピックアップしています
拡張機能(Visual Studio Code)
Git系
Git Graph
GitのブランチをVsCode上で視覚的に確認できるツール
コード編集中にサクッとタブを切り替えるだけで見えるので、GUIツールを開いたりする手間が省ける
Git Lens
Gitを使用しての開発だと、誰がいつ更新をかけたかが一発で分かっちゃう優れもの
実装者に仕様質問する時とか、チケット管理されてるサイトとかを漁らなくても良い
GitHub Copilot※無料・有料プランあり
生成AIによるチャット機能やコード補完機能を使用できる
ただし無料プランだと制限があるので、課金ができる環境であれば有料プランがおすすめ
インデント系
Trailing Spaces
不要な空行だったり、インデントが入力されている箇所が赤くハイライトされる
各行にカーソルを合わせたら、文末じゃなかったりするのを防げる
zenkaku
全角スペースが入ってしまっていた場合に、ハイライト表示してくれる
上述したTrailing Spacesともしかしたら競合するかもなので注意
Prettier
自動でコードフォーマットを整形してくれる機能
ただし、細かくインデントを調整したい等が発生した場合は、一旦切った方が良いかも
indent-rainbow
インデントが色付けされるので、どれくらい空いているのか、
上下の差がどうなっているのかを確認する時に楽
開発系
Live Share
ペアプロをする時、本当に便利
対象者のエディタに接続して、相手方のコード編集や状況確認に使えるのでおすすめ
Code Spell Checker
単純にスペルミスが無いかをチェックしてくれる機能
間違えたスペルで変数やらメソッド名を大量生産してしまうと、リファクタリングが大変・・・
Error Lens
エディター内のエラーや警告の原因を表示してくれる機能
意外とカッコとか記号漏れがあったりするので、そんな時にすぐ表示してくれるので有難い
ESLint
Web開発をしているとJavascriptかTypescriptに遭遇することが多いので、
そんな時に構文チェックをしてくれる機能
ただ設定項目が結構多いはずなので、調べながら調整した方が吉
Remote - SSH
リモートサーバーもしくは仮想サーバー上で作業しないといけない時に、
ローカルファイルのような感じで操作出来たりする
※もしも業務で使う場合は、使用して良いか等の確認は必ず取ること
CSS Peek
別ファイルに定義されているCSSをclassへ付与したときに、フォーカスするだけで定義を参照してくれる
開発後半になるとCSSも数が増えてくるので、そんな時におすすめ
Draw.io
VsCode上で図を描けるようになる
フローチャートとかまとめたい時に、他のツールを開く必要が無くなる
見た目系
Material Icon Theme
フォルダ・ファイル一覧にアイコンが付くので、各ファイルを区別しやすくなる
ファイル数が増えると何が何だか分らなくなる可能性があるので、地味に嬉しい機能
Color Highlight
カラーコードの記述があると、該当する色が表示される
フロント側の開発をやっている時は地味に便利
CSV系
Rainbow CSV
CSVファイルをエディタで開いたときに、各値が色付けされてかなり見やすくなる
Edit CSV
CSVファイルをVsCode上で編集できるようになる
エクセルを開く必要がないので、サクッと作業ができるのも良い
RainbowCSVと組み合わせると、もっと効率よく作業できるかも
その他
fzf
導入するとコマンドライン上で曖昧検索が可能になる
何個も何個もコマンド打っていても忘れることがあるので、そんな時に簡単に検索できる優れもの
clipy※Mac限定
コピーしたテキストを複数保持しておくことができる
テスト中にテストアカウントを切り替える時とかに便利
まとめ
今では拡張機能や何かを導入しなくても、備え付けでできたりする可能性があるので、
情報が一部古いかもしれませんが、今まで使ってきてよかったものをまとめてみました!
今後新しい拡張機能が増えたりすると思うので、何かあればまた紹介できればと思います。
おまけ
導入したことは無いが、
タイピングする度にエフェクトが出てくるちょっと面白そうな機能を見つけたので、
個人開発する時に入れて試してみたい
※この拡張機能を入れる場合は、仕事中にやるのは控えましょう!(多分怒られます)