Автозаполнение JSX или HTML в коде Visual Studio

Есть ли способ использовать компоненты или HTML-код в Visual Studio Code? Поскольку ввод каждой буквы вручную не является хорошей идеей, когда у нас есть классы, такие как Bootstrap и т.д. Например, завершение как в Emmet: ul>li*2>a

var React = require('react');

var Header = React.createClass({
    render: function () {
        return (

            <nav className="navbar navbar-defaullt">
                <div className="container-fluid">
                    <a href="/" className="navbar-brand">
                        <img width="50" height="50" src="images/logo.png" alt="logo" />
                    </a>
                    <ul className="nav navbar-nav">
                        <li><a href="/">Home</a></li>
                        <li><a href="/#about">About</a></li>
                    </ul>
                </div>
            </nav>

                );
                }
                });
module.exports  = Header;

Ответы

Ответ 1

Код Visual Studio обнаруживает расширения .jsx и добавляет поддержку emmet по умолчанию (я использую VS code 1.8.1)

Но если вы предпочитаете использовать расширение .js для всех ваших реагирующих файлов - вы можете связать режим JavaScript React с файлами .js в правом нижнем углу окна VS Code.

Как сделать это шаг за шагом (GIF)

Ответ 2

2019: прямой ответ на React

Самый простой способ получить автозаполнение JSX/HTML в ваших проектах React - добавить его в свои пользовательские настройки или настройки рабочего пространства (<project-path>/.vscode/settings.json):

      "emmet.includeLanguages": {
        "javascript": "javascriptreact"
      },
      "emmet.triggerExpansionOnTab": true

Возможно, вам придется перезапустить VS Code, чтобы изменения вступили в силу.

PS Если вы не делаете это отображение для проекта React.js, то ответ KehkashanFazal, вероятно, должен работать для вас.

Ответ 3

Если кто-то все еще борется с этой проблемой:

Я обнаружил, что просто установка

"emmet.syntaxProfiles": {
     "javascript": "jsx" 
 },

не позволяет завершить HTML. Но, используя:

"emmet.includeLanguages": {
    "javascript": "html"
}

делает.

Согласно emmet docs:

"emmet.includeLanguages": {}

Включить аббревиатуры emmet на языках, которые по умолчанию не поддерживаются. Добавьте сопоставление между языком и поддерживаемым emmet языком.
Например: {"vue-html": "html", "javascript": "javascriptreact"}

Ответ 4

Просто выберите соответствующий Режим языка в правом нижнем углу экрана: установите значение JavaScript React.

Ответ 5

Ни одно из этих решений не сработало... но расширение Auto Close Tag работает! https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

Ответ 6

2018

Я использую VSCode (ver 1.27.2)

Основывайтесь на моем опыте, хотя я работаю с React. Обнаруженный язык в моем VSCode все еще ванильный JavaScript. И Эммет не работал.

Один из способов заставить его работать снова - изменить VSCode обнаружения VSCode на JavaScript React. Это только для одного файла JS.

Чтобы полностью изменить его, вам нужно связать его.

Нажмите Configure File Association for.js...

И выберите JSX, что в моем случае я уже сделал.

Для настройки рабочего места, и последний, если ни один из них не работает для вас. Перейдите в Предпочтение просто ctrl +, (comma) чтобы открыть его.

Тип и поиск emmet или Emmet. Затем скопируйте настройку, которую вы хотите переопределить. В моем случае:

{
    "emmet.triggerExpansionOnTab": true,
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },
}

Примечание: я не пытался использовать jsx только javascriptreact.

Я реализовал второй и третий шаг. И теперь я могу сделать Emmet.

Ответ 7

2019 Обновление

Автоматическое закрытие тегов в .html,.js и .jsx

Работает из коробки. То есть после ввода закрывающей скобки для открывающего тега закрывающий тег будет вставлен автоматически.

Emmet с базовым HTML в .jsx файлах

Работает из коробки.

Emmet с базовым HTML в файлах .js:

Добавьте следующий параметр, необходимый для предложений сокращения Emmet и необходимый для последовательной работы расширения вкладок.

  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },

Emmet с пользовательскими тегами (например, React Components) в файлах .js и .jsx

Добавьте следующий параметр:

  "emmet.triggerExpansionOnTab": true,

Обратите внимание, что с этим параметром Emmet будет расширять все слова как пользовательские теги (а не только имена компонентов React).

Также обратите внимание, что при использовании Emmet для расширения компонентов React в качестве пользовательских тегов необходимо фактически выбрать имя компонента из списка предложений и сначала заполнить его (или вручную ввести полное имя и закрыть меню предложений с помощью клавиши escape). После того, как слово развернется, вам придется снова перейти на вкладку, чтобы Эммет развернул пользовательский тег.

Есть запрос активной функции, чтобы потенциально удалить этот дополнительный шаг (автоматически расширяется при выборе предложения, чтобы он работал так же, как и при расширении стандартных тегов html).

Поиск проблемы

Убедитесь, что у вас последняя версия VSCode.

Убедитесь, что вы не изменили следующие настройки по умолчанию:

"html.autoClosingTags": true,
"javascript.autoClosingTags": true,
"typescript.autoClosingTags": true,

// read the GitHub issue listed above if you're curious why this is required).
"editor.wordBasedSuggestions": true,

// you obviously don't want javascript, javascriptreact included in here if you want Emmet to be available in those files
"emmet.excludeLanguages": [
    "markdown"
],

Ответ 8

Вы можете использовать расширение Auto Close в коде Visual Studio. пс. Когда вы устанавливаете расширение, автозаполнение не будет работать до тех пор, пока вы не перезагрузите VS Code, просто заново откроете VS Code или перейдете к автоматическому закрытию расширения тега и нажмете "Перезагрузить".

ссылка Расширение тега автоматического закрытия

Ответ 9

Я решил проблему, просто выполнив следующие действия:

В левом нижнем углу VSCode нажмите на Javascript
Затем в верхней части вы увидите список, нажмите "Настроить настройки на основе языка" Javascript ""

Добавьте эти строки в файл:

"emmet.triggerExpansionOnTab": true,
 "emmet.includeLanguages": {
   "javascript": "javascriptreact"
}

Если вы хотите более подробную информацию, вы можете проверить эту ссылку.

Ответ 10

Мне потребовалось два шага, чтобы получить автоматически закрывающиеся теги в JSX.

Следуйте инструкциям Kehkashan Fazal выше по настройке "emmet.includeLanguages"
Загрузите расширение Auto Close Tag из VSCode (formulahendry.auto-close-tag)

И теперь у вас есть хорошие автоматически закрывающиеся теги JSX!

Ответ 11

Выполните только эти два шага:

В нижней части VSCode, где определяется язык, нажмите на это.

1-й шаг

Нажмите "Настроить языковые настройки на основе Javascript (Babel)..." или что-либо еще

2-й шаг

сначала вставьте этот код отдельно через запятую ',' и сохраните его.

"emmet.includeLanguages": { "javascript": "javascriptreact" }, "emmet.triggerExpansionOnTab": true

3-й шаг

Ответ 12

Я пошел бросить все ответы, и этот конфиг работал для меня. пришлось включить язык, а также добавить синтаксисProfile. без расширения триггера ничего не получалось, но теперь я нажимаю только клавишу Tab, чтобы получить результат.

"emmet.includeLanguages": {
    "javascript": "javascriptreact"
},
"emmet.syntaxProfiles": {
    "javascript": "jsx"
},
"emmet.triggerExpansionOnTab": true

Ответ 13

Автозаполнение для React Babel работало нормально до вчерашнего дня для меня.

Ни один из этих ответов не помог, поэтому я просто перезагрузил компьютер. Работал как шарм;)

Ответ 14

Работают только в файлах JSX. Пусть это не работает с JS.

"files.associations": {
"*.js": "javascript",
"*.jsx": "javascriptreact",
},
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
    "javascriptreact": "javascriptreact"
},

Ответ 15

Я работал над различными проектами, и у меня есть большой файл настроек.

Я проверил настройки и обнаружил, что эти настройки разрушают все.

"emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly"

Я прокомментировал это. И все прекрасно работает в приложениях React. Спасибо