Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to EDIT built-in Emmet abbreviations in VSC?

I'd like to be able to edit default behaviour of "!" instead of creating my own version of "!" from scratch.

Is it possible to edit (tweak) default behaviours of Emmet abbreviations in VSC?

like image 731
Morfidon Avatar asked Jun 09 '21 08:06

Morfidon


People also ask

Is Emmet built into VS code?

Support for Emmet snippets and expansion is built right into Visual Studio Code, no extension required. Emmet 2.0 has support for the majority of the Emmet Actions including expanding Emmet abbreviations and snippets.


1 Answers

Yes! From the docs:

Custom Emmet snippets need to be defined in a json file named snippets.json. The emmet.extensionsPath setting should have the path to the directory containing this file.

{
  "html": {
    "snippets": {
      "ull": "ul>li[id=${1} class=${2}]*2{ Will work with html, pug, haml and slim }",
      "oll": "<ol><li id=${1} class=${2}> Will only work in html </ol>",
      "ran": "{ Wrap plain text in curly braces }"
    }
  },
  "css": {
    "snippets": {
      "cb": "color: black",
      "bsd": "border: 1px solid ${1:red}",
      "ls": "list-style: ${1}"
    }
  }
}

More info here.

You can also modify existing blocks using filters.

like image 95
Tim Avatar answered Oct 03 '22 09:10

Tim