Как добавить слеш к одиночным тегам в Emmet в VS Code?

Как можно настроить VS Code так, чтобы при вводе строки "img" автоматически формировался закрывающий тег "/", чтобы получить "<img src="" alt="" />" вместо "<img src="" alt="">"?
  • 7 января 2024 г. 22:47
Ответы на вопрос 2
Особенность автозакрытия одиночных тегов (self-closing tags) в Emmet зависит от настройки синтаксиса (HTML или XHTML) и может управляться с помощью настроек в файле конфигурации Emmet.

Чтобы настроить Emmet в Visual Studio Code для добавления слеша к одиночным тегам, выполните следующие шаги:

1. Откройте настройки VS Code. Можно использовать сочетание клавиш Ctrl+, (запятая) на Windows/Linux или Cmd+, (запятая) на macOS.

2. В строке поиска введите `emmet`, чтобы найти настройки Emmet.

3. Найдите раздел Emmet, а затем настройку `emmet.syntaxProfiles`. Она позволяет определять пользовательские синтаксические профили.

4. Чтобы добавить настройки напрямую в файл `settings.json`, нажмите на иконку с фигурными скобками {} (или выберите "Открыть настройки (JSON)" в сплывающем меню рядом с поиском).

5. В файл `settings.json` добавьте следующую конфигурацию:

```json
"emmet.syntaxProfiles": {
    "html": {
        "self_closing_tag": true
    }
}
```

Этот фрагмент настроек указывает Emmet добавлять слеш к одиночным тегам (например, `<br />`, `<img />`) при генерации HTML.

6. Сохраните файл `settings.json` и закройте его.

После этих изменений, когда вы введете `img` и нажмете Tab, Emmet сгенерирует `<img src="" alt="" />` вместо `<img src="" alt="">`.

Убедитесь, что у вас установлено расширение Emmet в VS Code и что оно активировано для текущего файла. Обычно Emmet включен по умолчанию в Visual Studio Code для файлов HTML.

Также стоит отметить, что некоторые современные браузеры и HTML5 не требуют слеша для одиночных тегов, и такой формат `<img src="" alt="">` является допустимым. Добавление слеша — это вопрос личных предпочтений или соответствия старым стандартам XHTML.
Пропишите это в settings.json 

Ну и в целом, прикладываю: https://docs.emmet.io/customization/syntax-profiles/
Похожие вопросы