3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

CSSAdvent Calendar 2022

Day 24

VSCodeのEmmetのCSSを使いやすくする

Posted at

Emmetの前身であるZen-Codingの時から、CSSの展開をよく使用していました。
Zen-Coding時代から考えると10年以上使用しており、EmmetがないとCSSが書けない体になっています。

ただブラウザの新しいCSSのプロパティや値の追加と、Emmetのスニペットの乖離が、ここ数年でよく見られるようになりました。
Emmetのスニペットの追加方法について、記載します。

snippets.json

まずはスニペットを格納するディレクトリを用意し、 snippets.json を作成します。
ディレクトリ名や場所はどこでも構いません。

snippets.jsonにスニペットを記述します。
下記のコードは雛形です。

{
  "html": {
    "snippets": {
	  "a-b": "<a href=\"${1}\" target=\"_blank\" rel=\"noopener\"></a>"
    }
  },
  "css": {
    "snippets": {
	  "ct": "content:'${1}'"
    }
  }
}

htmlcss より、スニペットを格納できます。
snippets の中に記述していくのですが、 "ct": "content:'${1}'" の記述を解説していきます。
左側のキー ct は、省略文字です。
右側の値 content:'${1}' は、 ct から展開されるCSSの宣言です。
宣言の中に ${1} とありますが、これはキャレットや数値の代入位置になります。

さらにCSSを増やしてみましょう。

{
  "html": {
    "snippets": {
	  "a-b": "<a href=\"${1}\" target=\"_blank\" rel=\"noopener\"></a>"
    }
  },
  "css": {
    "snippets": {
      "ct": "content:'${1}'",
      "Lis": "inset:${1}",
      "Lmy": "margin-block:${1}",
      "Lmx": "margin-inline:${1}",
      "Lpy": "padding-block:${1}",
      "Lpx": "padding-inline:${1}",
      "g": "gap:${1}",
      "@u": "@use ${1} {\n\t\n}"
    }
  }
}

このようにスニペットを増やせます。
そして省略文字のルールも自分で自由に設定できるのも魅力です。

例えば、Emmetでは m, mt, mb などで、marginプロパティを展開することができます。
ただ新しく使用できるようになった margin-block を定義しようとしても、すでに mbmargin-bottom によって使用されています。
そのため Logical Propertiesの L を接頭辞として Lmymargin-block を展開。
Lmb で論理プロパティの通常フローの下流の margin-block-end を展開するというルールも自分でセットできます。

もちろんEmmetなので、 Lmy8 とすれば margin-block: 8px; 。
Lmy8-100p とすれば margin-block: 8px 100%; と展開してくれます。

実際のVSCodeでの記入例
スクリーンショット 2022-12-23 23.53.25.png

設定

snippets.json ができたら、スニペットを追加します。

VSCodeの [Preferences (⌘,)]から環境設定を表示。
環境設定の検索画面から emmet Extensions Path で検索。
スクリーンショット 2022-12-23 23.57.48.png
Extensions Path の項目に、任意のディレクトリ名までのパスを記述してください。

注意点として、必ず snippets.json が入っている「ディレクトリ名のパス」を入力してください。
snippets.json などのファイル名を含めると動きません。

それでは、よいCSSを。

3
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?