Visual Studio Code（VS Code）は、プログラミング初心者から上級者まで幅広く使われている人気のエディタです。
インストールした直後は、「英語ばかりで分かりにくい…」「文字が小さくて見づらい…」
「そもそも、どうやって使えばいいの？」など思ったことがありませんか？
この記事では、そんなVS Codeをすぐに快適に使い始めるための「最初の5ステップ」を紹介します。
面倒な設定や難しいカスタマイズは、ありません。
「日本語化」や「フォント調整」「自動保存」など、初心者でもすぐに実践できる内容だけを厳選しています。
まずはこの記事の手順どおりに設定して、VS Codeを「自分仕様の使いやすいエディタ」にしていきましょう！
こんな方にオススメ
- VS Codeをインストールしたばかりで、何をすればいいか分からない方
- 拡張機能はまだよく分からないけど、最低限の設定だけは済ませたい方
- HTMLやCSSの勉強でLive Serverを使ってみたいと思っている方
- 拡張機能はまだよく分からないけど、最低限の設定だけは済ませたい方
- 難しいことは抜きにして、とにかく今すぐ使い始めたい初心者の方
この記事でわかること
- VS Codeを日本語に切り替える方法
- コードを書くときに便利な自動保存やインデントの初期設定
- Live ServerでHTMLをリアルタイム表示する手順
- 筆者が実際に使っている設定の紹介とおすすめポイント
VS Codeとは？
Visual Studio Code（VS Code）は、Microsoftが提供している無料のソースコードエディタです。
軽量で動作が速く、HTML・CSS・JavaScriptなどのWeb系はもちろん、PythonやC#などさまざまな言語に対応しています。
拡張機能がたくさん使えて、機能などを自由にカスタマイズできるのが特長です。
初心者にとってなぜいいの？
Visual Studio Code（VS Code）は無料で使えるため、学生や初心者でも気軽に始められます。
日本語化に簡単に設定できて、ネット上には日本語の解説記事や動画が豊富にあるので、わからないことがあっても調べやすい環境が整っています。
HTML・CSS・JavaScriptやPythonなど多くの言語に対応しているため、学習の幅が広がります。
また、自動補完やエラー表示機能があるので、コードのミスを減らしながら効率よく学べるのも初心者にとって大きなメリットです。
最初の5ステップ
ここからは、VS Codeをインストールしたあとに快適に使い始めるための「最初の5ステップ」を紹介します。
VS Codeは初期状態では英語表記なので、まず日本語にしましょう。
① 拡張機能を開く
左側のアイコンバーの四角いアイコン（拡張機能）をクリック。
②「Japanese Language Pack」を検索してインストール
検索バーに Japanese Language Pack と入力し、Microsoft製のものをインストール。
インストール後はVS Codeを再起動すればOK！
VS Codeは、見た目の色合い（テーマ）を変更できます。
背景や文字の色を変えるだけで、まぶしさが抑えられて集中しやすくなったり、気分が上がったりします。
まず、画面の上にあるメニューから
①「表示」→「コマンドパレット」 をクリック
②「テーマ」と検索して「基本設定：配色テーマ」を選びます
気になるテーマを選んでクリックするだけです。
その場で見た目が変わるので、変更されたのがすぐわかります。
おまけ：もっとテーマを探したい人は？
サイドバーの四角いアイコン（拡張機能）から「theme」と検索すると、世界中の人が作ったテーマがたくさん出てきます。
おしゃれなの、可愛いの、シンプルなの…よりどりみどり。
好きな見た目にすると、作業もはかどるし気分も上がります。
「ちょっと目が疲れるな…」と思ったら、テーマを変えてみてくださいね。
今は『One Dark Pro』というテーマを使っています。
実は以前は別のテーマを使っていたんですが、アンインストールした後に「あれ、どのテーマを使ってたかな？」と、わからなくなったんです。
いろいろ調べて試してみた結果、「見やすい！色もキレイ！目もラク！」と感じたので、今はこれに落ち着いています。
それと、『Dracula Theme Official』も気になっています。ちょっとポップでおしゃれな印象があって、作業中の気分が上がるかな？！
今後、気分転換に切り替えるかもしれません。
設定画面から変更する
❶ 左下の歯車のアイコン → 「設定」 を開く
❷ 検索バーに「font」と入力する
「Editor:Font Size」「Editor: Font Family」などの項目を編集
フォントサイズは、14〜16程度がおすすめされています。
今、使っているフォントのサイズは、14にしています。
❸ Cica(フォント）に変更する方法
❶ Cicaフォントをインストールする
公式GitHub（こちら）から最新版をダウンロードする。
.zipファイルを解凍します。
.ttfファイルをダブルクリックしてインストールします。
❷ VS Codeで設定を変更する
「Editor: Font Family」を変更する
フォントが変更されました。
Cicaフォントは無料＆商用OK。
日本語も英語も見やすく、バランスのとれた等幅フォントで人気です。
書いたコードを保存し忘れる心配がなくなります。
afterDelay(遅延後)に設定する
❶ 左下の歯車アイコン →「設定」をクリック
❷ 上部の検索欄に「auto save」と入力
❸「Auto Save（自動保存）」という項目が出てきます
プルダウンをクリックすると以下の選択肢が表示されます。
afterDelayを選択する。
Live Serverとは？
HTMLファイルをブラウザですぐにプレビューできる拡張機能です。
変更もリアルタイムに反映されてすごく便利です。
Live Serveをインストール
❶ 検索バーに Live Server と入力し、Ritwick Dey製のものをインストール。
❷ HTMLファイルを開いた状態で、右下の「Go Live」ボタンをクリックします。
※今回は設定画面から変更する方法をご紹介しました。ただし、settings.json を直接編集して設定を変更することも可能です。
まとめ
今回紹介した5つの設定をするだけで、VS Codeは、使いやすくなります。
日本語化や自動保存、見やすい画面の調整など、ほんの少し手を加えるだけで、ストレスなく作業を進められるようになります。
また、今後もっと学習を深めていく上で、安心して使い続けられる環境が手に入ります。
最初は難しく感じるかもしれませんが、大丈夫です。
まずはここから始めて、自分だけの使いやすいVS Codeにしていきましょう！
最後まで、ご覧いただきありがとうございました。
下の記事では、おすすめ拡張機能を紹介しています。
チェックしてみてね。
おすすめの拡張機能については、以下の記事をご参照ください。
↓
