インストール方法は？
日本語に対応しているの？
使いこなすコツを知りたい
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をインストールする方法
- Windows版のインストール
- Mac版のインストール
- Linux版のインストール
それぞれ順番に紹介します。
Windows版のインストール
インストールの流れは以下の通り。
- 公式サイトにアクセスしてWindows版をダウンロード
- 指示に従ってインストールを進め、使用許諾契約書に同意して「次へ」をクリック
- 追加タスクの選択画面まで進めたら、必要なものを選択
おすすめは、以下の4つです。
特に2番目と3番目は、エクスプローラーから右クリックでVS Codeが開けるようになる便利な機能です。
Mac版のインストール
インストールの流れは以下の通り。
- 公式サイトにアクセスしてMac版をダウンロード
- ダウンロードフォルダにダウンロードされたzipファイルをダブルクリックで解凍
- 展開したVS Codeのアプリを開く
3まで進めたら、インストール完了です。
Linux版のインストール
ここではUbuntuのインストール手順を紹介します。
- 公式サイトの真ん中にある、ペンギンの下の「.deb」パッケージをダウンロード
- ターミナルを開き、ダウンロードしたディレクトリに移動
- 次のコマンドでパッケージをインストール：sudo apt install ./<file>.deb
UbuntuやDebianなどのディストリビューションでは、.debパッケージをダウンロードしてインストールするのが一番簡単な方法です。
Visual Studio Codeを日本語化する方法
VS Codeをインストールしたあとに、エディタ表示が英語の場合は、日本語に設定しましょう。
手順は以下の通り。
- 左側にあるマーケットプレイスをクリック
- 検索バーで「Japanese」を検索
- 「Japanese Language Pack for Visual Studio Code」を選択
- タイトルを確認してインストール
- VS Codeを再起動
再起動したあとに、表示が日本語に変更されたら完了です。
Visual Studio Codeの基本的な使い方
VS Codeの基本的な使い方を紹介します。
- 画面の見方
- ファイル操作
順番に見ていきましょう。
画面の見方
VS Codeの画面は以下の5つで構成されています。
- アクティビティバー：ファイルの作成やプラグインのインストールなどに使用
- サイドバー：アクティビティバーで選択した機能を表示
- エディタ：コードを書くためのエリア（複数を同時に開くことも可能）
- パネル：ターミナルやデバッグ情報、エラー確認が可能
- ステータスバー：現在開いているファイルの行数や文字コード、使用言語などの情報を表示
VS Codeの画面に慣れるまでは時間がかかるかもしれませんが、少しずつ実際に触って試してみると良いでしょう。
ファイル操作
ファイルの作成から保存までの手順を紹介します。
- デスクトップに新規フォルダを作成
- VS Codeのアプリに新規フォルダをドラッグ＆ドロップ
- 自動でフォルダが開くのを確認
- 作成したフォルダにカーソルを合わせ、新規ファイルまたは新規フォルダを作成するアイコンをクリック
- ファイル名またはフォルダ名を入力して作成
- ファイルの保存は、Windowsなら「Ctrl + S」、Macなら「Cmd + S」のショートカットキーを使用
上図では「index.html」という名前でファイルを作成しました。
次の章では、ファイルの自動保存の方法を紹介します。
Visual Studio Codeの知って得する5つの機能
ここではVS Codeの便利な機能を紹介します。
- ショートカットキー
- Emmet
- プラグイン
- スニペット登録
- ファイルの自動保存
それぞれ順番に見ていきましょう。
ショートカットキー
VS Codeのショートカットキーは数多くありますが、ここではコーディング時によく使用するものを厳選して紹介します。
| Windows | Mac | 補足 | |
| コードの自動整形 | Alt + Shift +F | Option + Shift + F | HTMLやJavaScript |
| 選択行のコピー | Alt + Shift + 矢印キー | Option + Shift + 矢印キー | カーソルがある行を丸ごとコピー |
| 選択行の削除 | Ctrl + Shift + K | Cmd + Shift + K | カーソルがある行を削除 |
| 選択行の移動 | Alt + 矢印キー | Option + 矢印キー | カーソルがある行を丸ごと移動 |
| 上に行を挿入 | Ctrl + Shift + Enter | Cmd + Shift + Enter | 行のどこからでも新しく上に行を挿入 |
| 下に行を挿入 | Ctrl + Enter | Cmd + Enter | 行のどこからでも新しく下に行を挿入 |
| 文字の検索 | Ctrl + F | Cmd + F | |
| 括弧の対にジャンプ | Ctrl + Shift + \（¥） | Cmd + Shift + \（¥） | CSSやSass、JavaScriptのように対の括弧が離れているときに便利 |
| 文字の置換 | Ctrl + H | Cmd + Option + F | 文字をまとめて置換 |
| 全体を置換 | Ctrl + Shift + H | Cmd + Shift + H | |
| 任意で複数選択 | Alt + クリック | Option + クリック | |
| 同じ文字列を複数選択 | Ctrl + D | Cmd + D | |
| 選択した単語を一括選択 | Ctrl + Shift + L | Cmd + Shift + L | 単語を一括で変更可 |
| 矩形選択 | Ctrl + Shift + Alt + 矢印キー | Cmd + Shift + Option + 矢印キー | まとめて変更可 |
| サイドバーの開閉 | Ctrl + B | Cmd + B | |
| 選択行のコメント化 | Ctrl + / | Cmd + / | コメントアウト |
| コメントの型を作成 | Alt + Shift + A | Option + Shift + A | 行末にカーソルを合わせると、各言語にあったコメントの型を作成 |
全てのショートカットキーは、上部のメニューバーの「Code」→「基本設定」→「キーボードショートカット」から確認できます。
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の更新を検知したライブプレビュー表示
このようなプラグインを入れておくと、コードの記述ミスを減らせて、作業効率がアップします。
他にもいろいろな種類があるため、自分でも調べてみて積極的に活用してみてください。
スニペット登録
スニペット登録は、繰り返してよく使用するコードを短縮してすぐに呼び出せるようにしておく機能です。
登録の方法は以下の通り。
- 上部のメニューバー「Code」→「基本設定」→「スニペットの構成」をクリック
- 登録したい言語のJSONファイルを選択
- スニペットを記述
JSONファイルをはじめて開くと、最初にコメントアウトで説明とコードサンプルが記載されていますが、削除して問題ありません。
スニペットの構文は以下の通り。
コピー"スニペットの名前": {
"prefix": "スニペットを呼び出すキーワード",
"body": [
"出力するコード",
"出力するコード",
"出力するコード",
],
"description": "スニペットの説明（任意）"
}
例として、コメントアウトの装飾をスニペット登録したものは以下の通り。
コピー"comment": {
"prefix": "cmt",
"body": [
"/* ===============================================",
"# $1",
"=============================================== */",
],
"description": "comment out）"
}
body内の$1は入力箇所で、タブキーで移動できます。
次のスニペットを登録するときは、「,」を忘れずにつけておきましょう。
最初は登録に手間取るかもしれませんが、一度、仕組みが分かると二つ目からは簡単です。
頻繁に使用するコードをスニペットとして登録しておくと、コーディングの速度が大幅に向上するため、しっかりと登録方法を理解しておきましょう。
ファイルの自動保存
ファイルの自動保存を設定すると、保存のミスがなくなり、いつでも最新データで作業を再開できます。
ファイルの自動保存の設定手順は以下の通り。
- 設定画面を開く（Windowsは「 Ctrl + , 」、Macなら「Cmd + , 」）
- 検索バーに「autosave」を入力
- 「Files: Auto Save」で「afterDelay」を選択
- VS Codeを再起動
このように設定しておくと、一定時間の操作がない場合に自動保存されるようになります。
設定後は、VS Codeを再起動しておきましょう。
まとめ：VS Codeを使ってみよう
Visual Studio Code（VS Code）は、軽量で拡張性が高く、シンプルな操作で初心者でも安心して利用できるエディタです。
プラグインの活用やスニペット登録、Emmetの使用により作業時間の時短に繋がり、VS Codeを使いこなすことで、コーディングの作業負担が軽減されます。
ぜひこの機会にさまざまな機能を活用してみてください。
未経験からコーディングを学ぶならデイトラWeb制作コースがおすすめ！
デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。
HTML/CSSやjavaScriptの言語の基本はもちろん、デザインカンプからのコーディング、WordPressのオリジナルテーマ作成までカリキュラムに含まれています。
さらに、中級・上級の最終課題はメンターによる課題レビューがあります。現場目線の品質チェックが受けられるため、大幅なスキルアップが期待できるでしょう。
Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください！