
「全部英語で、どこを触ればいいか分からない…」
「もっとプログラミングしやすくなる、おすすめの設定や拡張機能が知りたい!」
プログラミング学習の冒険に出る決意を固め、最強の武器である「VS Code」を手に入れたあなた。おめでとうございます!その一歩は、非常に大きな前進です。
しかし、手に入れたばかりの剣は、まだ鞘に収まったまま。その真の力を引き出すには、あなたの手に馴染むように、いくつかの**「初期設定」**を施す必要があります。
この記事では、プログラミング初心者の方が、「VS Code、なんだか使いにくいな…」と挫折してしまうことがないように、「これだけは、絶対に最初にやっておくべき!」という、必須の設定と、おすすめの拡張機能を5つに厳選して、どこよりも分かりやすく、ステップ・バイ-ステップで解説していきます。
少しの手間をかけるだけで、あなたのVS Codeは、ただの「エディタ」から、思考を加速させる「最高の相棒」へと進化します。
-
なぜ、その設定が必要なのか?
-
具体的な設定方法
設定1:【最優先】まずは、すべてを日本語化しよう!
インストールしたてのVS Codeは、メニューやコマンドがすべて英語です。
プログラミングの学習に集中するためにも、まず最初に、インターフェースを完全に日本語化してしまいましょう。
別の記事で画像付きで詳しく解説している記事があるので、ここでは簡単に概要レベルでの説明とします。
「プログラミングを始めたいけど、どのエディタを使えばいいの?」「Visual Studio Code(VS Code)が人気らしいけど、インストールが難しそう…」「インストールしたけど、全部英語でよくわからない!」  […]
なぜ必要か?
エラーメッセージや設定項目が日本語になるだけで、ツールの理解度と、問題解決のスピードが、劇的に向上します。英語に慣れるのは、もっと後からで大丈夫です。
設定方法
-
拡張機能ビューを開く
-
画面左側のアクティビティバー(アイコンが縦に並んだバー)から、**四角いブロックが4つ並んだような「拡張機能(Extensions)」**アイコンをクリックします。(ショートカット: Ctrl+Shift+X / Cmd+Shift+X)
-
-
日本語化パックを検索・インストール
-
上部に表示された検索ボックスに、**Japanese Language Pack**と入力します。
-
検索結果に出てくる「Japanese Language Pack for Visual Studio Code」の、青い「Install」ボタンをクリックします。
-
-
VS Codeを再起動
-
インストールが完了すると、画面の右下に「Change Language and Restart」というボタンが表示されます。これをクリックして、VS Codeを再起動してください。
-
設定2:コードの保存忘れを防ぐ!「自動保存」を有効にしよう
プログラミング初心者が、本当によくやってしまうミス。それが**「コードを書いたのに、保存(Ctrl+S / Cmd+S)し忘れて、実行したら古いコードが動いてしまい、パニックになる」**というものです。
この悲劇を、未来永劫なくすための、魔法の設定。それが「自動保存」です。
なぜ必要か?
保存忘れによる、無駄なエラー探しや、混乱を防ぐことができます。
一度設定すれば、あなたはもう「保存」という行為を、意識する必要がなくなります。
設定方法
-
設定画面を開く
-
メニューバーから「ファイル」→「ユーザー設定」→「設定」を選択します。
-
または、ショートカット Ctrl+, (Windows) / Cmd+, (Mac) でも開けます。
-
-
「auto save」で検索
-
上部の検索ボックスに、**auto save**と入力します。
-
-
設定を変更する
-
「Files: Auto Save」という項目が見つかります。
-
デフォルトでは「off」になっている、このドロップダウンリストをクリックし、**「afterDelay」**に変更します。
-
すぐ下に表示される「Files: Auto Save Delay」の数値が、自動保存されるまでの時間(ミリ秒)です。デフォルトの「1000」(=1秒)のままで、十分快適です。
-
設定3:【神拡張】コードを自動で綺麗に!「Prettier」を導入しよう
プログラミングにおいて、「コードの見た目(フォーマット)」を、読みやすく、綺麗に保つことは、非常に重要です。
インデント(字下げ)がガタガタだったり、スペースの使い方がバラバラだったりするコードは、バグの温床になります。
なぜ必要か?
コードの見た目に関する、一切の悩みから解放されます。誰が書いても、常に統一された、美しいコードが生まれるため、コードの可読性が飛躍的に向上し、チーム開発でも絶大な威力を発揮します。
設定方法
-
拡張機能をインストール
-
拡張機能ビューで**Prettier – Code formatter**と検索し、インストールします。
-
-
デフォルトフォーマッターに設定
-
設定画面(Ctrl+,)を開き、検索ボックスに**default formatter**と入力します。
-
「Editor: Default Formatter」の項目で、ドロップダウンリストから**「Prettier – Code formatter」**を選択します。
-
-
保存時にフォーマットする設定
-
設定画面の検索ボックスに**format on save**と入力します。
-
**「Editor: Format On Save」**という項目に、チェックを入れます。
-
設定4:【HTML/CSS学習者向け】ブラウザリロードを自動化!「Live Server」
HTMLやCSSを学習しているとき、「コードを修正 → 保存 → ブラウザに切り替え → リロードボタンを押す」という作業を、一日に何百回も繰り返すことになります。
この、地味で面倒な「リロード作業」を、完全に自動化してくれるのがLive Serverです。
なぜ必要か?
コードを保存した瞬間に、ブラウザの表示が、自動で、瞬時に更新されるようになります。
コーディングの結果を、リアルタイムで確認できるため、開発効率と学習効率が、爆発的に向上します。
設定方法
-
拡張機能をインストール
-
拡張機能ビューで**Live Server**と検索し、インストールします。
-
-
Live Serverを起動する
-
HTMLファイルを開いている状態で、VS Codeの右下にあるステータスバーに、**「Go Live」**というボタンが新しく表示されています。これをクリックするだけです。
-
自動的に、既定のブラウザが立ち上がり、あなたのHTMLファイルが表示されます。
-
-
自動リロードを体験する
-
VS Codeで、HTMLの文字を何か修正して、保存してみてください。
-
ブラウザに切り替える必要はありません。修正が、瞬時にブラウザの表示に反映されるはずです。
-
設定5:一目でわかる!ファイルアイコンのテーマを変更しよう
VS Codeのデフォルトのエクスプローラービューは、少しシンプルで、ファイルの種類が見分けにくい、と感じるかもしれません。
ファイルアイコンのテーマを変更するだけで、見た目が華やかになるだけでなく、ファイルの種類が一目でわかるようになり、作業効率が向上します。
なぜ必要か?
index.html style.css script.js といったファイルが、それぞれHTML5、CSS3、JSの美しいアイコンで表示されるようになります。
視覚的にファイルを探しやすくなり、何より、コーディングのモチベーションが上がります!
設定方法
-
ファイルアイコンテーマの設定画面を開く
-
メニューバーから「ファイル」→「ユーザー設定」→「テーマ」→「ファイル アイコンのテーマ」を選択します。
-
-
テーマを選択、または追加する
-
デフォルトでもいくつかの選択肢がありますが、おすすめは、追加で人気のテーマをインストールすることです。
-
コマンドパレットで、「追加のファイルアイコンテーマをインストール」を選択します。
-
拡張機能ビューが開くので、**Material Icon Themeやvscode-icons**といった、人気のアイコンテーマをインストールします。
-
インストール後、再度「ファイル アイコンのテーマ」を選択する画面に戻り、インストールしたテーマを選択すれば、設定完了です。
-
まとめ
VS Codeは、インストールしただけの「素の状態」でも、十分に強力なエディタです。
しかし、今回紹介した、たった5つの初期設定を行うだけで、その戦闘力は、何倍にも跳ね上がります。
-
日本語化:すべての基本。迷わず最初にやる。
-
自動保存:保存忘れという、初心者のミスを撲滅する。
-
Prettier:コードの見た目を、常に完璧に保つ、あなたの執事。
-
Live Server:HTML/CSSの学習効率を、2倍速にするタイムマシン。
-
アイコンテーマ:日々のコーディングを、少しだけ楽しくする、ささやかな彩り。
これらの設定は、一度やってしまえば、ずっとあなたの開発を助け続けてくれる、最高の「自己投資」です。
快適な開発環境は、プログラミング学習を継続するための、最も重要な土台となります。
「プログラミングを勉強したスキルを、お金に変えてみたい!」「副業で、まずは月3万円くらい稼げたら嬉しいな…」「クラウドソーシングって、本当に初心者でも稼げるの?」 プログラミング学習の先に、多くの人が思い描くのが「自分の力[…]