Blog スタッフブログ

今回はNext.jsプロジェクト開発にあたってVSCode環境へ導入した拡張機能を紹介していきます。

Tailwind CSS IntelliSense

マーケットプレイス

Tailwind CSS のクラス名を入力補完してくれる拡張機能です。クラス候補の表示、hover時のCSSプレビュー、 linting もあり、長いユーティリティクラスを書きやすくなります。Next.js + Tailwind 構成で記述する際に導入すると良いでしょう。

ESLint

マーケットプレイス

Javascript/Typescript向けのLinterでコード上のエラーやコーディングスタイル違反をエディタ上で見つけやすくします。細かいミスを実行前に気づけて快適です。

Error Lens

マーケットプレイス

エラーの可視性を改善します。デフォルトの波線より分かりやすくなるので見落としを防ぎやすくなります。

Prettier – Code formatter

マーケットプレイス

コード整形を自動的に行うVSCode拡張です。インデントや改行位置、クォートの揺れなどを統一しやすくなりチーム開発でコーディングルールを合わせやすくなります。

これらの拡張機能を導入することで円滑に開発ができるようになりました。良かったですね。