Автозаповнення JSX або HTML у коді Visual Studio


78

Чи існує спосіб використання компонентів або завершення HTML у Visual Studio Code? Оскільки вводити кожну букву вручну - це не гарна ідея, коли у нас є такі класи, як Bootstrap і т.д.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;

Відповіді:


88

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

Але якщо ви віддаєте перевагу використовувати розширення .js для всіх ваших файлів реакцій - ви можете пов'язати режим React JavaScript із файлами .js у нижньому правому куті вікна VS Code.

Як це зробити поетапно (gif)

введіть тут опис зображення


Не могли б ви пояснити останню частину ще трохи? Мені потрібно використовувати js як розширення всіх моїх файлів реакцій.
Аксель

1
З GIF не очевидно, що він натискає, ESCщоб вручну вийти з вікна intellisense перед натисканням, TABщоб отримати автозавершення.
Джош Маккерін,

4
Якщо ви віддаєте перевагу простому тексту, додайте "emmet.syntaxProfiles": { "javascript": "jsx" }до своїх налаштувань користувача ...
Джейк Рейсон

10
"emmet.triggerExpansionOnTab": true, "emmet.includeLanguages": { "javascript": "javascriptreact" } Зробив це для мене
Беням Ефрем,

174

2019: Пряма відповідь для React

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

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

Можливо, вам доведеться перезапустити код VS, щоб зміна набрала чинності.

PS Якщо ви не робите це відображення для проекту React.js, тоді відповідь KehkashanFazal, мабуть, вам підійде.


1
"javascript": ["javascript", "javascriptreact"] - щоб встановити його для файлів .js та .jsx.
Едуард

3
ЦЕ ПРАЦЮЄ! Однак! Якщо у вас увімкнені пропозиції, натискання вкладки призведе до верхньої пропозиції зі списку ... виправлення для цього полягає у встановленні затримки пропозицій за допомогою Editor: Quick Suggestions Delay. Встановіть для цього значення приблизно 600, і ви зможете ввести елемент -> вкладка натискання -> voila.
jscul

Дякую за відповідь! Це просто спрацювало як шарм!
Manikantha Nekkalapudi

52

Якщо хтось все ще бореться з цією проблемою:

Я виявив, що просто настройка

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

не дозволяє заповнення HTML. Але, використовуючи:

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

робить.

Відповідно до emmet docs :

"emmet.includeLanguages": {}

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


27

Просто виберіть відповідний режим мови внизу праворуч на екрані: встановіть його на JavaScript React.


2
вірно, я впевнений, що вам захочеться зробити це з кожним файлом великого проекту, кожного разу, коли ви повторно відкриваєте код VS ...
Джуліан Соро

Так, смішно =) Після оновлення він підтримує jsx + emmet за замовчуванням.
Донських Андрій

1
яка підтримка за замовчуванням?
Мухаммед Умер,

9

2018 рік

Я використовую VSCode (ver 1.27.2)

Базуюся на своєму досвідченому, хоча я і працюю з ним React. Виявлена ​​мова на моєму VSCode- все ще ваніль JavaScript. І Еммет не спрацював.

  • Один із способів змусити його працювати знову - це змінити VSCodeвиявлену мову на JavaScript React. Це лише для одного JSфайлу.

параметри vscode

  • Щоб повністю змінити його один раз, вам потрібно пов’язати його.

два

Клацніть Configure File Association for .js...

три

І виберіть JSX, що в моєму випадку я вже робив.

чотири

  • Для встановлення робочого місця, і триває, якщо жоден з них не працює для вас. Перейдіть до Preference of just to, 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.includeLanguages": {
    "javascript": "javascriptreact"
  },

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

Додайте таке налаштування:

  "emmet.triggerExpansionOnTab": true,

Зверніть увагу, що за допомогою цього налаштування Emmet розширюватиме всі слова як власні теги (а не лише імена компонентів React)

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

Існує активний запит на можливість потенційно видалити цей додатковий крок (автоматично розширювати при виборі пропозиції, щоб він працював так само, як і розширення стандартних тегів 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"
],

7

Проста відповідь у 2020 році

Спочатку виберіть Асоціацію файлів у правому нижньому куті вікна. введіть тут опис зображення

По-друге, виберіть Налаштувати асоціацію файлів для .js з меню, що випадає у верхній частині вікна. Змініть його на JavaScript React. введіть тут опис зображення


Дякую, це спрацювало
Mustkeem K

6

Я вирішив проблему, просто виконавши наведені нижче дії:

  1. У лівій нижній частині VSCode натисніть Javascript
  2. Потім зверху ви побачите список, натисніть "Налаштувати налаштування на основі мови" Javascript ""
  3. Додайте до файлу такі рядки:

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

Якщо ви хочете отримати докладнішу інформацію, перевірте це посилання.


4

Ви можете використовувати розширення Auto Close у коді Visual Studio. ps. коли ви встановлюєте розширення, автозаповнення не працюватиме, доки ви не перезавантажите код VS, просто повторно відкриєте код VS або не перейдете до автоматичного закриття розширення тегу та натисніть Перезавантажити.

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


2

Мені знадобилося два кроки, щоб отримати теги з автоматичним закриттям в JSX.

  1. Дотримуйтесь наведених вище інструкцій Кехкашана Фазала щодо налаштування "emmet.includeLanguages"
  2. Завантажте розширення Auto Close Tag із VSCode ( formulahendry.auto-close-tag)

А тепер у вас є приємні теги JSX з автоматичним закриттям!


2

Виконайте лише ці два кроки:

  1. Внизу VSCode, де виявити мову, натисніть на неї

1-й крок

  1. Клацніть на "Налаштувати налаштування мови" Javascript (Babel) "... або будь-що інше

2-й крок

  1. вставте на нього цей код, відокремивши його спочатку комами ',' та збережіть його.

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

3-й крок


1

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

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

1

Я працював над різними проектами і маю великий файл налаштувань.

Я перевірив налаштування і виявив, що ці налаштування все це зіпсували.

"emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly"

Тож я це прокоментував. І все працює в React Apps. Дякую


1

Працюйте лише у файлах JSX. Нехай це не працює з JS.

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

1

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

Жодна з цих відповідей не допомогла, тому я просто перезавантажив комп’ютер. Працював як шарм;)


1
  1. Просто перейдіть до налаштувань у vscode.
  2. Ви можете побачити рядок пошуку в налаштуваннях типу emmet.
  3. Прокрутіть вниз, є можливість включити мову.
  4. Натисніть кнопку Додати елемент у мові включення.
  5. Додайте елемент як javascript і значення як javascriptreact.

якщо ви заплуталися, зверніться до малюнка нижче: введіть тут опис зображення

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.