Visual Studio Code ※以降VScode を利用してコードを書くときに、拡張機能を使うととても便利です。
いろいろな言語を使う方がいると思いますが、今回はHTML、CSS、JavaScript、TailwindCSSを使う初心者の方に便利な拡張機能を５つご紹介しようと思います！
おまけで、個人的におすすめなテーマを一つだけご紹介します。
ぜひ最後まで読んでいってください！
１. Image preview
この拡張機能は、画像のプレビューを表示するというのが主な目的です。
コード内でURLやパスを設定していても、「これなんの画像だっけ？」となることがあると思いますが、この拡張機能は左側に小さくアイコンとして表示されます。
またコードにカーソルを合わせると、画像が表示されます！
とても便利なので、ぜひインストールしてみてください！
2. SVG Preview
これまた画像に関する拡張機能です。
SVG画像のプレビューを見ることができます！
SVGファイルの中のコードを変更すればプレビューのほうにもすぐに反映されるので、SVG画像をよく使う方にとってはとても便利な機能だと思います！
3. Tailwind CSS IntelliSense
この拡張機能は、Tailwind CSSを使用する際に補完をしてくれます。
基本的な書き方さえ覚えていればこの機能が手助けしてくれるので、Tailwind CSSを利用する人は入れておいて損はないです！
4. Tailwind Fold
またまたTailwind CSSに関する拡張機能です。
こちらは、長くなりがちなclassを一時的に隠してくれます。
そしてカーソルが選択したときだけ全部見えるようになるので、ごちゃごちゃになりやすいTailwind CSSのでは必須ともいえる拡張機能だと思います。
5. Prettier – Code formatter
コードをきれいに整えてくれる拡張機能です。
自分でコードを書いていくと、改行やスペースが不規則になってしまうことがあります。
この拡張機能はそれを、整えてくれるのです！
後からとても読みやすく、書き足そうと思った時もどこに書けばいいか見やすかったりします。
少し癖があるので好みは分かれるかもしれないですが、個人的にはとてもおススメです！！
おまけ
最後におまけとして、今実際に使用しているおススメのテーマを一つだけ紹介しようと思います。
テーマは見た目を変える機能です。
好みのテーマを見つけるととても作業が楽しくなるので、ぜひ今回紹介するものが合わなくても探してみてください！
Catppuccin for VSCode
こちらが私のおススメテーマです！
Catppuccin for VSCodeと検索したら出てくると思います。
Javascriptを例にいうと、なんといっても色合いが目に優しいのに引数や関数の区別が色とフォントできちんとなされていて、配色の好みがドストライクだったので使用しています。
ほかにも良さそうなのはあったので、ぜひいろいろ探してみてください！！
まとめ
今回おススメした拡張機能たちはコードにはさほど影響を与えないと思いますが、見た目を整えたり、プレビューを表示したり、意外と何かを作るときこれらの機能には助けられます。
特に初心者のうちは、Prettier – Code formatterがあるととても便利ですし勝手に読みやすくしてくれて、学習や修正もしやすくなるのでとてもおススメです！！
ガンバロー！
コメント