フロントエンド開発おすすめのVSCode拡張機能
みなさんこんにちは！
ONE CAREER CLOUD採用管理（ATS）チームにて、ソフトウェアエンジニアを担当しているコ ショウトウ（Github：jamesdongdong）です。
今回は、フロントエンド開発におすすめのVSCode 拡張機能について紹介したいと思います！
きっかけ
弊社佐藤が執筆したお気に入りツールの紹介記事は、ご覧いただけたでしょうか？
実際、私は佐藤の記事に載っていたツールを色々と導入してみたのですが、自分の作業効率が大幅に向上しました。特に、Raycast を活用してブックマークをすぐに開いたり、ウィンドウサイズを設定したりするようにしたことで、作業を一気に効率化できたと感じています。
便利なツールについて言えば、私も仕事の効率を高めるために普段から多くのVSCode拡張機能を使用しています！「自分も皆さんに、仕事の効率が高まる、非常に役立つおすすめのツールを紹介したい！」と思い、ここでいくつか紹介します。
拡張機能紹介
Casing Convention
テキストをさまざまなフォーマットに変換する拡張機能です。
特にVueを書く際、kebab caseとcamel caseなどの変換が楽にできます。
例えば、isSuperLongVariableName という変数名を is-super-long-variable-name に変更したい場合、
導入前：手動で修正します。タイポが発生する可能性があり、時間がかかります。
導入後：コマンドパレットで casing: kebab-case を選択するだけです。時間を節約でき、ミスも防げます。（操作手順は上の図、結果は下の図）
Bookmarks
コードにブックマークを付け、クリックすることで該当の位置にジャンプする拡張機能です。
例えば、長いコードを読んでいる際に、後で戻ってある箇所のコードを再度確認したい場合、
導入前：コメントを追加して、後で戻って読みたい場所をマークしていました。探すときにはコメントを検索する必要があり、誤ってコメントをコミットしてしまう可能性もあります。
導入後：コミットの心配なく自由にマークでき、確認したいときは左側の保存リストから簡単に探せます。
Edit csv
VSCode内で直接CSVファイルを編集できる拡張機能です。
CSVファイル を修正する必要がある場合、
導入前：Excelで修正できますが、ソフトウェアの起動が遅く、ライセンスの購入も必要。Numbers は無料だが CSV ファイルを直接開くことはできません。
導入後：修正をVSCode 内で完結できます。
Code Spell Checker
コードやドキュメントのタイポをチェックする拡張機能です。
例えば、apple を appple と誤って入力した場合、
導入前：タイポをすぐに発見できず、Copilot がそのタイポを基にさらにタイポのあるコードを生成してしまうことがあります。
導入後：タイポをすぐに発見でき、Copilot による多くのタイポを回避できると考えられます。
vue-find-parent-component
Vueコンポーネントの親コンポーネント（使用されている場所）を迅速に見つけることができる拡張機能です。
手動でVueコンポーネント名を入力して検索する代わりに、この拡張機能を使用することで、一瞬で親コンポーネントを見つけることができます。
例えば、SuperLonggggggNameComponent というコンポーネントがどこで使用されているか見つけたい場合、
導入前：全体検索で SuperLonggggggNameComponent を手動で入力して検索する必要があり、入力ミスで結果が得られないこともあります。
導入後：メニューから Find Parent Component をクリックするだけで、すぐに使用場所を見つけられます。
最後に
いろいろと紹介しましたが、「あ、これ欲しかった！」と思っていただけましたか？
この記事が、少しでも皆さんの作業効率向上に役立てば幸いです！
最後までお読みいただき、ありがとうございました！
▼ワンキャリアのエンジニア組織のことを知りたい方はまずこちら
▼カジュアル面談を希望の方はこちら
▼エンジニア求人票