VS Codeを使い始める初心者向け設定と便利な拡張機能

こんにちは、暮らしとお金のカフェへようこそ。

プログラミングを学び始めたり、副業でコードを書き始めたりするときに多くの方が選ぶエディタが**VS Code（Visual Studio Code）**です。Microsoft製で無料・多機能・軽快と三拍子揃っており、世界中のエンジニアが使っています。今回は初心者向けに最初の設定と便利な拡張機能を解説します。

VS Codeの基本情報とダウンロード

VS Code（Visual Studio Code）は無料のコードエディタです。Windows・Mac・Linux対応で、公式サイト（https://code.visualstudio.com/）からダウンロードできます。

PR・広告

シンレンタルサーバーでWebサービス・テックブログを開設

WordPressやWeb制作に使えるレンタルサーバー。対応機能と最新料金は公式で確認できます。

👉 シンレンタルサーバーの料金プランを見る

最初にやるべき3つの設定

設定1：日本語UIに変更する

1. 「Ctrl+Shift+X」（Mac：Cmd+Shift+X）で拡張機能を開く
2. 検索欄に「Japanese Language Pack」と入力
3. Microsoftが公開しているものをインストール→VS Codeを再起動

設定2：フォントサイズを調整する

1. 「Ctrl+,」（Mac：Cmd+,）で設定を開く
2. 「Font Size」で検索→好みの大きさに設定（14〜16が見やすい）

設定3：自動保存を有効にする

1. 設定→「Auto Save」を検索
2. 「afterDelay」または「onFocusChange」に設定

自動保存をオンにすることで「保存し忘れた」によるコードの消失を防げます。

入れておくべき拡張機能5選

1. Prettier（コード整形） コードのインデントや改行を自動で整形してくれます。チームで開発するときのコードスタイルの統一にも必須。

2. GitLens Gitの変更履歴をコード行単位で表示。「誰がいつこの行を変更したか」をすぐに確認できます。

3. Live Server HTMLファイルをブラウザでリアルタイムプレビューできます。HTMLを保存するたびにブラウザが自動更新されます。

4. Python（Microsoftが提供） Pythonを書くなら必須。コード補完・リンター・デバッグ機能が追加されます。

5. Markdown Preview Enhanced Markdownファイルをリアルタイムでプレビューできます。README・ブログ記事の執筆に便利。

覚えておくと効率が上がるショートカット10選

プログラミング学習・副業のスタート

VS Codeを使い始めたら、次のステップとして以下の学習リソースがおすすめです。

• HTML/CSS入門：まずはWebページの仕組みを学ぶ（Progate・ドットインストール）
• JavaScript：動きのあるWebページを作る
• Python：データ分析・業務自動化・AIツール開発に入門

まとめ

• VS CodeはMicrosoft製の無料エディタで、初心者からプロまで世界中で使われている
• 最初にやるべき設定は「日本語UI・フォントサイズ・自動保存」の3つ
• Prettier・GitLens・Live Server・Python・Markdown Preview Enhancedの5拡張機能を入れると快適になる
• ショートカットキーを10個覚えるだけで作業効率が大幅に上がる
• HTML/CSS→JavaScript→Pythonの順に学ぶとWebと自動化の両方をカバーできる

暮らしとお金のカフェでは、生活のあらゆる場面で役立つ情報をやさしくお届けしています。ぜひ他の記事もご覧ください。

あわせて読みたい・おすすめサービス