VS Codeをインストールしたあと、「最初に何を設定すればいいの？」と迷う人は多いと思います。
VS Codeはそのままでも使えますが、日本語化、文字サイズ、自動保存、折り返し、拡張機能などを少し整えるだけで、かなり使いやすくなります。
この記事では、VS Code初心者の方に向けて、最初に確認しておきたい基本設定をわかりやすく整理します。
この記事でわかること
- VS Codeを使い始める前に確認したい設定
- 初心者が知っておきたい拡張機能の考え方
- 設定で迷ったときの考え方
まず結論：最初は「見やすさ」と「保存ミス防止」から整える
VS Codeを初めて使う場合、最初から細かい設定をすべて覚える必要はありません。
まずは、次の5つを整えるだけで十分です。
| 設定 | 目的 |
|---|---|
| 日本語化 | メニューや設定画面を理解しやすくする |
| 文字サイズ | コードを読みやすくする |
| 自動保存 | 保存忘れを減らす |
| 折り返し表示 | 長い行を見やすくする |
| 拡張機能 | 必要な機能だけを追加する |
VS Codeはあとからいくらでも設定を変えられるので、最初は「作業しやすい状態にする」ことを優先しましょう。
VS Codeを日本語化する
VS Codeは初期状態では英語表示になることがあります。
英語のままでも使えますが、初心者のうちはメニューや設定名が日本語の方が迷いにくいです。
日本語化するには、Microsoftが提供している「Japanese Language Pack for Visual Studio Code」を使います。
日本語化の手順
- VS Codeを開く
- 左側の拡張機能アイコンをクリックする
- 検索欄に「Japanese Language Pack」と入力する
- Microsoft提供の日本語言語パックをインストールする
- VS Codeを再起動する
もし表示言語を手動で切り替えたい場合は、コマンドパレットから「Configure Display Language」を実行します。
コマンドパレットは、Windowsなら Ctrl + Shift + P で開けます。
文字サイズを見やすくする
コードを書くときは、文字サイズが小さすぎると疲れやすくなります。
とくにノートPCや高解像度モニターでは、初期設定のままだと少し見づらいことがあります。
文字サイズの変更手順
Ctrl + ,で設定画面を開く- 検索欄に「font size」と入力する
- 「Editor: Font Size」の数値を変更する
迷った場合は、まず 14 か 16 あたりから試すと調整しやすいです。
大きすぎると一度に見えるコード量が減るので、自分が読みやすい範囲で調整しましょう。
自動保存をオンにする
初心者がよくやりがちなのが、ファイルを保存し忘れたまま実行してしまうことです。
自動保存をオンにしておくと、変更した内容が自動で保存されるため、保存忘れによるミスを減らせます。
自動保存の設定手順
- 設定画面を開く
- 検索欄に「auto save」と入力する
- 「Files: Auto Save」を好みの設定に変更する
おすすめは、まず afterDelay です。
これは、編集後しばらくすると自動で保存される設定です。
ただし、保存前に一度見直したい人や、学習中にあえて保存タイミングを意識したい人は、最初はオフのままでも問題ありません。
長い行を折り返して表示する
コードや文章が横に長くなると、画面を左右にスクロールしないと読めなくなります。
折り返し表示をオンにすると、長い行が画面幅に合わせて折り返されるため、読みやすくなります。
折り返し表示の設定手順
- 設定画面を開く
- 検索欄に「word wrap」と入力する
- 「Editor: Word Wrap」を
onにする
ブログ記事の下書きやMarkdownを書く場合にも便利です。
一方で、コードの見た目を厳密に確認したいときは、折り返しをオフにした方が見やすい場面もあります。
ミニマップは好みでオフにしてもよい
VS Codeの右側には、ファイル全体を小さく表示する「ミニマップ」があります。
長いコードを扱うときは便利ですが、初心者のうちは画面が少しごちゃついて見えることがあります。
使わない場合は、設定でオフにしても問題ありません。
ミニマップをオフにする手順
- 設定画面を開く
- 検索欄に「minimap」と入力する
- 「Editor: Minimap Enabled」のチェックを外す
画面をシンプルにしたい人は、オフにしておくと集中しやすくなります。
拡張機能は必要なものだけ入れる
VS Codeは、拡張機能を入れることで使いやすくなります。
ただし、最初からたくさん入れすぎると、どれが何のための機能なのかわかりにくくなります。
まずは、今の作業に必要なものだけ入れるのがおすすめです。
| 拡張機能 | 使う場面 |
|---|---|
| Japanese Language Pack | VS Codeを日本語表示にしたいとき |
| Prettier | HTML、CSS、JavaScriptなどを整形したいとき |
Prettierは、コードの見た目を整える拡張機能です。HTML、CSS、JavaScriptなどを書く予定がある場合は候補になります。
ただし、最初から必ず入れる必要はありません。まずは日本語化だけ入れて、必要になったタイミングで拡張機能を追加していく形でも大丈夫です。
拡張機能はあとから追加・削除できるので、「使う目的がはっきりしているものだけ入れる」と考えると迷いにくくなります。
設定はユーザー設定とワークスペース設定に分かれる
VS Codeの設定には、大きく分けて「ユーザー設定」と「ワークスペース設定」があります。
| 種類 | 反映される範囲 |
|---|---|
| ユーザー設定 | VS Code全体に反映される |
| ワークスペース設定 | 開いているプロジェクトだけに反映される |
初心者のうちは、基本的にユーザー設定を使えば大丈夫です。
プロジェクトごとに設定を変えたい場合だけ、ワークスペース設定を使うと覚えておきましょう。
最初から細かく設定しすぎない
VS Codeは設定できる項目がとても多いです。
テーマ、フォント、ショートカット、拡張機能、整形ルールなど、こだわろうと思えばかなり細かく調整できます。
ただし、初心者のうちは設定に時間をかけすぎるより、まずは実際にコードを書いてみる方が大切です。
最初は次の流れで十分です。
- 日本語化する
- 文字サイズを調整する
- 自動保存を設定する
- 折り返し表示を確認する
- 必要になった拡張機能だけ入れる
使っているうちに「ここが不便だな」と感じたら、そのタイミングで設定を追加していきましょう。
まとめ
VS Codeは、最初から細かく設定しなくても使える便利なエディタです。
ただし、日本語化、文字サイズ、自動保存、折り返し表示、拡張機能の考え方を整えておくと、初心者でも使いやすくなります。
迷ったときは、まず「見やすくする」「保存ミスを減らす」「必要な拡張機能だけ入れる」の3つを意識すると、設定で迷いにくくなります。
コメント