\ Pinterest はじめました /

プログラミングにおすすめ!最適なエディタ「Visual Studio Code」のインストールと基本設定の方法【無料】

Visual Studio Code のインストールと基本設定プログラミング

フロントエンドエンジニアやバックエンドエンジニアの方々には、商売道具の一つにあたる「エディタ」は世の中にはたくさんの種類があります。

私自身プログラミングの学習を始めた時は、たくさんあるテキストエディタの中から「Sublime Text 3」を1年ぐらい愛用していました。

ですが、少し前に「たにぐちまことさん」という方の「Visual Studio Code入門(YouTube)」という動画に巡り合わしたのがきっかけで、テキストエディタを「Visual Studio Code」乗り換えました。

この記事を見てくれてる方がプログラミング初心者の方もベテランの方も、使い始めるきっかけになるように手順をご紹介していきたいと思います。

環境概要

この記事でご説明する方法は、以下のパソコンで進めた内容になります。
ご自身と環境が違うことで、挙動が変わる場合があります。

PCスペック
  • OS:Windows 10 Home 64 ビット
  • CPU:Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz (8 CPUs), ~2.0GHz
  • GPU:Intel(R) UHD Graphics 620
  • メモリー:16GB

手順概要

「Visual Studio Code」のインストールと基本設定する手順は以下になります。

  • Visual Studio Code 公式サイトからダウンロード
  • Visual Studio Code をインストール
  • Visual Studio Code の基本設定

という感じになります。では、進めていきましょう!

Visual Studio Code 公式サイトからダウンロード

まずは、「Visual Studio Code」をダウンロードしますので、以下から公式サイトに行きます。

公式サイトの中にある「Downlord for Windows」をクリックし、「Windows x64 User InstallerStable(安定版)」をクリックしダウンロードします。

もう片方の「Insiders」は、「Visual Studio Code」の新機能を利用した拡張機能をテストしたり、新機能をいち早くチェックしたい方向けのタイプになります。
今回は「Stable」を選択します。

保存場所を任意の場所を選択し、ダウンロードが終わると以下の図のようなインストーラーが置かれます。

この記事の執筆時は、バージョン「1.40.2」で、ファイルサイズもおよそ50MBと数十秒でダウンロードできました。

Visual Stadio Code をインストール

インストーラーをクリックし起動してセットアップを開始します。

使用許可契約書の同意が表示されますので、内容を確認し「同意する」にチェックを入れ「次へ」ボタンをクリックします。

インストール先の指定になります。
基本的にデフォルトの指定された場所のままでよいと思いますので、変更しない場合は「次へ」ボタンをクリックします。変更したい場合は、「参照」ボタンをクリックし任意の場所を指定して「次へ」のボタンをクリックします。

プログラムグループの指定になりますが、特別必要ないのでチェックは不要です。
プログラムのショートカットキーもデフォルトで指定されたままでいいと思いますので、「次へ」ボタンをクリックします。もし、変更したい場合は「参照」を選択して任意に指定していただければと思います。

追加タスクの選択にります。

初期では、「PATHへの追加(再起動後に使用可能)」のみにチェックが入っている状態ですが、全てチェックした状態の方が利便性がいいので、チェック入れて「次へ」ボタンをクリックします。

最後に、これまで選択した内容が一覧で表示されます。

修正する場合は「戻る」ボタンで戻って修正してください。選択内容で大丈夫であれば。「インストール」ボタンをクリックし、インストールを開始します。

インストールが開始されると以下の図のように表示されます。インストールもめちゃめちゃはやくて数十秒程度で完了します。

Visual Studio Code」のインストールが完了すると以下の図のように表示されます。
この次に基本設定を進めますので、「Visual Studio Codeを実行する」にチェックを入れた状態で「完了」ボタンを押して起動させましょう。

起動すると以下の画面が表示されます。

実際の画面は「ブラックカラー」ベースになっていると思います。あとでご紹介しますが、説明のために配色テーマを変更しています。

Visual Stadio Code の基本設定

Japanese Language Pack for Visual Studio Code で日本語化する

英語で使用したい方はこちらは飛ばしてください。
英語は見た目がカッコイイけど、日本人なので日本語にします。(笑)

日本語化は「拡張機能」を利用します。

まず、以下の図のように「アクティビティーバー」の「Extensionsアイコン」をクリック、またはキーボードの shift + ctrl + X を押します。

そうすると、「サイドバー」が表示されますので、トップにある入力欄に「japanese」と入力すると、そのキーワードにヒットした拡張機能が一覧で表示されます。

以下の図のように、ヒットした最初の「Japanese Language Pack for Visual Studio Code」の「install」ボタンをクリックし、インストールします。

インストールが完了すると、「⚙アイコン」表示や青色の「Uninstall」ボタン表示されたことで見分けれます。

インストールしただけでは日本語化されませんので、少し設定が必要になります。

まず、キーボードの ctrl+Shift+P で「コマンドパレット」を表示させ、入力欄に「config language」と入力すると該当する項目に絞り込まれ、その中「Configure Display Language」をクリックします。

そうすると、以下の図のように表示されますので「ja」をクリックします。

翻訳すると「表示言語の変更を有効にするには再起動が必要です」とのことなので、「Restart」ボタンをクリックし、「Visual Studio Code」を再起動させます。

再起動すると、以下の図のように日本語化が有効になります。

英語表示に戻す場合は、コマンドパレットを開き「config language」と入力し、「en」を選択すればOKです。

配色テーマ(エディタのカラー)を変更する

まず、キーボードの ctrl+Shift+P で「コマンドパレット」を表示させ、入力欄に「theme」と入力すると該当する項目に絞り込まれ、その中「基本設定:配色テーマ[Preferences:Color Theme]」をクリックします。

デフォルトで約10種類ぐらいの配色テーマが選ぶことができます。

十字キーの で配色テーマを切り替えることで、カラーリングの確認ができます。
変更する配色テーマをクリックすることで反映されます。

参考として以下の図は、Dark(Visual Studio Code)の配色テーマを選んだ時のカラーリングになります。

フォルダやファイルのアイコンを変更する

まず、キーボードの ctrl+Shift+P で「コマンドパレット」を表示させ、入力欄に「theme」と入力すると該当する項目に絞り込まれ、その中「基本設定:ファイル アイコンテーマ[Preferences:File Icon Theme]」をクリックします。

以下の図は、デフォルトのアイコンテーマになります。

こちらも配色テーマと同様にデフォルトでアイコンテーマが入っていますが、2つだけとちょっと寂しいですね。適応させるアイコンテーマをクリックすると反映されます。

以下の図は、「Minimal(Visual Studio Code)」を選択した場合のアイコンになります。

配色テーマもアイコンテーマもですが、他にもたくさんの種類があり、以下の図のように「その他のファイルやアイコンテーマをインストール…」をクリックすることでも、サイドバーにたくさん表示されます。

自分の好きなテーマを選んでカラーやアイコンをカスタマイズするとプログラミングも快適にできると思います。

まとめ

インストールしたばかりだと、分からないことがたくさんあると思いますが、拡張機能もかなりありますので、自分のプログラミング環境にベストなものを見つけて、どんどん使いやすくしていきましょうあ。

また便利な拡張機能など基本設定として導入していた方が良いのがあれば追加していきます。

では、お疲れさまでした!

ブログを始める人におすすめのレンタルサーバー!

ブログを始めようとお考えの人向けに、おトクなキャンペーン中のレンタルサーバーをご紹介します!

ConoHa WING(コノハウィング)

キャンペーン中!

ConoHa WINGでは2021年8月4日(水)18時~2021年9月13日(月)18時まで、「Happy Summer キャンペーン」を開催いたします。キャンペーン期間中、WINGパック「ベーシックプラン」を新規でお申し込みいただくと、ConoHa WING通常料金から最大40%OFF、月額792円からWINGパックをご利用いただけます。

さらに、初期費用無料で、初回お申込み月はご利用料金無料なので月初のお申込みで、最大31日間無料でご利用いただく事ができます!

また、WINGパックはレンタルサーバーと独自ドメインがセットになったおトクな長期利用割引プランです。お好きなレンタルサーバープランと独自ドメインが2つ永久無料でご利用いただけます。

詳細は、以下のリンクからご確認ください。
⇒Happy Summer キャンペーン!

Xserver(エックスサーバー)

キャンペーン中!

国内シェアNo1レンタルサーバー「エックスサーバー」では、2021年9月9日(木)18時まで利用料金20%OFFキャンペーン」とお得なキャンペーンを開催中です!

キャンペーン期間中に、新規でX10プランの12ヶ月契約なら月額880円(税込)!36ヶ月契約なら月額792円(税込)で利用可能です!

さらに、「.com」や「.net」など大人気独自ドメインが永久無料!

キャンペーンの詳細は、以下のリンクからご確認ください。
利用料金20%OFFキャンペーン!

ロリポップ!

実質半額!『契約期間2倍延長キャンペーン』!

ロリポップでは、2021年9月7日(火)11:00〜2021年9月20日(月)23:59までのキャンペーン期間、レンタルサーバーの対象プランが実質半額となる『契約期間2倍延長キャンペーン』を開催しております。

キャンペーン期間中に、対象プランの新規お申し込みをいただき、その後にご契約いただくと、契約期間を2倍に延長するクーポンをプレゼントいたします。

たとえば、ハイスピードプランの12ヵ月を契約した場合、クーポンのご利用で12ヵ月の契約がプラスされるので、12ヵ月分の料金お支払いで24ヵ月利用が可能になり、6,700円以上おトクになります。

ロリポップ!で契約するなら今が断然おトクに始められます!

サービスの詳細は、以下のリンクからご確認ください。
実質半額!『契約期間2倍延長キャンペーン』!

ロリポップ!『ドメインずーっと無料』!

『ムームードメイン』の対象ドメインと、『ロリポップ!』のレンタルサーバーの両方を新規でご契約いただく場合、レンタルサーバーをご契約中はドメインを無料でご利用いただける『ドメインずっと無料』の提供を開始しました。

ロリポップ!でレンタルサーバーを契約期間中はずっと無料でドメインを利用することができます。

サービスの詳細は、以下のリンクからご確認ください。
⇒ドメインの新規取得・更新が無料になるサービス『ドメインずっと無料』

ボクがおすすめするレンタルサーバーの特徴や違い、選び方など知りたい方は、WordPressに最適なレンタルサーバーの選び方とおすすめサービス比較!の記事に詳しく解説してますのでご覧になってください!

プログラミング
スポンサーリンク
otsuをフォローする
スマライログ
タイトルとURLをコピーしました