【初心者向け】Visual Studio Codeの導入と、これだけはやっておきたい基本設定

「よし、Visual Studio Code（VS Code）を始めてみよう！」

前回の記事を読んで、そう決意してくれたあなた、最高です！その一歩が、未来の自分を大きく変えることになりますよ。

とはいえ、いざインストールしようとすると、「どのボタンを押せばいいの？」「設定って何をすればいいの？」と、新たな疑問が湧いてきますよね。

そこで今回は、実際にVS Codeをパソコンに導入し、プログラミングを始める前に「これだけはやっておきたい！」という最低限の基本設定を解説していきます。

この記事を読みながら一緒に作業すれば、あっという間に快適な開発環境が手に入ります。さあ、未来の相棒を迎えに行きましょう！

この記事でわかること

Visual Studio Codeの具体的なインストール手順
絶対にやっておきたい「日本語化」の方法
作業効率が爆上がりする、おすすめの初期設定
最初に入れておくと便利な、厳選「拡張機能」リスト

1. 未来の相棒を迎え入れよう！VS Codeのインストール方法

まずは何と言ってもインストールから。お使いのパソコンに合わせて進めていきましょう。めちゃくちゃ簡単ですよ！

公式サイトからダウンロードしてインストールする方法が定番ですが、今回はもっと簡単な「Microsoft StoreからVS Codeをインストールする手順」を解説していきます。僕もこの方法でインストールしています。

Microsoft Store経由インストールの利点

Microsoft Store経由でのインストールには以下のメリットがあります

簡単なインストール：複雑な設定が不要
自動更新：アプリの更新が自動的に管理される
安全性：Microsoft公式のアプリストアからの配布
ITに詳しくない方にも最適：英語のサイトを見る必要がなく、安心してインストールできる

Microsoft StoreからVS Codeをインストールする方法は、Windows標準の機能を使用するため非常にシンプルで推奨される方法です。

インストール手順

1. Microsoft Storeを起動する

まず、Windowsの左下にあるスタートボタンをクリックし、「Microsoft Store」または「Store」と入力して検索します。表示された「Microsoft Store」をクリックしてアプリを起動します。

2. VS Codeを検索する

Microsoft Storeが開いたら、ウィンドウ上部の 検索窓に「VSCode」または「Visual Studio Code」 と入力し、Enterキーを押して検索を実行します。検索結果に「Visual Studio Code」が表示されたら、青いアイコンの「Visual Studio Code」 をクリックします。

※重要な注意点：
緑色のアイコンの「Visual Studio Code – Insiders」は開発者向けのプレビューバージョンです。安定性や拡張機能との互換性に問題が生じる可能性があるため、特別な理由がない限り青いアイコンの通常版を選択することをおすすめします。

3. インストールを実行する

「Visual Studio Code」の詳細画面が表示されたら、「インストール」ボタンをクリックしてインストールを開始します。インストール中の進行状況が画面に表示されます。インストールが完了すると、画面に完了メッセージが表示されます。

4. スタートにピン留めとタスクバーに追加

初回に起動する時は、スタートボタンを押してから表示される画面で「VSCode」または「Visual Studio Code」と入力して検索するか、スタートボタンから「すべて　＞」と進み「Visual Studio Code」を探します。

次回から、もっと手早く起動できるように、「スタートにピン留めする」をクリックすることで、今後すぐにアクセスできるようになります。

僕はスタートにピン留めして、なおかつタスクバーにもピン留めしています。（スタート＞「Visual Studio Code」をみつけたら右クリックで「スタートにピン留め、「詳細」＞タスクバーにピン留め）

2. まずは絶対に「日本語化」しよう

インストールが終わってVS Codeを起動すると、おそらくメニューが全部英語のはず。これだけで「うっ…」と拒否反応が出てしまう人もいますよね。大丈夫、一瞬で日本語化できます。

画面左側にある、テトリスみたいな形のアイコン（拡張機能）をクリックします。
上部に出てくる検索ボックスに Japanese Language Pack と入力します。
一番上に出てくる「Japanese Language Pack for Visual Studio Code」の「Install」ボタンをクリックします。
インストールが終わると、右下に「Restart」ボタンが表示されるので、それをクリックしてVS Codeを再起動します。

たったこれだけで、すべてのメニューが日本語に！かなり親しみやすくなったんじゃないでしょうか。

3. これだけはやっておきたい！おすすめ初期設定

次に、より快適にVS Codeを使うための設定をいくつか行いましょう。設定は、左下の歯車アイコンから「設定」を選ぶか、ショートカットキー Ctrl + , (Macは Cmd + , ) で開けます。

自動保存 (Auto Save):
ファイルの保存は Ctrl + S で保存できますが、これを自動的に保存するようにも設定できます。設定画面の検索ボックスに auto save と入力し、ドロップダウンメニューから afterDelay を選びましょう。これで、入力後少し経つと自動で保存されるようになります。保存忘れによる悲劇が防げます。とはいえ、自分で保存したい人も多いので、これは好みで選ぶと良いです。僕は自分で保存したいので off にしています。
フォントサイズ (Font Size):
文字が小さいと目が疲れます。font size で検索し、自分が見やすい大きさに変更しましょう。僕は「14」に設定していますが「16」くらいにしている人が多いかな？実は Ctrlキーとマウスのスクロールボタンでも拡大縮小ができます。
テーマの変更 (Color Theme):
VS Codeは見た目も変えられます！ Ctrl + K + T (Macは Cmd + K Cmd + T) を押すと、テーマの一覧が出てきます。目に優しいダークテーマが人気ですが、色々試して自分の好きなデザインを見つけるのも楽しいですよ。僕はSolarized Lightを少しコントラストを強くカスタマイズした設定がお気に入りですね。こんな風にテーマの微調整もできます。（今回は解説しませんが、微調整は settings.json というファイルで行います。慣れてきたらチャレンジしてみましょう。）

—

4. ブログを書くために入れておきたい「拡張機能」

日本語化も拡張機能の一つでしたが、ブログを書く際の文章執筆に便利な拡張機能も入れておきましょう。
他にも最初に入れておくと便利なものをいくつかご紹介します。入れすぎは禁物ですが、これらは間違いなくあなたの作業を助けてくれますよ。

Markdown All in One:
このブログのようにMarkdownで文章を書く人には必須。プレビュー機能やショートカットが充実していて、執筆が捗ります。
Markdown PDF:
この拡張機能は、Markdown ファイルを pdf、html、png、または jpeg ファイルに変換してくれます。保存すると自動で変換するようにセッティングすることもできるようです。
Markdown Character Count:
よくある拡張機能だとMarkdownの構文も文字としてカウントされてしまうのに、この拡張機能は、Markdown構文を除いた、純粋な文字数だけをカウントして表示することができます。
Prettier – Code formatter:
書いたコードを、保存するたびに自動でキレイな形に整えてくれます。コードの見た目を気にする必要がなくなり、中身に集中できる。まさに神機能です。
Live Server:
HTMLファイルを保存すると、自動でブラウザがリロードされるようになります。Web制作をするなら必須の拡張機能。修正がリアルタイムで反映されるのは、感動的ですらあります。