Измените язык на JSX в коде Visual Studio

Visual Studio Code теперь поддерживает JSX в версии 0.8, но, похоже, единственный способ его активировать - .jsx расширение файла. Нет возможности изменить языковой режим вручную, ближайший вариант JavaScriptReact, но он не анализирует теги JSX.

Я нахожусь в проекте с большим количеством .js файлы с JSX, и я не могу это изменить.

Есть ли другой способ использовать синтаксис JSX без .jsx расширение?

10 ответов

Решение

Измените настройки пользователя или настройки рабочего пространства, как показано ниже:

// Place your settings in this file to overwrite the default settings
{
    "files.associations": {
        "*.js": "javascriptreact"
    }
}

Примечание. Может потребоваться перезапустить VSCode.

Я чувствую, что ниже приведен самый простой способ форматирования кода

Нажмите внизу справа на VS Code Editor, где написано Javascript.

Вы увидите опцию Выбрать язык Mode, здесь вы можете найти JavaScriptReact и выбрать. Вот и все. Это должно решить вашу проблему.

1.

Я мог бы сделать это, но "не React JS-файлы" также показаны в режиме JavaScriptReact.

  1. открыть файл C:\Program Files (x86)\Microsoft VS Code\resources\app\plugins\vs.language.javascript\syntaxes\javascriptreact.json (возможно, нужно открыть с правами администратора.)
  2. измените "jsx" на "js" в массиве "fileTypes".
  3. перезапустите приложение, закройте открытые файлы js и снова откройте.

Мне понадобилось время, чтобы понять это, но - JSX уже является частью Emmet, которая является частью VS Code. Я сказал Эммету также (дополнительно) сделать фрагменты JSX доступными в обычных файлах JS.

Просто поместите это в файл настроек:

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

Хотя ответ Диониса работает, есть лучший способ сделать это в более поздних версиях кода Visual Studio.

Идти к File>Prefrences>Settings а затем прокрутите вниз и найдите "Эммет", откройте вкладку, и вы должны увидеть следующий текст

  // Enable Emmet abbreviations in languages that are not supported by default. Add a 
  mapping here between the language and emmet supported language.
  //  E.g.: {"vue-html": "html", "javascript": "javascriptreact"}
  "emmet.includeLanguages": {},

Так что просто следуйте инструкциям и добавьте "emmet.includeLanguages": { "javascript": "javascriptreact" } на JSON на правой панели (которая перезапишет пользовательские настройки).

Теперь есть расширение VS Code, которое позволяет .js файлы, которые будут рассматриваться как .jsx файлы

К сожалению, readme для расширения также предупреждает:

при установке этого расширения вы потеряете всю существующую языковую поддержку, предусмотренную для файлов.js

К счастью, VS Code сейчас очень близок к принятию Salsa, что означает, что вскоре проблема js-is-jsx должна быть полностью решена.

Нажмите в правом нижнем углу редактора кода VS, где написано Javascript . Вы увидите опцию Select the language Mode , здесь вы можете найти JavaScriptReact и выбрать. Вот и все.

1-нажмите F1 (в Visual Studio Code)

2-Введите "расширение" в появившемся текстовом поле.

3-Pick "Расширения: установить расширение"

3 типа "ext install jsx"

4- установить JS JSX Snippets

5-перезапустите код Visual Studio

Просто установите расширение:

  • Нажмите F1 (в коде Visual Studio)
  • Введите "расширение" в появившемся текстовом поле
  • Выберите "Расширения: установить расширение"
  • Тип "Ext Install JSX"
  • Перезапустите код Visual Studio

Источник:

https://code.visualstudio.com/docs/editor/extension-gallery?pub=TwentyChung&ext=jsx https://marketplace.visualstudio.com/items/TwentyChung.jsx

Попробуйте использовать ссылку на Mac или Linux.

ln -s index.ios.js index.ios.jsx
Другие вопросы по тегам