HTMLコードを記述するためのソフト「 Visual Studio Code」

Visual Studio Codeは、MicroSoftが開発したMicrosoftが開発したソースコードエディタです。

プログラム言語のPythonやPHPなどのコーデイングする際にも使えますし、

WEBサイトやWordPressで利用しているHTML言語やCSS、JavaScripを記述する際にも利用できます。

ソースコードエディタとは、何かをよく聞かれるのですが、

こちらは、windowsでいう「メモ帳」のソフトが該当します。

コードが書けるキャンパスみたいなソフトです。

「メモ帳」は、文字を書くと書いた文字に色がつくことはないですが、

Visual Studio Codeでは、Printなどの命令文やHTMLのタグに色を自動でつけてくれます。

なので、見やすかったり、コーデイングしやすかったりします。

またemmetといわれる機能があり、タグ入力のサポートをしてくれます。

こんなことができます。動画にしましたのでご確認ください。

インストール方法は下記になります。

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

下記の「今すぐダウンロード」にて、ダウンロードしてインストールします。

2021.02現在、

バージョン: 1.52.1 (user setup)を使用しています。

プラグイン（拡張機能）することで自分にあった環境にカスタマイズできます。

Visual Studio Codeで標準で利用できる機能　emmet
Visual Studio Code のおすすめプラグイン（拡張機能）を紹介します

Visual Studio Codeで標準で利用できる機能　emmet

emmetという機能が使えます。

Emmnet（エメット）とはHTMLの入力補間機能のことです。

開始タグを修正したときに、自動的に対になる終了タグを修正してくれるプラグインです。

emmetは、プラグインする必要ななくVisual Studio Codeの最近のVersionでは標準で入っています。

但し利用するには条件があります。

ファイル名は、拡張子がhtmlまたはhtmlで作成する必要があります。

もしくは、新規ファイルを立ち上げた時、下記の設定で「html」であることを示しても良いです。

使い方

<h1>タイトル</h1>を入力する時、

<　は入力する必要はありません。

h1を入力し、[Tab]キー or［Enter］キー押します。

実際は、hを入力するだけで候補ができますのでそちらを選んでもいいですし、

ｈ1まで入力して[Tab]キー or［Enter］キーを押してもいいです、

実例

Emmetスニペットの構文の一例

HTMLのファイルで！＋改行を入れると下記のHTMLが表示されます。

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

2行目のlang(言語）はデフォルトはenになっているので、jaに変える必要があります。！＋改行でいつもjaになるように下記のように設定します。

VBコードの左下の歯車マークの「設定」をクリック、設定の検索窓から「emmet.variable」で検索し、「項目の追加」をクリック。下記のように「en」を「ja」に変更する