【入門編】Visual Studio Code 基礎知識・使い方

こんにちは！
プログラミングをしている人の多くが使用しているテキストエディタ「Visual Studio Code 」
「Visual Studio Code って何・・？」「なぜ多くの人が使っているの・・？」「使い方は・・？」「どんな便利な機能があるの・・？」「使ってみたけどいまいち良くわからない・・！」そんな風に考えている方も多いのではないでしょうか？

今回はそんな方向けにVisual Studio Code入門編として「Visual Studio Codeとは」「基礎知識」「インストール方法」「使い方」「便利機能」について幅広く解説していきます。

Visual Studio Codeとは？

Visual Studio Code(VSCode)とは、マイクロソフト社が無料で提供しているテキストエディタの事であり、世界中のエンジニアの中でも利用者の多い人気ソフトです。

VSCodeが人気のある理由として5点があがられます。

1.オープンソースであり、誰でも無償で利用する事ができる。

2.Windows版・macOS版・Linux版と各OSに対応している。

3.多くの言語に対応している（英語、日本語、フランス語、ドイツ語、中国語、ロシア語）などその他、各国の言語に対応している。

4.拡張機能が豊富（デバック機能、コード補完、ソースコードのシンタックスハイライトなど）

5.軽量で早く動く（余計な機能は最初から省かれているので、ストレスなく動く）

Visual Studio Code入手・インストール方法

Visual Studio Code入手方法

Visual Studio Codeの入手はVisual Studio Code　公式サイトダウンロードページにアクセスします。
Visual Studio Code　公式ダウンロードページ
https://code.visualstudio.com/Download

Visual Studio Codeインストール方法

今回は、Mac版で進めます。
macOS版をクリック

Visual Studio Codeダウンロード開始

ダウンロードが開始されます、ダウンロードが終わるまで少し待ち。
ダウンロードデータは、ダウンロードフォルダにあります。

ダウンロードされたzipファイル（圧縮ファイル）をダブルクリックで展開。
Visual Studio Codeが現れます。

ここでわかりやすいように、アプリケーションフォルダに、移動させましょう。

起動方法

アイコンをダブルクリックし「開く」を押し、下記表が出てきたら。
開くをクリック

Visual Studio Codeを起動します。
これでVisual Studio Codeコードが使えるようになりました。

vs codeの画面の見方

VSCodeの画面は、下記のような画面構成になっています。

①.アクティビティバー
VSCodeで主に使用されている機能をアイコンで表示しています。
1-1エクスプローラー：開いているファイルを一覧表示
1-2検索：ファイル内を検索
1-3git：gitとの連携
1-4デバック：デバックを行う
1-5拡張機能：拡張機能の検索
1-6アカウント：設定の同期を指定
1-7設定：設定を行う

②.サイドバー
アクティビティバーでエクスプローラーが選択されている場合は、フォルダやファイル一覧、もしくはアクティビティバーで選択された項目が表示される。

③.エディタ
開いているファイルの内容を表示します。

④.パネル
ターミナルや、デバック情報が表示されます。

⑤.ステータスバー
文字コードなど、ファイルのステータスに関する情報を表示します。

ミニマップ

ミニマップとは、エディタの右側に表示されるコードアウトラインの事です。
ソースコードの概要を表示し、ミニマップ部をクリックすると該当箇所にすばやく移動する事ができます。

パンくずリスト

パンくずリストとは、エディター上部に表示されている、ナビゲーションバーです。フォルダ、ファイル、シンボルをクリックすれば該当箇所にすばやく移動する事ができます。

日本語表示にする

Visual Studio Codeは、インストールした時は英語表記になっています。
まずは日本語表示にします。日本語表示するには5ステップ。

1.【Command Palette】を開く
2.【Configure Display Language 】を入力
3.【Install additional languages 】を入力
4.【Japanese Language Pack for Visual Studio Code 】をインストール
5.【Visual Studio Code】を再起動
一つ一つ見ていきましょう。

1ステップ【Command Palette】を開く
画面上部のメニューバー、「view」をクリック→「Command Palette」を開きます。

2ステップ【Configure Display Language 】をクリック
コマンドパレットが開くので、「Configure Display Language 」を選択、クリックします。

3ステップ【Install additional languages 】をクリック
「Install additional languages 」をクリックします。

4ステップ【Japanese Language Pack for Visual Studio Code 】入力
画面左側に、インストール可能な言語パッケージが並びますので、
「Japanese Language Pack for Visual Studio Code 】」をクリック
みつからない場合は、「japanese」などでキーワード検索

5ステップ【Visual Studio Code】を再起動
言語パッケージをインストールした後は、Visual Studio Codeの再起動が必要になります。
右下にリスタートを促すメッセージ「Restart」をクリックしリスタートしてください。

リスタートすると、以下のように日本語で表示されるようになります。

これでVisual Studio Codeが日本語設定で使用できるようになりました。

フォルダの開き方/作り方

フォルダの開き方

フォルダをVSCodeドラックアンドドロップするとフォルダを開く事ができます。

ファイルの作り方

ファイル作成ボタンを押し→ファイル名を付け→エンター→ファイルを作成する事ができます。

エディタの分割

分割マークを押すとエディタを分割する事ができます。

また「表示」→「エディタレイアウト」→エディタの分割場所を指定することもできます。

便利機能

検索

VSCodeには便利な検索機能があります。
例えば下記ファイルから「テキスト5」という文字を検索したい。

まずは、検索バーを出します。
検索バーを出すには、VSCode上でショートカットキー、
「windows:[Ctrl] + 【F】」「mac:[Cmd] + 【F】」を入力し検索バーを出します。

検索バーに「テキスト5」と入力すると、該当の「テキスト5」がハイライトされます。コードの量が多くなってくるとより便利に活用する事ができます。

置換

置換をするには、まずは検索バーを出します。
ショートカットキー、「windows:[Ctrl] + 【F】」「mac:[Cmd] + 【F】」を入力し検索バーを出します。
置換したい文字やアルファベット、記号を入力。
今回は「p」を記載。

「>」ボタンを押す→置換バーを出す→「置換したいワードを入力」→今回は「p」と記載しpに置換→「全て置換」のマークを押して置換。
下記のように変更されています。

インテリセンス

VSCodeには予測補完機能が付いています。
途中まで入力すると変換候補を出してくれ、全て記述しなくても良くなります。

マルチカーソル

マルチカーソルとは、カーソルを複数選択し同時編集できる機能です。

Emmet

EmmetとはHTML/CSSのコード入力を補完してくれる機能であり、少ない記述でHTML/CSSを記述する事ができるので、大幅に作業を削減してくれます。

例えば「！」と記述しTabを押すと、下記のようにHTMLの雛形を表示してくれます。

クラス名をつけた表示、imgタグの表示なども簡単に行ってくれます。

Emmet CSS記述

CSSでもEmmetの記述をする事ができます。
例えばCSSファイルに「m10」と記載し「tab」を押すと下記のように「margin: 10px;」と表示する事ができます。

「p10」なら「padding: 10px;」、「w20」なら「width: 20px;」と表示する事ができます。

コマンドパレット

VSCodeの機能にアクセスするためのもので、VSCodeの機能にアクセスするには「コマンドパレット」を介してアクセスをします。

「コマンドパレット」の開き方は、「表示」→「コマンドパレット」をクリックか、
ショートカットキーwin:「Shift」+「Ctrl」+「P」、mac:「Shift」+「Cmd」+「P」で開く事ができます。
VSCode内の機能を表示できます。

コマンドパレットからエディタの背景色を変える

ショートカットキーwin:「Shift」+「Ctrl」+「P」、mac:「Shift」+「Cmd」+「P」でコマンドパレット開く。
コマンドパレットに「theme」を入力「基本設定：背景色テーマ」を選択。
好きな背景色を選択しクリック、背景色を変更する事ができます。

コマンドパレットからミニマップ表示切り替え

ショートカットキーwin:「Shift」+「Ctrl」+「P」、mac:「Shift」+「Cmd」+「P」でコマンドパレット開く。
コマンドパレットに「minimap」を入力→「表示：ミニマップの切り替え」を押しミニマップの表示の切り替えをする事ができます。

設定

vscodeの設定は2通りあります。
①.GUIでの設定
②.settings.jsonでの設定

①.GUIでの設定

設定画面を開きます
「code」→「基本設定」→「設定」

例えばフォントサイズの設定であれば、検索バーに「font」などのキーワードをいれ、変更したい項目（今回であれば「Editor: Font Size」）を探し、数値を変更する事で設定を変更する事ができます。

※変更したい項目をインターネット検索すれば、項目にあったキーワードが出てきます。

②.settings.jsonでの設定

settings.jsonとはvscodeの設定内容を記載するファイルです。
settings.jsonを開きます。

「code」→「基本設定」→「設定」設定が画面を出し

settings.jsonを開くマークをクリック

settings.jsonファイルに定められた記述を記載することで、vscodeの設定を行う事ができます。

VSCode内でターミナルを開く

VSCode内でターミナルを開く事ができるので、テキストエディタとは別にターミナルを開く必要がなくなり、「作業効率」「見やすさ」の面で便利です。

VSCode内でターミナルを開くには、「ターミナル」→「新しいターミナル」をクリック

ショートカットキーが豊富

VSCodeは、マウスを使ってほとんどの操作が行えます、
しかし操作速度を上げ効率的な操作を行う為には、ショートカットーキーが欠かせません。
VSCodeには便利なショートカットキーが豊富に用意されています。

基本操作編

キー	動作	コマンドID
mac:Cmd + X win:Ctrl + X	行の切り取り（未選択時）	editor.action.clipboardCutAction
mac:Cmd + C win: Ctrl + C	行のコピー（未選択)	editor.action.clipboardCopyAction
mac:↑ + ⌘ + K win: Ctrl+Shift+K	カーソル行削除	editor.action.deleteLines
mac:Cmd + Enter win:Ctrl+Enter	下に行追加	editor.action.insertLineAfter
mac:↑+Cmd+Enter win:Ctrl+Shift+Enter	上に行追加	editor.action.insertLineBefore
mac:option+↓ win:Alt+Down	カーソル行を下に移動	editor.action.moveLinesDownAction
mac:option+↑ win:Alt+Up	カーソル行を上に移動	editor.action.moveLinesUpAction
mac:↑+option+↓ win:Shift+Alt+Down	カーソル行を下にコピー	editor.action.copyLinesDownAction
mac:↑+option+↑ win:Shift+Alt+Up	カーソル行を上にコピー	editor.action.copyLinesUpAction
mac:Home win:Home	行の先頭に移動	cursorHome
mac:End win:End	行の末尾に移動	cursorEnd
mac:Cmd+↓ win:Ctrl+End	ファイルの末尾に移動	cursorBottom
mac:Cmd+↑ win:Ctrl+Home	ファイルの先頭に移動	cursorTop

エディター操作編

キー	動作	コマンドID
mac:↑+Cmd+N win:Ctrl+Shift + N	新しいウィンドウを開く	workbench.action.newWindow
mac: ↑+Cmd+W win:Ctrl+Shift+W	ウィンドウを閉じる	workbench.action.closeWindow
mac:Cmd+W win:Ctrl+W	エディターを閉じる	workbench.action.closeActiveEditor
mac:Cmd+ K F win:Ctrl+K F	フォルダーを閉じる	workbench.action.closeFolder
mac:Cmd + \ win:Ctrl + \	エディターを分割する	workbench.action.splitEditor

ファイル操作編

キー	動作	コマンドID
mac: Cmd+N win:Ctrl+N	新しいファイル	workbench.action.files.newUntitledFile
mac:Cmd+O win:Ctrl+O	ファイルを開く	workbench.action.files.openFile
mac:Cmd+S win:Ctrl+S	保存	workbench.action.files.save
mac:↑+Cmd+S win:Ctrl+Shift+S	名前を付けて保存	workbench.action.files.saveAs
mac:Cmd+ K W win:Ctrl+W	ファイルを閉じる	workbench.files.action.closeFile
mac:Cmd + K 、 Cmd + W win: Ctrl+K Ctrl+W	すべてのファイルを閉じる	workbench.files.action.closeAllFiles

画面表示編

キー	動作	コマンドID
mac:^ + Cmd +F win: F11	フルスクリーン表示のトグル	workbench.action.toggleFullScreen
mac:↑+Cmd+= win:Ctrl+Shift+=	ズームイン	workbench.action.zoomIn
mac:Cmd+- win: Ctrl+Shift+-	ズームアウト
mac:Cmd+B win:Ctrl+B	サイドバー表示のトグル	workbench.action.toggleSidebarVisibility
mac: ↑+Cmd+E win: Ctrl+Shift+E	エクスプローラーの表示	workbench.view.explorer
mac:↑ + Cmd + F win:Ctrl+Shift+F	検索画面の表示	workbench.view.search

検索・置換編

キー	動作	コマンドID
mac:Cmd+F win: Ctrl+F	検索	actions.find
mac:Cmd+Option+F win:Ctrl+H	置換	editor.action.startFindReplaceAction
mac:Cmd+G win:F3	次を検索	editor.action.nextMatchFindAction
mac:Cmd+↑+G win:Shift+F3	前を検索	editor.action.previousMatchFindAction

拡張機能が豊富

拡張機能とは、後付けで追加できる便利な機能のことです。
自分の好みで、欲しい拡張機能を追加し、使いやすいようにオリジナルにカスタマイズする事ができます。
VSCodeはこの拡張機能が豊富にあります。
拡張機能の追加方法、オススメの拡張機能を紹介します。

vscode 拡張機能の追加方法

拡張機能ボタンを押し→検索バーに追加したい拡張機能名を記述→インストールボタンを押すこれで拡張機能を追加する事ができます。
※拡張機能によってはインストール後に追加設定するものもあります。

オススメ拡張機能

zenkaku

全角スペースを把握
コードに全角が混じっていると、機能しないのがプログラミング。
でも半角、全角は目視では判断しにくい。そこで全角を可視化してくれる拡張機能。

HTML Snippets（HTMLのマークアップのサポート）

HTMLスニペットを表示
入力中に、入力内容に応じたHTMLスニペット（マークアップのサポート）を表示してくれます。
HTMLのコードを全て書かなくてもサポートしてくれるので開発効率、記述ミスを防いでくれる機能。

Live Server

テキストエディタの変更内容をリアルタイムでブラウザに反映
リアルタイムで変更を反映することで、ファイルを手動でリロードしなおす事なく、反映を確認できるので、効率的な開発をする事ができます。

vscode-icons

アイコンを見やすく表示
デフォルトだと少し味気ないアイコンになってしましますが、vscode-iconsで見やすいアイコン表示する事ができます。

Color Highlight

カラーコードの色を可視化
コード上でカラーを表示してくれるので、ブラウザに戻らなくても色を確認する事ができ、効率的に作業することができます。

trailing space

文末の空白を可視化する
プログラミングは文末にスペースがあると、機能しないことがあります。
スペースを可視化してくれる拡張機能。

Prettier – Code formatter

自動ソースコード整形
自動で改行の余白、タブのサイズや位置を整形してくれる拡張機能。

Partial Diff

選択範囲の差分を確認
選択範囲の差分を確認する事ができ、目視の工数を減らす事ができます。

indent-rainbow

インデントを色分
インデントを色分けしてくれ目立たせてくれる拡張機能です。

HTML CSS Support

HTMLにCSS側で作ったclass名を表示
HTMLファイルCSSファイルが連動し、作成した、class名候補を出してくれるので書き間違いを防いでくれます。

まとめ

いかがだったでしょうか？
今回は、Visual Studio Code入門編として

1.Visual Studio Code(VSCode)とは
2.Visual Studio Code入手・インストール方法
3.画面の見方
4.フォルダの開き方/作り方
5.エディタの画面分割方法
6.便利機能
7.コマンドパレットの使い方
8.設定方法
9.Visual Studio Code内でターミナルを開く方法
10.ショートカットキー
11.拡張機能

について解説してきました。
本記事を参考にしていただけたら幸いです。