monoのメモ帳

HTMLとCSSを勉強しながらはてなブログをカスタマイズ中です。

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に日本語の拡張機能を入れる方法

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 歯車マーク→設定

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

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

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

VScode 有効にする

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

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

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

VScode 歯車マーク→設定

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

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

VScodeのHTML5 ひな型のlangをjaへ変更

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

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

Emmet省略記法について

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

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

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

VScodeのEmmetを使ってID名を指定

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*3p <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でエディタ内の折り返しにしたい

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

VScodeを右端で折り返し設定

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

VScodeのインデントの設定

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

インデントの設定

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

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

VScode Detect Indentation

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

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

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

VScode Insert Spaces

画面に書かれてある通り、「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

※HTMLとCSSのコメントアウトは「Ctrl + / 」だけで複数行コメントアウトに対応。

雑感

今まではTeraPadを利用してHTMLやCSSを書いていたので、自動入力になれません。便利なんですけど勝手に>が入ったりするので、「違う、今は自動入力しないで」と心の中で叫ぶ時が多々あります。ちょっと慣れるまでに時間がかかりそうです。

けれども、ID名を入力するだけでdivで囲ってくれたり、marginが楽に書けたりするので便利ですね。

それから、ウィンドウを横並びにしてHTMLを確認しながらCSSが打てるし、間違っているとエラーで表示してくれるのと、全角の空欄を見つけてくれるのが特に便利です。全角の空欄見つけるのって大変でしょ。

慣れるまでに時間がかかりそうですが、ちょっとずつやっていこうと思います。