はいさい!カラフルスクールブログへようこそ!🎨✨
「課題終わらない…」「バイト疲れた…」「プログラミング難しすぎ…」
大学生あるあるですよね!😭 特に、プログラミング学習って、環境構築からつまづく人も多いはず。
「せっかくやる気になったのに、セットアップで心が折れた…」なんて経験、ありませんか?
実は…!大学生の約7割が、プログラミング学習の初期段階で環境構築に苦戦しているというデータがあるんです!(カラフルスクール調べ)
でも大丈夫!この記事では、最強のテキストエディタ「Visual Studio Code」(通称: VS Code)を爆速で使いこなすためのカスタマイズ術を、ステップバイステップで紹介します!🚀
今回の記事を読めば、VS Codeがあなただけの秘密基地に大変身!
効率爆上がり間違いなし!😎
※この記事にはPRが含まれます
さあ、レッツカスタマイズ!💻🎉
VS Codeって何?なんで最強なの?
VS Codeは、Microsoftが開発している無料のテキストエディタ。プログラミングに必要な機能が盛りだくさんで、世界中のプログラマーに愛用されています!

VS Codeが最強な理由3選
- 無料なのに高性能: 拡張機能が豊富で、自分に必要な機能を自由に追加できる!
- 動作が軽い: サクサク動くから、ストレスフリーでコーディングできる!
- コミュニティが活発: 困ったことがあっても、ググれば大体解決する!
他のテキストエディタを使ったことがある人も、VS Codeの使いやすさにきっと驚くはず!
【STEP 1】まずはインストール!
まずはVS Codeをインストールしましょう!公式サイトから自分のOSに合ったものをダウンロードして、インストールするだけ!
ダウンロード&インストール方法
- VS Code公式サイトにアクセス!
- 「Download for ○○」ボタンをクリック!(○○はあなたのOS)
- ダウンロードしたファイルを実行して、指示に従ってインストール!
インストールが終わったら、VS Codeを起動してみましょう!🎉
【STEP 2】爆速効率化!おすすめ拡張機能5選
VS Codeの真骨頂は、拡張機能!ここでは、大学生におすすめの爆速効率化に繋がる拡張機能を5つ紹介します!

① Japanese Language Pack for VS Code
VS Codeのメニューやメッセージを日本語化できる拡張機能。英語が苦手な人でも安心!
② Prettier – Code formatter
コードを自動で整形してくれる拡張機能。インデントやスペースなどを自動で調整してくれるので、可読性が爆上がり!チーム開発にも必須!
例えば、ぐちゃぐちゃだったJavaScriptのコードが、Prettierを使うと一瞬でキレイに!
③ Auto Rename Tag
HTMLのタグ名を変更すると、自動でペアのタグ名も変更してくれる拡張機能。閉じタグの修正漏れを防げる!
「<div>」を「<section>」に変更すると、閉じタグ「</div>」も自動で「</section>」に変更されます。
④ Bracket Pair Colorizer 2
対応する括弧を色分けしてくれる拡張機能。ネストが深いコードでも、どこからどこまでが対応している括弧なのか一目でわかる!
⑤ Live Server
HTMLファイルを編集すると、自動でブラウザをリロードしてくれる拡張機能。Webサイトの表示確認が爆速に!
HTMLファイルを保存するたびに、ブラウザを手動でリロードする必要がなくなります。
拡張機能のインストール方法
- VS Codeの左側にあるアイコンをクリックして、拡張機能ビューを開く。
- 検索ボックスに拡張機能名を入力して検索。
- 「インストール」ボタンをクリック!
これだけでOK!簡単ですね!✨
【STEP 3】テーマを設定して、モチベーションUP!
VS Codeのテーマを変更すると、見た目がガラッと変わります。自分好みのテーマを見つけて、モチベーションを上げちゃいましょう!
おすすめテーマ3選
- Dracula: ダークで落ち着いた雰囲気のテーマ。目に優しい!
- One Dark Pro: こちらもダーク系の人気テーマ。スタイリッシュ!
- Atom One Light: 明るく爽やかな雰囲気のテーマ。気分転換に!
テーマの変更方法
- VS Codeのメニューから「ファイル」→「設定」→「テーマ」→「カラ―テーマ」を選択。
- 好きなテーマを選択!
色々なテーマを試して、自分にぴったりのテーマを見つけてくださいね!🌈
【STEP 4】ショートカットキーを覚えて、さらに爆速化!
VS Codeには、便利なショートカットキーがたくさんあります。ショートカットキーを使いこなすと、マウス操作の回数が減り、作業効率が格段にアップ!
覚えておきたい基本ショートカットキー5選
- Ctrl + S (Command + S): ファイルを保存
- Ctrl + Z (Command + Z): 元に戻す
- Ctrl + Y (Command + Y): やり直す
- Ctrl + F (Command + F): 検索
- Ctrl + H (Command + H): 置換
最初は覚えるのが大変かもしれませんが、少しずつ慣れていきましょう!
例えば、レポート作成中に誤って削除してしまった文章も、「Ctrl + Z」ですぐに元に戻せます!
まとめ:VS Codeを使いこなして、プログラミングをエンジョイしよう!
今回の記事では、VS Codeを爆速で使いこなすためのカスタマイズ術を紹介しました!
- VS Codeをインストール
- おすすめ拡張機能をインストール
- テーマを設定
- ショートカットキーを覚える
VS Codeを自分好みにカスタマイズして、プログラミング学習をもっと楽しく、もっと効率的に進めていきましょう!🚀
これからもカラフルスクールでは、大学生向けの役立つ情報を発信していきます!
お楽しみに!👋