Visual Studio Codeとは?インストールから便利な5つの機能まで解説

Visual Studio Codeとは?インストールから便利な5つの機能まで解説

インストール方法は?
日本語に対応しているの?
使いこなすコツを知りたい

Visual Studio Codeは、日本語に対応しており、操作がシンプルで初心者でも開発しやすい無料のコードエディタです。

本記事では、Visual Studio Codeのインストールから基本設定、知らないと損する5つの機能を解説します。

Visual Studio Codeとは

Visual Studio Codeは、Microsoft社が開発したコードエディタで、略してVS Codeと呼ばれています。

軽くて動作が速いコードエディタで、拡張機能(プラグイン)も充実しています。

必要に応じて自分が使いやすいエディタにカスタマイズでき、プラグインを上手く組み合わせることで作業効率をアップさせることも可能です。

Visual Studioとは?
Visual Studio Codeと名前が似ていますが、Visual StudioはMicrosoftが開発した統合開発環境(IDE)です。開発者向けのツールで、ソフトウェア開発のための高度な機能が備わっています。

Visual Studio Codeをインストールする方法

    Visual Studio Codeの公式サイトにアクセスし、それぞれの機種に合ったボタンをクリックしてインストールしましょう。

  • Windows版のインストール
  • Mac版のインストール
  • Linux版のインストール

それぞれ順番に紹介します。

Windows版のインストール

インストールの流れは以下の通り。

  1. 公式サイトにアクセスしてWindows版をダウンロード
  2. 指示に従ってインストールを進め、使用許諾契約書に同意して「次へ」をクリック
  3. 追加タスクの選択画面まで進めたら、必要なものを選択

おすすめは、以下の4つです。

特に2番目と3番目は、エクスプローラーから右クリックでVS Codeが開けるようになる便利な機能です。

Mac版のインストール

インストールの流れは以下の通り。

  1. 公式サイトにアクセスしてMac版をダウンロード
  2. ダウンロードフォルダにダウンロードされたzipファイルをダブルクリックで解凍
  3. 展開したVS Codeのアプリを開く

3まで進めたら、インストール完了です。

Linux版のインストール

ここではUbuntuのインストール手順を紹介します。

  1. 公式サイトの真ん中にある、ペンギンの下の「.deb」パッケージをダウンロード
  2. ターミナルを開き、ダウンロードしたディレクトリに移動
  3. 次のコマンドでパッケージをインストール:sudo apt install ./<file>.deb

UbuntuやDebianなどのディストリビューションでは、.debパッケージをダウンロードしてインストールするのが一番簡単な方法です。

Visual Studio Codeを日本語化する方法

VS Codeをインストールしたあとに、エディタ表示が英語の場合は、日本語に設定しましょう。

手順は以下の通り。

  1. 左側にあるマーケットプレイスをクリック
  2. 検索バーで「Japanese」を検索
  3. 「Japanese Language Pack for Visual Studio Code」を選択
  4. タイトルを確認してインストール
  5. VS Codeを再起動

再起動したあとに、表示が日本語に変更されたら完了です。

Visual Studio Codeの基本的な使い方

VS Codeの基本的な使い方を紹介します。

  • 画面の見方
  • ファイル操作

順番に見ていきましょう。

画面の見方

VS Codeの画面は以下の5つで構成されています。

  1. アクティビティバー:ファイルの作成やプラグインのインストールなどに使用
  2. サイドバー:アクティビティバーで選択した機能を表示
  3. エディタ:コードを書くためのエリア(複数を同時に開くことも可能)
  4. パネル:ターミナルやデバッグ情報、エラー確認が可能
  5. ステータスバー:現在開いているファイルの行数や文字コード、使用言語などの情報を表示

VS Codeの画面に慣れるまでは時間がかかるかもしれませんが、少しずつ実際に触って試してみると良いでしょう。

ファイル操作

ファイルの作成から保存までの手順を紹介します。

  1. デスクトップに新規フォルダを作成
  2. VS Codeのアプリに新規フォルダをドラッグ&ドロップ
  3. 自動でフォルダが開くのを確認
  4. 作成したフォルダにカーソルを合わせ、新規ファイルまたは新規フォルダを作成するアイコンをクリック
  5. ファイル名またはフォルダ名を入力して作成
  6. ファイルの保存は、Windowsなら「Ctrl + S」、Macなら「Cmd + S」のショートカットキーを使用

上図では「index.html」という名前でファイルを作成しました。

次の章では、ファイルの自動保存の方法を紹介します。

Visual Studio Codeの知って得する5つの機能

ここではVS Codeの便利な機能を紹介します。

  • ショートカットキー
  • Emmet
  • プラグイン
  • スニペット登録
  • ファイルの自動保存

それぞれ順番に見ていきましょう。

ショートカットキー

VS Codeのショートカットキーは数多くありますが、ここではコーディング時によく使用するものを厳選して紹介します。

WindowsMac補足
コードの自動整形Alt + Shift +FOption + Shift + FHTMLやJavaScript
選択行のコピーAlt + Shift + 矢印キーOption + Shift + 矢印キーカーソルがある行を丸ごとコピー
選択行の削除Ctrl + Shift + KCmd + Shift + Kカーソルがある行を削除
選択行の移動Alt + 矢印キーOption + 矢印キーカーソルがある行を丸ごと移動
上に行を挿入Ctrl + Shift + EnterCmd + Shift + Enter行のどこからでも新しく上に行を挿入
下に行を挿入Ctrl + EnterCmd + Enter行のどこからでも新しく下に行を挿入
文字の検索Ctrl + FCmd + F
括弧の対にジャンプCtrl + Shift + \(¥)Cmd + Shift + \(¥)CSSやSass、JavaScriptのように対の括弧が離れているときに便利
文字の置換Ctrl + HCmd + Option + F文字をまとめて置換
全体を置換Ctrl + Shift + HCmd + Shift + H
任意で複数選択Alt + クリックOption + クリック
同じ文字列を複数選択Ctrl + DCmd + D
選択した単語を一括選択Ctrl + Shift + LCmd + Shift + L単語を一括で変更可
矩形選択Ctrl + Shift + Alt + 矢印キーCmd + Shift + Option + 矢印キーまとめて変更可
サイドバーの開閉Ctrl + BCmd + B
選択行のコメント化Ctrl + /Cmd + /コメントアウト
コメントの型を作成Alt + Shift + AOption + Shift + A行末にカーソルを合わせると、各言語にあったコメントの型を作成

全てのショートカットキーは、上部のメニューバーの「Code」→「基本設定」→「キーボードショートカット」から確認できます。

▶️Macの基本のショートカットキーはこちら

Emmet

Emmetは、HTMLやCSSを短縮して書ける入力補助機能です。

たとえば、CSSで「w10」と入力すると、「width: 10px;」が補完されて入力されます。

コードのスペルを全て覚えなくても、最初の一文字を入力すると予測変換で表示されて便利です。

初心者も活用すればするほど、非常に速くコーディングできるようになります。

プラグイン

VS Codeにプラグインを入れると、利便性がアップします。

さまざまな種類がありますが、ここでは特におすすめの5つを紹介します。

  • Prettier – Code formatter:コードを見やすく自動整形
  • Auto Rename Tag:開始タグを修正したときに、終了タグも修正
  • HTML Hint:HTMLの記述ミスのお知らせ
  • Code Spell Checker:コードのスペルミスのお知らせ
  • Live Server:HTMLやCSSの更新を検知したライブプレビュー表示

このようなプラグインを入れておくと、コードの記述ミスを減らせて、作業効率がアップします。

他にもいろいろな種類があるため、自分でも調べてみて積極的に活用してみてください。

ニペット登録

スニペット登録は、繰り返してよく使用するコードを短縮してすぐに呼び出せるようにしておく機能です。

登録の方法は以下の通り。

  1. 上部のメニューバー「Code」→「基本設定」→「スニペットの構成」をクリック
  2. 登録したい言語のJSONファイルを選択
  3. スニペットを記述

JSONファイルをはじめて開くと、最初にコメントアウトで説明とコードサンプルが記載されていますが、削除して問題ありません。

スニペットの構文は以下の通り。

コピー"スニペットの名前": {
       "prefix": "スニペットを呼び出すキーワード",
       "body": [
           "出力するコード",
           "出力するコード",
           "出力するコード",
       ],
       "description": "スニペットの説明(任意)"
}

例として、コメントアウトの装飾をスニペット登録したものは以下の通り。

コピー"comment": {
       "prefix": "cmt",
       "body": [
           "/* ===============================================",
           "# $1",
           "=============================================== */",
       ],
       "description": "comment out)"
}

body内の$1は入力箇所で、タブキーで移動できます。

次のスニペットを登録するときは、「,」を忘れずにつけておきましょう。

最初は登録に手間取るかもしれませんが、一度、仕組みが分かると二つ目からは簡単です。

頻繁に使用するコードをスニペットとして登録しておくと、コーディングの速度が大幅に向上するため、しっかりと登録方法を理解しておきましょう。

ファイルの自動保存

ファイルの自動保存を設定すると、保存のミスがなくなり、いつでも最新データで作業を再開できます。

ファイルの自動保存の設定手順は以下の通り。

  1. 設定画面を開く(Windowsは「 Ctrl + , 」、Macなら「Cmd + , 」)
  2. 検索バーに「autosave」を入力
  3. 「Files: Auto Save」で「afterDelay」を選択
  4. VS Codeを再起動

このように設定しておくと、一定時間の操作がない場合に自動保存されるようになります。

設定後は、VS Codeを再起動しておきましょう。

まとめ:VS Codeを使ってみよう

Visual Studio Code(VS Code)は、軽量で拡張性が高く、シンプルな操作で初心者でも安心して利用できるエディタです。

プラグインの活用やスニペット登録、Emmetの使用により作業時間の時短に繋がり、VS Codeを使いこなすことで、コーディングの作業負担が軽減されます。

ぜひこの機会にさまざまな機能を活用してみてください。

未経験からコーディングを学ぶならデイトラWeb制作コースがおすすめ!

デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。

HTML/CSSやjavaScriptの言語の基本はもちろん、デザインカンプからのコーディング、WordPressのオリジナルテーマ作成までカリキュラムに含まれています。

さらに、中級・上級の最終課題はメンターによる課題レビューがあります。現場目線の品質チェックが受けられるため、大幅なスキルアップが期待できるでしょう。

Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください!

 

【Webスキル診断】“一生使えるスキル”を60秒で診断しよう!

CTA-IMAGE 「フリーランスになりたいけど、どんなスキルを身につければいいかわからない」という悩みを解決すべく、東京フリーランスでは【Webスキル診断】をLINEで無料実施中です! Web制作・Webデザイン・アプリ開発・動画編集など「自分に合った理想の働き方は何か」を見極めていただけます。

Web制作カテゴリの最新記事