1. はじめに
ソーイ株式会社の西浦です。
前回の記事では「AI×Mermaid」について書きましたが、弊社はAIの活用に積極的なこともあり、最近はVS CodeベースのAIエディタである 「Cursor」 をメインに使っています。
CursorはVS Codeを元に作られているため、VS Code向けの便利な拡張機能がそのまま使えます。 今回は、私が1年目を通して色々と試したなかで、「これを入れておいて本当に役に立った！」と感じたおすすめの拡張機能を、VS Code/Cursor共通のツールとして紹介します。
新入社員の方や、「これから環境を整えたい」という方の参考になれば嬉しいです。
2. 「うっかり」をエディタに教えてもらう
慣れないうちは、どうしてもスペルミスや全角スペースなどの「うっかり」で時間を取られがちです。そこをエディタにサポートしてもらうと、本来やりたい実装に集中できるようになりました。
Error Lens
エラーや警告の内容を、コードのすぐ横に直接表示してくれる機能です。
通常、エラーの詳細は画面下の「問題パネル」を開くか、赤い波線にマウスを重ねないと見えません。でも、これを入れると「この行の何がおかしいのか」が書いているそばから視覚的にパッとわかるようになります。
いちいちマウスを動かして確認する手間が省けるので、個人的にすごく気に入ってます。
Trailing Spaces
行末にある「不要なスペース」を赤くハイライトしてくれます。
コードを書いている最中は自分でもなかなか気づかないのですが、意外と行の末尾にスペースが紛れ込んでいることがあります。そのままにしておくと、Gitなどで「本来の修正とは関係ない、意味のない差分」として記録されてしまいます。
これを入れてからは、プルリクエストを出す前に気づいてサッと消せるようになったので、セルフチェックがすごく捗るようになりました。
保存時に自動で消す
「赤く光るのを確認して消すのも面倒！」という場合は、VS Code自体の設定で自動化できます。
設定から 「Trim Trailing Whitespace」 にチェックを入れると、保存した瞬間に全ての行末スペースを自動で削除してくれます。これでお掃除の手間がゼロになります！
Code Spell Checker
英語のスペルミスをチェックしてくれる機能です。
変数名のタイポは後から直すのが意外と大変なので、書いた瞬間に波線で教えてくれるのは本当に助かります。
独自の単語を「辞書」に追加
プロジェクト独自の固有名詞などがタイポ（青い波線）として判定されてしまうことがありますが、その場合はクイックフィックス（電球アイコン）から 「Add Word to Folder Dictionary」 を選んでいます。
これで、そのプロジェクト内では「正しい単語」として認められ、波線が出なくなります。
3. コードをパッと見て分かりやすくする
ファイルが増えたり、コードが長くなったりした時に「迷子」にならないために重宝しているものです。
indent-rainbow
インデント（段落）に色がついて、階層が一目でわかります。
「今、どのif文の中にいるんだっけ？」と混乱することが減り、特にネストが深いコードを読む時に重宝しています。
Material Icon Theme
サイドバーのファイル名に、それぞれの種類に合わせたアイコンがつきます。
「これが設定ファイル」「これがメインのプログラム」と直感的に判別できるので、ファイル探しが少し楽になります。
※画像の左側がデフォルトの状態、右側が拡張機能を導入した後の状態です。
アイコンがカラフルになると、エディタの見た目が賑やかになって、コードを書くのが少し楽しくなるのも気に入っているポイントです。
4. チーム開発で助けられたもの
誰かと一緒に開発する時に「入れていてよかった」と思った機能です。
Prettier - Code formatter
コードを自動で綺麗に整えてくれるツールです。
インデントがズレていたり、改行の位置がバラバラだったりするとコードは一気に読みづらくなりますが、これを入れると一瞬でビシッと整えてくれます。手動でスペースを叩いて微調整する手間がなくなるので、1年目の私はこれに一番助けられたかもしれません。
「今すぐ綺麗にしたい！」という時は、以下のショートカットで実行できます。
-
Windows:
Shift+Alt+F -
Mac:
Shift+Option+F
設定で 「Format On Save（保存時に整形）」 を有効にしておくと、保存するたびにコードが整うので最高に気持ちいいです。
注意点：コミット前の「差分確認」がおすすめ
Prettierはファイル全体を自動で整形してくれるため、自分が修正した場所以外も意図せず変わってしまうことがあります。
チーム開発では、本来の修正とは関係ない場所まで形が変わってしまうと、レビューする人が「どこを直したのか」を判断しづらくなってしまいます。コミットする前に一度Gitの差分（diff）を見て、余計な変更が混ざりすぎていないかチェックしておくと、よりスムーズに開発が進められると思います。
GitLens
「この行を誰が、いつ、どんな意図（コミットメッセージ）で書いたか」をエディタ上に薄い文字で表示してくれる機能です。
コードを読んでいて「なぜこの書き方なんだろう？」と気になったとき、「誰に質問しに行けばいいか」がひと目でわかるのが本当に便利で、個人的にかなり重宝しています。
さらに、その薄い文字の上にマウスを置く（ホバーする）と、当時の詳しい修正内容や、関連するプルリクエストの情報まで見ることができます。
バグの修正や機能の変更をするときも、「そもそもどんな意図でこのコードが追加されたのか」という経緯を辿れるので、修正方針を決めるための大きなヒントになります。「誰に聞くか」を迷う時間が減り、先輩に質問しに行くときも「〇〇の時の実装についてですが」と具体的に切り出せるようになるので、本当に入れておいてよかったなと感じているツールです。
視界をスッキリさせたいときは？
便利な機能ですが、全ての行末に文字が出るのが「少し情報量が多いな」と感じることもあります。
その場合は、設定から 「Current Line Blame」 をオフにすると、行末の表示を消して、マウスをホバーした時だけ情報を出すようにできます。自分の集中しやすいスタイルに合わせて調整できるのがいいところです。
拡張機能の入れすぎには注意！
便利な拡張機能ですが、たくさん入れすぎるとエディタの起動や動作が重くなってしまうことがあります。
最初から全部入れるのではなく、まずは自分が「これは助かる！」と思ったものから一つずつ試してみて、自分のマシンのスペックに合わせて調整していくのがおすすめです。
5. まとめ
1年目を通していろいろな拡張機能を試してみましたが、「ツールでサポートしてもらえる安心感」があるだけで、実装のロジックを考えるのが少し楽しくなりました。
タイポやインデントのズレなどをエディタに任せられるようになると、その分だけ「どう書くか」に集中できる気がしています。
私もまだまだ環境を整えている最中なので、これからも新しいツールを積極的に試して、また「これはいい！」と思うものがあれば紹介できればと思います。
お知らせ
技術ブログを週1〜2本更新中、ソーイをフォローして最新記事をチェック！