
- Shopify
- 2025.02.16
インストール方法は?
日本語に対応しているの?
使いこなすコツを知りたい
Visual Studio Codeは、日本語に対応しており、操作がシンプルで初心者でも開発しやすい無料のコードエディタです。
本記事では、Visual Studio Codeのインストールから基本設定、知らないと損する5つの機能を解説します。
Visual Studio Codeは、Microsoft社が開発したコードエディタで、略してVS Codeと呼ばれています。
軽くて動作が速いコードエディタで、拡張機能(プラグイン)も充実しています。
必要に応じて自分が使いやすいエディタにカスタマイズでき、プラグインを上手く組み合わせることで作業効率をアップさせることも可能です。
Visual Studioとは?
Visual Studio Codeと名前が似ていますが、Visual StudioはMicrosoftが開発した統合開発環境(IDE)です。開発者向けのツールで、ソフトウェア開発のための高度な機能が備わっています。
Visual Studio Codeの公式サイトにアクセスし、それぞれの機種に合ったボタンをクリックしてインストールしましょう。
それぞれ順番に紹介します。
インストールの流れは以下の通り。
おすすめは、以下の4つです。
特に2番目と3番目は、エクスプローラーから右クリックでVS Codeが開けるようになる便利な機能です。
インストールの流れは以下の通り。
3まで進めたら、インストール完了です。
ここではUbuntuのインストール手順を紹介します。
UbuntuやDebianなどのディストリビューションでは、.debパッケージをダウンロードしてインストールするのが一番簡単な方法です。
VS Codeをインストールしたあとに、エディタ表示が英語の場合は、日本語に設定しましょう。
手順は以下の通り。
再起動したあとに、表示が日本語に変更されたら完了です。
VS Codeの基本的な使い方を紹介します。
順番に見ていきましょう。
VS Codeの画面は以下の5つで構成されています。
VS Codeの画面に慣れるまでは時間がかかるかもしれませんが、少しずつ実際に触って試してみると良いでしょう。
ファイルの作成から保存までの手順を紹介します。
上図では「index.html」という名前でファイルを作成しました。
次の章では、ファイルの自動保存の方法を紹介します。
ここではVS Codeの便利な機能を紹介します。
それぞれ順番に見ていきましょう。
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は、HTMLやCSSを短縮して書ける入力補助機能です。
たとえば、CSSで「w10」と入力すると、「width: 10px;」が補完されて入力されます。
コードのスペルを全て覚えなくても、最初の一文字を入力すると予測変換で表示されて便利です。
初心者も活用すればするほど、非常に速くコーディングできるようになります。
VS Codeにプラグインを入れると、利便性がアップします。
さまざまな種類がありますが、ここでは特におすすめの5つを紹介します。
このようなプラグインを入れておくと、コードの記述ミスを減らせて、作業効率がアップします。
他にもいろいろな種類があるため、自分でも調べてみて積極的に活用してみてください。
スニペット登録は、繰り返してよく使用するコードを短縮してすぐに呼び出せるようにしておく機能です。
登録の方法は以下の通り。
JSONファイルをはじめて開くと、最初にコメントアウトで説明とコードサンプルが記載されていますが、削除して問題ありません。
スニペットの構文は以下の通り。
コピー"スニペットの名前": {
"prefix": "スニペットを呼び出すキーワード",
"body": [
"出力するコード",
"出力するコード",
"出力するコード",
],
"description": "スニペットの説明(任意)"
}
例として、コメントアウトの装飾をスニペット登録したものは以下の通り。
コピー"comment": {
"prefix": "cmt",
"body": [
"/* ===============================================",
"# $1",
"=============================================== */",
],
"description": "comment out)"
}
body内の$1は入力箇所で、タブキーで移動できます。
次のスニペットを登録するときは、「,」を忘れずにつけておきましょう。
最初は登録に手間取るかもしれませんが、一度、仕組みが分かると二つ目からは簡単です。
頻繁に使用するコードをスニペットとして登録しておくと、コーディングの速度が大幅に向上するため、しっかりと登録方法を理解しておきましょう。
ファイルの自動保存を設定すると、保存のミスがなくなり、いつでも最新データで作業を再開できます。
ファイルの自動保存の設定手順は以下の通り。
このように設定しておくと、一定時間の操作がない場合に自動保存されるようになります。
設定後は、VS Codeを再起動しておきましょう。
Visual Studio Code(VS Code)は、軽量で拡張性が高く、シンプルな操作で初心者でも安心して利用できるエディタです。
プラグインの活用やスニペット登録、Emmetの使用により作業時間の時短に繋がり、VS Codeを使いこなすことで、コーディングの作業負担が軽減されます。
ぜひこの機会にさまざまな機能を活用してみてください。
デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。
HTML/CSSやjavaScriptの言語の基本はもちろん、デザインカンプからのコーディング、WordPressのオリジナルテーマ作成までカリキュラムに含まれています。
さらに、中級・上級の最終課題はメンターによる課題レビューがあります。現場目線の品質チェックが受けられるため、大幅なスキルアップが期待できるでしょう。
Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください!