初心者がVS Codeで最初に入れた拡張機能6選|HTML・CSS学習記録

学習記録

最初はVS Codeもよく分からなかった

実際にVS Codeをインストールして開いてみると、最初の感想は正直「えっ!全部英語なんだけど!?」でした。
Instagramdw見た時は、ただ「かっこいいコードを書く画面」というイメージしかなかったので、実際に開いてみるとどこを触ればいいのかも分からない状態。
英語ばかりで、「これ何!?どうすればいいの」と少し焦ったのを覚えています。そんな状態から少しずつ設定を進めていきました。

実際に私が最初にインストールした拡張機能一覧です。
今でも使っているものばかりなので、これからVS Codeを使う方の参考になれば嬉しいです。

①Japanese Language Pack

まず最初に入れたのは、VS Codeを日本語化する拡張機能です。
最初は英語ばかりで、どこを触ればいいのか全然わかりませんでした。でも、日本語化しただけで、かなり使いやすくなった記憶があります。

②Live Server

これはかなり感動しました。
保存するだけで、ブラウザにすぐ反映されるので、「え!こんな便利なの!?」とビックリしました。
メモ帳で一つずつ確認していた頃と比べると、かなり作業しやすくなりました。

③Auto Rename Tag

これはHTMLを書くときの便利でした。
開始タグを変えると、終了タグも自動で変わるので、打ち間違いがかなり減った気がします。
最初の頃はタグを間違えることも多かったので、すごく助かりました。

④Path Intellisense

画像やCSSのパス入力をサポートしてくれる拡張機能です。
最初はパスの意味すら分からなくて、何回もエラーになっていました。でも、入力候補が出るだけでかなり楽になりました。

⑤Prettirer

コードを自動で整えてくれる拡張機能です。
最初はコードの見た目もぐちゃぐちゃになりがちだったので、整えてくれるだけでかなり見やすくなりました。

⑥Material Icon Theme

これはフォルダやファイルのアイコンを見やすくしてくれるものです。
最初はそこまで必要かな?と思っていたけど、実際に入れてみるとかなり見やすくなりました。
少しだけ出来る人感も出て、モチベーションも上がりました(笑)

まとめ

最初は、VS Code自体もよく分からない状態でした。
でも、少しずつ使いやすく整えていくことで、前よりコードを書くハードルがさがった気がします。
もちろん、最初から全部完璧に覚えられたわけではありません。
それでも、便利な機能を使いながら進めることで、少しずつ学びやすくなっていきました。特に、時間が限られている人はど、便利なツールを使いながら効率よく進めるのは大事だなと感じてます。

コメント

タイトルとURLをコピーしました