VSCodeの最初の設定 — 入れておく拡張機能と、変えておく3項目

エディタの設定は、調べ始めるときりがありません。テーマ、フォント、無数の拡張機能。ただ、学び始めの時期に効くものは限られています。ここでは「入れたその日に効くもの」だけに絞ります。

先に変えておく3項目

メニューの File（ファイル）から Auto Save（自動保存）を選ぶだけです。「変更したのにブラウザに反映されない」の原因で最も多いのが、単なる保存忘れです。これを消せるだけで、無駄に悩む時間がなくなります。

設定で render whitespace を検索し、all にします。半角スペースと全角スペースが見分けられるようになります。全角スペースの混入はCSSやJavaScriptが動かなくなる典型的な原因で、しかも見た目では気づけません。表示しておけば一発で分かります。

設定で word wrap を検索し、on にします。長い行が画面の外に消えなくなるので、横スクロールしながらコードを追う必要がなくなります。

特に効くのは Live Server です。ファイルを保存 → ブラウザに切り替えて再読み込み、という往復が消えるので、書き換えた結果をすぐ確認できるようになります。学習中はこの速さがそのまま理解の速さになります。

自動整形は便利ですが、コードが勝手に書き換わったように見えて最初は驚きます。整形されるのはインデントや改行の位置だけで、動作は変わりません。慣れるまでは、保存時の自動整形をオフにして、手動で整形するところから始めても構いません。

変更した設定は settings.json というファイルに書かれます。設定画面の右上にあるアイコンから直接開けます。中身はただのテキストなので、パソコンを買い替えたときはこのファイルを持っていくだけで同じ環境になります。

ここまで整えたら、あとは書くだけです。テーマやフォントの調整は、手が止まったときの気分転換に取っておきましょう。