Visual Studio CodeのEmmetのlang属性をjaに変更する方法

Visual Studio CodeではEmmetがデフォルトでインストールされていて、言語モードがHTMLの状態で!と入力してtabを押すと下記のようにHTMLに必要な最低限のコードが展開されます。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

</body>
</html>

非常に便利なのですが、lang="en"になってしまっているので、これを毎回lang="ja"に変える手間がかかります。

手間といっても一瞬で終わることなので別にいいかもしれませんが、変え忘れる可能性がありますし、モヤッとします。

setting.jsonで設定を変える

ネット上を見てみると、ユーザースニペットを使う方法で解決している人が結構います。

しかし、ユーザースニペットはあくまで別のスニペットを追加しているだけなので根本的な解決になりませんし、!が使えません（正確には、!も使えるのですがen用とja用の2種類の展開が混在することになってしまいます）。

今回使う方法はsetting.jsonからEmmetの変数を変える方法です。

まずはVisual Studio Codeの［Code］→［基本設定］→［設定］へ行って［拡張機能］→［Emmet］へ移動します。

「setting.json で編集」というリンクがあるはずなので、それをクリックしてsetting.jsonを開きます。

あとは下記のコードを追加するだけです。

"emmet.variables": {
  "lang": "ja"
},

追加したら保存して、改めて!を展開してみるとちゃんとlang="ja"で展開されました。

小さなことですが、余計な手間が減るだけでかなり快適になります。

特にコーディング作業は他にもっと注意したり意識するべきことがあるはずなので、余計なところで頭のリソースを取られないようにしたいですね。

WebDesigner's Memorandumウェブデザイナーの備忘録

Visual Studio CodeのEmmetのlang属性をjaに変更する方法

setting.jsonで設定を変える

著者について

サイトウマサカズ@31mskz10

記事一覧

目次

X（旧：Twitter）

WebDesigner's Memorandumウェブデザイナーの備忘録

setting.jsonで設定を変える

著者について

サイトウ マサカズ@31mskz10

記事一覧

目次

X（旧：Twitter）

表示設定

ダークモード

サイトウマサカズ@31mskz10