前回は開発環境を２つほどご紹介しました。
当サイトはミニコデ以外はVSコードを中心に開発を行っているので、今回はJavaScriptVSの開発をするなら、VSコードに入れておくべき基本の拡張機能をご紹介したいと思います。
本気で開発のコーナーででは主にVS Codeを使って開発を行っていきますので、今回は基本的な拡張機能をセッティングするところまでご紹介したいと思います。
特にJavaScriptを始めたばかりの人にとって、「VS Codeの設定」や「拡張機能の選び方」は少し難しく感じるかもしれません。
この記事では、JavaScriptを書くのがグッと楽になる基本セットを、初心者にもわかりやすく紹介します。全部無料で、インストールするだけですぐ使えます！
VSコードに入れておきたい基本拡張機能セット4選
VSコードでまずは入れておきたいのは以下の4つの基本セットです。
Japanese Language Pack（日本語化）
まずVS Codeを利用するなら真っ先に入れた方がいいのがJapanese Language Packを入れた方がいいです。英語が苦手な方はメニュー見て挫折する人もいるので心理的なハードルは少しでも低い方がいいと思います。
- 英語UIで困っている初心者におすすめ
- VS Codeを日本語に切り替える手順
一応手順も掲載しておきます。
上部のメニューバーなんかが日本語化されます。これだけでも全然やりやすさが変わりますからね。やらない手はありません。
ESLint — コードミスを自動で教えてくれる
- コードのミスを自動で教えてくれます。
Prettier — コードの見た目を整える
- コードのインデント（字下げ）を自動でそろえる
- 余分なスペースや改行を削除
- シングル／ダブルクォーテーションなどを統一
- 保存するたびに、自動でキレイに整形
プログラムを組んでいると見やすくするために段差を付けて書いたりしますが、ソースが長くなると段差の高さがおかしくなって、見た目に美しくないソースコードが出来上がります。
これめっちゃ気になるんですが、それを自動で整えてくれるのが「Prettier（プリッター）」です。
インストール後に設定が必要なので、設定部分だけ説明しておきます。
Live Server — ブラウザで即プレビュー
- ファイル保存→自動リロードの流れ
- 簡単なHTML＋JSで動作を確認
変更した内容をブラウザで動作するアプリにすぐ反映してくれます。
もちろん、HTMLをダブルクリックしてアプリ起動しても一緒なんですが、その一手間が鬱陶しくなるんですよね。
インストール完了するとエディターの右下に「Go Live」というボタンが表示されるのでクリックすると、ブラウザにWEBアプリを実行してくれます。
あとはコードを保存するたびにブラウザ側のアプリが自動で更新されるようになります。
VSコード拡張機能まとめ
ということで拡張機能のまとめです。
| 拡張機能名 | 主な機能 |
|---|---|
| Japanese Language Pack（日本語化） | 英語UIで困っている初心者におすすめ |
| ESLint | コードのミスを自動でお知らせ |
| Prettier | コードのインデントを自動でそろえる 余分なスペースや改行を削除 シングル／ダブルクォーテーションなどを統一 保存するたびに、自動でキレイに整形 |
| Live Server | ファイル保存→自動リロードの流れ 簡単なHTML＋JSで動作を確認 |
他にもすぐれた拡張機能あるのですが、それはまたの機会にご紹介したいと思います。
特に･･･Open AIのCodexがやばい。
コーディングの概念が覆りますよ。
では、また！
残念パパいのっちでした。
コメント