Visual Studio Codeの基本の使い方、HTML＆CSSの初心者に超便利なエディター

目　次

ｓはじめに
VSコードとは？
VSコードのダウンロード、インストール
VSコードの日本語化
VSコードの基本の使い方
VSコードの初心者におすすめの拡張機能
おわりに

ｓはじめに

　プログラミング言語の記述には大変便利で初心者にも易しいVisual Studio Code（以後、VSコード）について紹介します。

　この記事を読むと、次の疑問について知ることができます。

★VSコードとはどのようなアプリ？
★VSコードのダウンロード、インストールはどうするの？
★VSコードの日本語化はどうするの？
★VSコードの基本の使い方はどうするの？
・初期設定
・EMMETとは？
・HTMLの補完機能
・CSSの補完機能
★VSコードの初心者におすすめの拡張機能とはどのようなもの？

　OS、機種などで説明の仕方が変わってくることがありますので、私の使用しているパソコン環境について載せておきます。

パソコンOS　：　Windows10 Pro
Windowsバージョン　：　21H1

VSコードとは？

　VSコードは、Microsoftが開発しているWndows、Mac、LinuxなどのOSで動作するクロスプラットフォームのプログラミング言語用のエディターです。

　VSコードは、初心者にも分かり易く、拡張機能により機能の追加ができ、その拡張機能が充実しているのが特徴です。

　VSコードは、マイクロソフトから2015年4月29日に公開され、プレビュー版がリリースされ、そして最新版はバージョン: 1.58.0 となっていました。

　VSコードの利用者数は、「Stackoverflow」の2019年による市場調査で最も人気のある開発環境として、「VSコード」が50.7％となっており、テキストエディターの中で一番の人気アプリとなっています。

　ここで、VSコードの特徴などをまとめてみましょう。

Windows、Mac、LinuxなどのOSで利用できるマルチプラットフォーム
プログラミング言語に対する強力な補完機能
VSコードにない機能を付加する拡張機能と非常に多くの拡張機能の存在
多くの言語に対応すると共に、利用できるプログラム言語も多数利用することが可能
超軽量でサクサクと動く軽快さ
オープンソースのアプリであり、誰でも無料で利用が可能

VSコードのダウンロード、インストール

　VSコードをインストールするには、先ず「VSコード」のサイトに移動してください。

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized ...

　左にある「Code editing. Redefined.」の「Download for Windows Stable Build 」の右にある「∨」をクリックして、あなたが利用しているOSのインストールファイルをクリックします。

　私の場合は、Windowsなので、「Windows☓64」をクリックします。

　すると、画面上部に「Thanks for downloading VS Code for Windows!」とでて、画面下部に「この種のファイルは損害を与える可能性があります。ダウンロードを続けますか？」とでる場合は、「保存」をクリックします。

　ダウンロードフォルダーに「VSCodeUserSetup-x64-1.58.0.exe」（ファイル名の1.58.0は、この時点でのVSコードのバージョン）がダウンロードされます。

　ダウンロードしたファイル「VSCodeUserSetup-x64-1.58.0.exe」をダブルクリックして起動します。

　VSコードのセットアッププログラムが起動し、「使用許諾契約書の同意」の画面がでますので、内容を確認後、「同意する」にチェックを入れ、右下の「次へ(N) >」をクリックします。

　次に、インストール先の指定画面がでますので、そのままでよいので「次へ(N) >」をクリックします。

　スタートメニューホルダーの指定画面がでますので、特に問題がなければ、「次へ(N) >」をクリックします。

　追加タスクの選択画面がでますので、あなたのデスクトップ上にVSコードのアイコンを作りたいのであれば、「デスクトップ上にアイコンを作成する（D）」にチェックを入れ、その他のオプションを選択し、特に問題がなければ、「次へ(N) >」をクリックします。

　インストール準備完了画面がでますので、「インストール(I) 」をクリックしてインストールを開始します。

　インストール状況が表示され、「Visual Stadio Code セットアップウィザードの完了」画面が表示され、中央にある「Visual Stadio Code を実行する」チェックボックスにチェックが入っていると、終了と同時にVisual Studio Codeが起動しますので、あなたの判断でチェックを「入れる/入れないか」を決め、「完了(F)」をクリックします。

　これで、VSコードをインストールができました。

VSコードの日本語化

　右下の「Winスタート」をクリックして、「VSコード」を起動します。

　最初に、「Get Started with VS Code」が表示され、テーマに「Dark」がデフォルトで選択されています。

　この画面で左メニューの上から5番目の「Extensions」をクリックします。

　表示された画面の上部にある検索窓「Serach Extensions in Marketplace」に「japan」を記入して、検索されて表示される中から「Japanese Language Pack fo...　日本語　Microsoft」をクリックします。

　右の画面に表示された「Japanese Language Pack for Visual Studio Code」画面の下にある小さな「Install」をクリックします。

　インストールが終わると、「Install」⇒「Uninstall」に変化しますので、右下の「Restart」をクリックします。

　再起動した画面を見ると、メニューなどが日本語で表示されていることがわかります。

VSコードの基本の使い方

初期設定

　初期設定は、settings.jsonファイルでするのが良いのですが、初心者には少し分かりずらいので、見て分かるような設定を紹介します。

　設定を開くには、左メニューの下にある「歯車マーク：管理」⇒「設定」をクリックするか、上部メニューの「ファイル」⇒「ユーザー設定」⇒「設定」を順にクリックすると設定画面が表示されます。

　設定項目が非常に多いので、主要な項目のみを次に挙げておきます。

　また、下記の設定項目を探すには、上部の検索欄に下記の文字を入力して探してください。

　例えば、「Files: Insert Final Newline」の設定をしたいのであれば、検索欄に「Insert Final Newline」と入力すれば、その文字に関する設定が表示されます。

Tab Size　：　２
Editor: Render Whitespace　⇒　all
Emmet: Trigger Expansion on Tab　⇒　チェック
Editor: Auto Indent　⇒　none
Diff Editor: Word Warp　⇒　on
Files: Auto Save　⇒　afterDelay
Files: Insert Final Newline　⇒　チェック
Files: Trim Trailling Whitespace　⇒　チェック

　上記の設定は、最小限の設定であり、私が良いと思う設定であり、あなたに合っていない場合もあるかもしれません。

　使っていくうちに、あなたに最適な設定をしていけばよいと思います。

EMMETとは？

　HTMLやCSSを書いていく際に、ショートカットキーにより、HTMLやCSSの要素、構文を自動で保管してくれる機能です。

　VSコードには、このEMMETが標準でプラグインされており、インストールなどをしなくとも利用できます。

　したがって、これを覚えることにより、HTMLやCSSのミスを少なくすることができです。

　なお、沢山の補完機能がありますので詳細に知りたい方は、EMMETのチートシート（Cheat Sheet）を参照ください。

　以下に、EMMETによるHTMLとCSSの簡単な補完機能について紹介します。

HTMLの補完機能

　補完機能を説明する前に、ホルダーを作成し、そのホルダーにhtmlファイルを作成しておきましょう。

　ここで、Googleドライブ内にホルダーを作成し、そこにファイルを作成していきます。

　基本的な補完は、HTMLの要素（タグ）をVSエディターに書き、TABキーまたは、リターンキー（リターンキーでも展開できるように初期設定をしてあるため）を押すことにより展開されます。

　展開前の文字（HTMLタグ）を記入した段階で表示される候補の横に書いてある「Emmet Abbreivation >」をクリックすると、どのように展開するかが分かります。

　候補がいくつもある場合は、上下の↓↑キーで移動させることにより、移動した候補の展開が見れるようになります。

　それらを表の形にまとめました。（展開前の文字を書いたらTabキーまたは、リターンキーを押してくださいね！）

展開前の文字	展開後の文字	展開前の文字	展開後の文字
!	<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>	コメントをしたい行に（例えば、「コメント」と書かれた行に）カーソルをも持っていき、[ctrl] + [/]	<!-- コメント -->
p	<p></p>
h1	<h1></h1>	img	<img src="" alt="">
div	<div></div>	span	<span></span>
div#target	div id="target"></div>	div.iremono	div class="iremono"></div>
a	<a href=""></a>	a[title="My Site"]	<a href="" title="My Site"></a>
ul>li*3	ul> <li></li> <li></li> <li></li> </ul>	ol>li*3	<ol> <li></li> <li></li> <li></li> </ol>
div.item*3	<div class="item"></div> <div class="item"></div> <div class="item"></div>	div.item$*3	<div class="item1"></div> <div class="item2"></div> <div class="item3"></div>
form:post	<form action="" method="post"></form>	input:t	<input type="text" name="" id="">
table>#low>.col*3	<tr id="row"> <td class="col"></td> <td class="col"></td> <td class="col"></td> </tr>	select>[value="item$]*3	<select name="" id=""> <option value="item1"></option> <option value="item2"></option> <option value="item3"></option> </select>

CSSの補完機能

　ここで、Googleドライブ内にホルダーを作成し、そこにCSSファイルを作成していきます。

　基本的な補完は、CSSのプロパティ、値をVSエディターに書き、TABキーまたは、リターンキー（リターンキーでも展開できるように初期設定をしてあるため）を押すことにより展開されます。

　展開前の文字（CSSのプロパティ、値）を記入した段階で表示される候補の横に書いてある「Emmet Abbreivation >」をクリックすると、どのように展開するかが分かります。

　候補がいくつもある場合は、上下の↓↑キーで移動させることにより、移動した候補の展開が見れるようになります。

　それらを表の形にまとめました。（展開前の文字を書いたらTabキーまたは、リターンキーを押してくださいね！）

展開前の文字	展開後の文字	展開前の文字	展開後の文字
ｍ	margin: ;	コメントをしたい行に（例えば、「コメント」と書かれた行に）カーソルをも持っていき、[ctrl] + [/]	/* コメント */
p	padding: ;	m10	margin: 10px;
m15p	margin: 15%;	m20r	margin: 20rem;
m10p20p	margin: 10% 20%;	ｍ10-20-30	margin: 10px 20px 30px;
mb20	margin-bottom: 20px;	mr20	margin-right: 10px;
w	width: ;	W200	width: 200px;
c	color: #000;	c#5	color: #555;
fsz15	font-size: 15px;	curp	cursor: pointer;
fwb	font-weight: bold;	posa	position: absolute;
d	display: block;	d:i	display: inline;
bgc	background-color: #fff;	ff	font-family: serif;

VSコードの初心者におすすめの拡張機能

　初心者におすすめの拡張機能を幾つか表にまとめました。

拡張機能	意味
Japanese Language Pack	VSコードの日本語化（この記事で実施済み）する機能
Bracket Pair Colorizer	対応するカッコの色分けして見易くする機能
Code Spell Checker	スペルミスぽいのを教えてくる機能
Auto Rename Tag	開始タグを修正すると閉じタグを自動で修正する機能
Path Autocomplete	パスの入力の補助機能
IntelliSense for CSS class names in HTML	HTMLでクラス名を作る際の補完機能
Live Server	HTMLやCSSファイルを更新すると、自動でブラウザに反映する機能
HTMLhint	HTMLの構文チェックする機能
zenkaku	全角スペースの見える化する機能

おわりに

　如何だったでしょうか？

　VSコードとはどのようなアプリ？、VSコードのダウンロード、インストールはどうするの？、VSコードの日本語化はどうするの？、VSコードの基本の使い方はどうするの？、初期設定、EMMETとは？、HTMLの補完機能、CSSの補完機能、、VSコードの初心者におすすめの拡張機能とはどのようなもの？などについて解説してきました。

　この記事が少しでもあなたにとって役に立てればこれほど嬉しいことはありません。

以上です。