目次

VSCodeの導入方法は?画像を使って日本語化や基本的な設定まで。ダウンロード・インストールを解説

表紙

みなさんはプログラミング、していますか?

しているなら今使っているエディタ、使いずらくないですか?

自分に合っていないエディタだとコードを書くのがすごく遅くなってしまいます。

今回はおすすめの使いやすいエディタ、VSCodeの導入方法を解説します。

VSCodeではプログラミングだけでなく、JSON形式やXML形式のファイルの編集など、様々なところで使用できます。

ファイルの形式ごとにエディタを変える必要がないため、便利なものです。

VSCodeとは?

VSCodeとは、「Visual Studio Code」の略で、Microsoftが提供する無料のテキストエディタです。

軽くて高機能であり、拡張機能も充実しているため、愛用する方が多くいます。

VSCodeの特徴

VSCodeでは、次のようなことができます。

  • 自動でコードを色分けしてくれる。(シンタックスハイライト)
  • コードの自動補完
  • 沢山の拡張機能で自分に合うようにカスタマイズできる
  • コードを書くだけでなく、ビルド、デバッグ、実行など、エディタの域を超えたことができる。

VSCodeの特徴として、拡張機能があげられます。

拡張機能によって、スペルミスを防いだり、かっこの始めと終わりのペアを色分けしたりできます。

また、VSCodeはデフォルトでは日本語に非対応です。これも、拡張機能によって対応します。

VSCodeは高機能でいろいろなことができる反面、それによって覚える、慣れるのがほかのテキストエディタよりも難しいです。

ですが、利用者が多いのでインターネットで調べればすぐに情報が集まります

その時に必要な情報を少しづつ覚えていけばいいと思います。

VSCodeのダウンロード・インストール

では早速、VSCodeを導入していきましょう。

導入といっても、難しいことはありません。

VSCodeのダウンロード

まず初めに、ダウンロードからです。

以下のページにアクセスしてください。VSCodeの公式ページです。

アクセスすると、中央に青いボタンがあります。

WindowsPCなので①を押した後、「Windows x64」を選択して「Stable」の欄(②)をクリックしてください。

VSCode公式ページにアクセスした後、VSCodeインストーラーをダウンロードする際にクリックすべき場所。

しばらくするとダウンロードが完了した通知が来ると思います。

VSCodeのインストール

それではエクスプローラーを開いて(Winキー + E)、「ダウンロード」フォルダーを開いてください。

ダウンロードしたファイル、VSCodeUserSetup-x64-(バージョン).exeをダルクリックで起動してください。

ダウンロードしたVSCodeSetupファイルの保存先とそれの起動。

後は指示に従って進んでいきます。

インストーラーの進め方、手順。使用許諾契約書の同意

起動すると、初めに使用許諾の契約画面が出ます。ここで「同意」を選んで「次へ」を押します。

インストーラーの進め方、手順。追加タスクの選択。

この画面が出るまで「次へ」を押してください。画像の赤い四角に囲まれたチェックを全て入れてください。

インストーラーの進め方、手順。インストールの開始。

「インストール」を押すと、インストールが開始されます。

インストーラーの進め方、手順。インストール完了、およびインストーラーの終了。

インストールが完了すると、画面になります。「Visual Studio Codeを起動する」にチェックを入れたまま「完了」を押すと、VSCodeが自動的に起動します。


以上でVSCodeの導入は完了です。ですが、そのままでは日本語に対応していないので、日本語化をしていきます。

VSCodeの日本語化

画面左側にあるツールバーの一番下のマーク(①)をクリックしてください。

ここで開いた画面が拡張機能の追加画面です。拡張機能の追加は普段にここから行います。

クリックをしたら②の場所で「Japanese」と入力し検索してください。

VSCodeの拡張機能ページの開き方と拡張機能の検索。

次に検索結果から「Japanese Language Pack for Visual Studio Code」を選択し、「Install」をクリックする。

JapaneseLanguagePackの導入方法

しばらくするとインストールが完了し、右下に次のような通知が来ると思います。

「Change Language and Restart」をクリックして再起動をしてください。

日本語化のためのVSCodeの再起動

再起動した後、次のように日本語になっていれば、日本語化は完了です。

日本語化ができているかの確認。

拡張機能の追加画面が消えない場合は、ツールバーの拡張機能を追加するときに押すボタンをもう一度押すと消せます。

VSCodeの基本的な設定(ユーザー設定)

ユーザー設定では、その人その人が使いやすいように、文字の色やウィンドウの色などを設定できます。

自分好みにVSCodeを設定していきましょう。

まず、設定画面を開いてみましょう。

  • 画面左下の歯車マーク歯車マークをクリックしてください。
  • 次に「設定」ボタンをクリックします。

すると、次のような画面になると思います。赤い四角で囲まれた「ユーザー」を選択してください。

これがユーザー設定画面です。ここからいろいろな設定を変更できます。

設定画面

文字サイズ


  • 画面上部にある「設定の検索」に「Font Size」と入力して検索してください。
  • 「Editor: Font Size」を探してください。

画像の四角で囲まれた部分です。

フォントサイズの設定

数値をピクセル単位で編集してください。

私は12を使っています。(12はこれくらいの大きさです。)

空白文字の表示

デフォルトではスペースがある位置を確認しにくいです。

プログラムの文字列の末尾に空白が空いていると、意味がないのにプログラムの容量を取ってしまいます。

設定により、末尾の空白を可視化します。

  • 「設定の検索」から「Render Whitespace」と入力して検索してください。
  • 「Editor: Render Whitespace」の項目を「trailing」にする。
Render Whitespaceの効果

Emmet設定

Emmetを設定すると、プログラム、特にHTMLの記述を非常に効率化できます。

  • 「設定の検索」から「Trigger Expansion On Tab」を検索
  • 「Emmet: Trigger Expansion On Tab」を探して、項目をチェックする。
Emmetの設定

こんなふうに、一行書くだけでタグを簡単に記述できます。

emeet前

この文字列(左)を打ち込んだ後に「Tab」を押すと、展開されて自動で記述(右)される。

emmet後

まとめ

ここまでお疲れさまでした!

今回は、便利なテキストエディタ、Visual Studio Codeの導入方法について解説しました。

VSCodeは私も日常的に使っているエディタです。はじめは機能が多く、難しく感じるかもしれませんが、慣れれば最高のエディタです。

沢山使って覚えていきましょう!


よいプログラミングライフを!

でわでわ~

関連記事