こんにちは、エンジニアの松川です。
普段我々エンジニアがコードを書く際に欠かせないのがコードエディタの存在。
そのなかでも Microsoft が提供する VSCode は現在最も人気のあるコードエディタの一つです。
VSCode の強みは何といってもその拡張機能の豊富さです。標準機能では物足りなくなったときも 54000 [1] もの拡張機能が強力にコーディングをサポートしてくれます。
ただそれほど数が多いと最初は何を入れればよくわからないのもまた事実、そこで今回は現役でエンジニアとして活躍するフォルシア社員にオススメの拡張機能を聞いて 10 個に厳選しましたので、紹介いたします。
おすすめ拡張機能 10 選
1. Whitespace+
みなさんが普段コードを書くとき、文末にくるスペースやタブとスペースの違いに悩まされたことはありませんか？
スペースやタブなどはエディタ上に何も表示されないのでぱっと見の判別が困難です。
そんなときにおすすめなのがこの Whitespace+ 。
スペースやタブなどを可視化してくれます。また、お好みによって単語間の単一スペースは非表示にする、選択中の文字列のみ表示するなどの設定もできます。
2. Remote - SSH
リモートサーバーで作業するとき、 「VSCode ならこの操作一瞬なのに...」 などのように思ったことはありませんか？
Remote-SSH ならそんなお悩みを解決できます！
普段使い慣れている環境でコーディングすることでミスも減らせますし、サーバー間のアップロード/ダウンロードもドラッグアンドドロップで完結するので非常に効率的です。
3. Bookmarks
複数ファイルを跨ぐコーディングであったり、巨大なファイルを扱うコーディングでは自分が今見たい場所に移動するのが大変なことがあります。
Bookmarks なら頻繁にアクセスする箇所を "ブクマ" でき、すぐにエディタ上の移動がぐっと効率化されます。
4. Todo Tree
コードを書いていると「とりあえず今はこれで運用していくけど、後々対応しないとなー」と、TODO コメントを残すことはよくあると思います。
ただ、そのような TODO コメントを放置しがちにしてしまう方もいるはず。そんな方にお勧めなのがこの Todo Tree です。
あたかもファイルの配下に TODO コメントがあるように表示され、該当箇所へのアクセスも良くなり、TODO の一覧性が上がります。
5. Error Lens
コードを実行するときにエラーはつきものですが、どこでエラーが発生しているのかを探すのに時間がとられることもあるかと思います。
Error Lens ならエラーが発生した行末にエラー内容を表示してくれます、些末なエラーで時間を取られることが激減します。
6. VSCode-icons
プロジェクトによっては拡張子を除いて同じ名前のファイルをいくつも扱わない場合もあるかと思います。
そんなときに便利なのが VSCode-icons 。
ファイル名の隣にアイコンを表示してくれます。
7. indent-rainbow
Python などインデントが重要な言語を扱う際や階層が深い箇所をコーディングする際に、今どこのインデント階層にいるのかを把握するのは重要です。
indent-rainbow はインデントに色付けし、その判別を一瞬でできるようにしてくれます。
8. Open In GitHub
Git を使っているなら問答無用で入れるべきなのがこの Open In GitHub。
今触っているファイルを GitHub/GitLab/BitBucket 上で開いてくれます。
9. GitLens
GitLens も特に Git を用いてチームで開発されている方には必須級の拡張機能です。
ファイル、あるいは行単位で誰がいつコミットしたかを確認することができます。今見ているコードがなに由来なのかが即座に分かるうえ、昔のバージョンとの比較が簡単にできます！
10. Git Graph
Git Graph も Git に関する拡張機能です。
VSCode 上で簡単にグラフ上から Git を操作できます。Gitの操作が高速に行えるほか、ブランチの選択ミスなどの軽減も期待できそうです！
最後に
10 個の拡張機能を紹介いたしました。皆様が気に入る拡張機能があれば幸いです、よい VSCode ライフを！
この記事を書いた人
松川陽亮
2022年新卒入社
腹囲が一年で ○○cm 増えたのが最近の悩み。
-
2023年12月現在 ↩︎
Discussion