Zenn
🍽️

VSCodeのemmetにCSSやJSのリンクを入れてカスタマイズしたい

2024/06/26に公開
HTML
VS Code
tech

VScodeでhtmlを書くときに、Shift+!をするとemmetが出てきて、長いコードをすぐに入れられます。

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

このemmet、便利ですがhtml lang="en"になっていたり、style.cssへのリンクが入っていなかったり…
今回は、emmetを以下の通りにカスタマイズする方法を紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="icon" href="favicon.ico">
 <title>Document</title>
  <meta name="description" content="">
 <link rel="stylesheet" type="text/css" href="css/styles.css" />
 </head>
<body>
  
</body>
</html>

jsonファイルを編集する

VSCode＞歯車のマーク（または基本設定）＞ユーザースニペットの構成＞検索欄にhtml
html.jsonをクリック

html.jsonに以下のコードを貼り付けます。

{
	"html5": {
		"prefix": "!",
		"body": "<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>${1:Document}</title>\n <link rel=\"icon\" href=\"favicon.ico\">\n <link rel=\"stylesheet\" type=\"text/css\" href=\"css/styles.css\" />\n </head>\n<body>\n  $2\n</body>\n</html>"
	}
}

ちなみに"prefix": "!",はスニペットを使う時のショートカットのようなものです。
今回は!を指定していますが、他の単語でも大丈夫です。たとえばhtmlにすると、以下のように呼び出せます。

好みの設定を書き込む

今回は、既存のemmetから以下の内容を変更しました。

  • <html lang="en">を<html lang="ja">に
  • <link rel="icon" href="favicon.ico">でファビコンへリンクを追加
  • <link rel="stylesheet" type="text/css" href="css/styles.css" />でCSSリンクを追加

これらの変更をしたemmetを入力すると、以下のコードが生成されます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="icon" href="favicon.ico">
 <title>Document</title>
  <meta name="description" content="">
 <link rel="stylesheet" type="text/css" href="css/styles.css" />
 </head>
<body>
  
</body>
</html>

ユーザースニペットを使いやすくするために

今回変更したユーザースニペットをもっと使いやすくするために、ユーザースニペットを選択するときに一番上に表示されていると便利ですよね。

VScodeの設定＞Snippet Suggestionsから、Editor: Snippet Suggestionsのプルダウンをinlineからtopに変更しておきましょう。

これで、スニペットを使うときに先ほどカスタマイズしたものが一番上に出てくるようになりました！

Discussion