vscode emmet, как расширить div. <div styName = ''> </div>, кроме <div className = ""> </div>

Question

Я работаю в реагирует с реагирует-css-модуль . в jsx emment предоставляет className для расширения. но теперь я хочу расширить:

anytagName. (или anytagName,)

до

<anyTagName styleName=''></anyTagName>

Чтобы сделать двойные кавычки к одинарным, я прочитал несколько документов и решил эту проблему.

"emmet.syntaxProfiles": {
    "html": {
        "attr_quotes": "single"
    },
    "jsx": {
        "attr_quotes": "single",
        "self_closing_tag": true
    }
}

Как мне сделать что-то для атрибута styleName?

Answer 1

открытые фрагменты

шаг1: откройте свои области кода пользователя, как указано выше. выберите javascript.json. Его каталог ~/Library/Application Support/Code/User/snippets.

step2: настройте свои фрагменты, как это. { "div, react-css-module in js": { "prefix": "div,", "body": [ "<div styleName='$1'>$2</div>", ], "description": "" }, "p, react-css-module in js": { "prefix": "p,", "body": [ "<p styleName='$1'>$2</p>", ], "description": "" }, "span, react-css-module in js": { "prefix": "span,", "body": [ "<span styleName='$1'>$2</span>", ], "description": "" }, "img, react-css-module in js": { "prefix": "img,", "body": [ "<img styleName='$1' alt= '$2'", " src={$3}", " srcSet={`", " ${$4} 2x", " ${$5} 3x", " `} ", "/>", ], "description": "" }, "image path": { "prefix": "imgpath", "body": [ "'/easicare-mobile/static/images/pages/$1';" ] } }

, поэтому введите div,, выберите предложение, затем нажмите ввод, чтобы развернуть до <div styleName='$1'>$2</div>.

Answer 2

См. Мой отредактированный ответ Переменная фрагмента Vscode

Это можно сделать с помощью простого связывания клавиш или расширения emmet. Вот комбинация клавиш:

{
    "key": "ctrl+alt+n",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
      "snippet": "<${TM_SELECTED_TEXT} styleName='$1'>$0<\/${TM_SELECTED_TEXT}>"
    }
}

Выберите любое связывание клавиш, которое вы хотите. Выберите ваш anyTag, нажмите на связку клавиш, и она будет расширяться по вашему желанию.

anytagName становится <anytagName styleName=''></anytagName>

Нет emmet, и нет расширения вкладки - только select и keychord. Маршрут расширения emmet на самом деле более сложный. Я добавлю это позже.