Visual Studio Code(VScode)をインストールしてからやったことのメモ

HTMLやCSSやJavaScriptを独学で勉強中なのですが、コードエディタにVisual Studio Code(VScode)を使い始めました。

まだ触りだしてから数週間しか経っていないのでわからないことばかりです。

今までは昔からあるTeraPadを利用していたのですが、今の時代はVScodeが主流なのだとか。

少し前だと、brackets(Adobe社)を利用されている方が多かったようですが、bracketsは2021年9月1日にサポートが終了していて、パートナー関係にあるマイクロソフト社のVisual Studio Codeへの移行が推奨されています。

今からHTMLエディタをインストールされる方は、マイクロソフト社のVisual Studio Codeがメインになっていくのでしょうか。

ということで前置きが長くなりましたが、VScodeの使い方が全然慣れなくて、まだ勉強途中なのですが、インストールしてからやったことを書いておこうと思います。

公式サイト　Visual Studio Code – コードエディター | Microsoft Azure

VScodeに日本語の拡張機能を入れる方法
HTMLのひな型を表示させるには「! (ビックリマーク)+ Tab」
VScodeでエディタ内の折り返しにしたい
VScodeのインデントの設定
VScodeのショートカットメモ
雑感

VScodeに日本語の拡張機能を入れる方法

VScodeはデフォルトが英語で、拡張機能で日本語にすることができます。わたしは英語が苦手なので日本語の拡張機能を入れることにしました。

VScodeを起動すると右下に「日本語に変更するには言語パックをインストールします。」という表示が出るので「インストールして再起動」を選択すると日本語パックが適用されます。

もしくは、左側の「Extensions(Ctrl+Shift+x)」をクリックして「Japanese Language Pack for Visual Studio」と入力します。表示された項目の中で「Japanese Language Pack for Visual Studio Code」の「Install」をクリックすると日本語パックがインストールできます。再起動すると日本語に反映されます。

HTMLのひな型を表示させるには「! (ビックリマーク)+ Tab」

HTMLをまっさらな状態から書こうとすると、DOCTYPE(ドックタイプ)宣言をして、メタタグを書いて、bodyタグを書いてと、決まったひな型ですが数行書かないといけません。

そんなときに便利なのが、VScodeで利用できるHTML5のひな型です。使い方はとても簡単で、HTMLファイルを開いて、1行目に「! (ビックリマーク)」を入力した後にTabキーを押すだけ。

すると、下のような HTML5 のひな型が自動的に挿入されます。

<!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>

簡単に基本のソースコードが入力されるのでとても便利です。

「html lang」のところは「en」になっているので「ja」に変更します。

IEの「X-UA-Compatible」はIEがすでにサポート対象外になっているので必要ないかなとは思いますが、どうなんでしょう？

ちなみに、はじめてVScodeを入れると、この機能（Emmetといいます）が無効になっているので有効にします。

VScodeでEmmetを有効にする方法

VScodeの歯車マーク→設定をクリックします。

ショートカットで設定画面を開く場合は
Windowsなら [CTRL + ,（カンマ）]
Macなら [Command + ,（カンマ）]で設定画面が開けます。

設定の検索窓に「trigger expansion on tab」と入力します。

Emmet: Trigger Expansion On Tabの「有効にすると、TABキーを押したときに Emmet 省略記法が展開されます。」にチェックを入れてVScodeを再起動すると設定が適用されます。

VSCode の HTML5 のひな型の lang を ja へ変更する方法

次は、VSCode の HTML5 のひな型を表示させた際に、手入力で毎回 lang を ja に変更するのは少し面倒だし忘れてしまいそうなので、設定で最初から ja で表示されるように変更してみましょう。

先ほどと同じようにVScodeの歯車マーク→設定をクリックします。

ショートカットで設定画面を開く場合は
Windowsなら [CTRL + ,（カンマ）]
Macなら [Command + ,（カンマ）]で設定画面が開けます。

設定の検索窓に「variables」と入力します。

Emmet: variables の「項目の追加」をクリックして、項目に [lang] を選び、値に [ja] と入力します。OKをクリックすると設定が完了です。これで自動的に [ja] で表示されます。

Emmet省略記法について

TABキーを使ったEmmet 省略記法が使えるようになると、HTML5のひな型だけではなく、IDやクラスを入力する際にもEmmet省略記法が利用できます。よく使うものは覚えていきたいですね。

便利だなと思ったのは、HTMLファイルでID名やクラス名を入力した後にTabを押すとHTMLタグに変換してくれるEmmet。

例えば、「#header」を入力して Tab を押すと ↓

↓

自動的に<div id="header"></div>と入力してくれます。

IDと同じようにクラス名などでもEmmetが利用できます。

ID and CLASS attributes

#header: <div id="header"></div>
.title: <div class="title"></div>
form#search.wide: <form id="search" class="wide"></form>
p.class1.class2.class3: <p class="class1 class2 class3"></p>

Child: >

nav>ul>li: <nav> <ul> <li></li> </ul> </nav>

Emmetスぺニットの構文一部抜粋

構文	例	説明
! + Tab	HTMLのひな型	HTMLのひな型を表示
要素名	div、aなど	divと入力すると<div></div>と表示
>	div>p	<div> 　<p></p> </div>
+	div>p+p	<div> 　<p></p> 　<p></p> </div>
^	div>ul>li*3^p	<div> 　<ul> 　　<li></li> 　　<li></li> 　　 <li></li> 　</ul> 　<p></p> </div>
{}内で$	li*3{item $}	<li>item 1</li> <li>item 2</li> <li>item 3</li>
{}	li*3{item}	<li>item</li> <li>item</li> <li>item</li>
#	div#id名	<div id="id名"></div>

たくさんありすぎて紹介しきれないし、覚えられないので公式サイトへのリンクを置いておきます。

公式サイトのEmmetチートシート → Cheat Sheet

VScodeでエディタ内の折り返しにしたい

デフォルトでは折り返しの設定になっていないので、毎回メニューバーの「表示」→「右端での折り返し」をクリックしていたのですが、すごく面倒なので、デフォルトを折り返しの設定へ変更しました。

歯車マークをクリックして「設定」をクリック
検索窓に「editor word wrap」と入力
「Editor: Word Wrap」を「on」にする

VScodeのインデントの設定

Tabを押したときにインデントを空白2文字にするのか、4文字にするのか好みが分かれると思いますが、わたしは2文字がいいので、VScodeのインデントの設定を2文字へ変更しました。

歯車マークをクリックして「設定」をクリック
検索窓に「Tab Size」と入力
「Editor: Tab Size」を「２」にする

画面に書いてあるとおりですが、Editor: Detect Indentation がオンの場合、この設定はファイルコンテンツに基づいて上書きされますとあります。

Detect Indentationでは、ファイルの内容によってタブの空白文字数を制御するかどうかの設定です。

チェックが入っている状態だとファイルの内容が優先され、チェックが外れているとファイルの内容を引き継ぎません。

とりあえず、わたしの場合はここのチェックはありでやってみて、不都合が出たら変更しようと思います。

画面に書かれてある通り、「Insert Spaces」の設定は、先ほどの「Detect Indentation」がオンの場合は、設定はファイルコンテンツに基づいて上書きされます。

VScodeのショートカットメモ

動作	Windows	Mac
戻る	Ctrl + Z	command + Z
進む	Ctrl + Y	command + Y
カーソルの置いてある行を選択	Ctrl + L	command + L
カーソルの置いてある行を上下に移動	Alt + ↑または↓	option + ↑または↓
カーソルの置いてある行を上下にコピー	Shift + Alt + ↑または↓	shift + option + ↑または↓
コメントアウト(行コメント)	Ctrl + /	command + /
コメントアウト(ブロックコメント)	Shift + Alt + A	Shift ＋ Option ＋ A