/ vscode-react-native

Стабильный:

Предварительный просмотр:

React Native Tools Preview

У расширения есть ночная версия, которая выпускается ежедневно в 21:00 по тихоокеанскому стандартному времени каждый день, когда происходят изменения. Во избежание конфликтов, если установлены оба расширения, будет активирована единственная стабильная версия. Итак, чтобы использовать предварительную версию, необходимо отключить или удалить стабильную версию и перезагрузить VS Code.

О расширении

Это расширение VS Code предоставляет среду разработки для проектов React Native. Используя это расширение, вы можете отлаживать свой код и быстро запускать команды react-native из палитра команд.

• React Native Tools Предварительный просмотр
• О расширении
• Начало работы
• Команды React Native на палитре команд
• Отладка Приложения React Native
  • Приложения Hermes (Android)
  • Приложения iOS
    • Устройства iOS
    • Пользовательская схема для приложений iOS
    • Прямая отладка iOS
  • Приложения Expo
    • Настройка Expo
  • Приложения Windows
  • приложения macOS
  • Приложения на основе TypeScript и Haul
  • Отладчик con свойства конфигурации
• Настройка
  • Ведение журнала
  • Соберите APK и сгенерируйте пакет
  • Указание настраиваемых аргументов для команды run- *
  • Настройка упаковщика React Native
  • Изменить проект root
  • Настроить Android LogCat Monitor
• Разработка внутри контейнера Docker
• Участие
• Известные проблемы

Прежде чем идти дальше, убедитесь, что у вас:

• рабочая среда React Native. .
• используют VS Code и установили это расширение из Marketplace.
• откройте корневую папку проекта React Native в VS Code.

Обратите внимание, что расширение использует каталог .vscode/.react в корне проекта для хранения промежуточных файлов, необходимых для отладки. Хотя эти файлы обычно удаляются после завершения сеанса отладки, вы можете добавить этот каталог в файл .gitignore вашего проекта.

В палитре команд введите React Native и выберите команду.

Команда Run Android запускает react-native run-android и запускает ваше приложение для Android.

Команда Run iOS аналогичным образом запускает run-ios для реакции и запускает ваше приложение в симуляторе iOS (например, iPhone 6)..

Команды Packager позволяют запускать/останавливать Metro Bundler (ранее React Packager).

Полный список команд:

Чтобы начать отладку, создайте новую конфигурацию отладки для вашего приложения ReactNative в вашем .vscode/launch.json . Добавить новую конфигурацию можно, открыв файл launch.json , нажав кнопку Добавить конфигурацию ... и выбрав соответствующую конфигурацию отладки.. Доступ ко всем доступным конфигурациям отладки для ReactNative можно получить, набрав ReactNative и выбрав одну из списка, заполненного Intellisense, как показано на изображении ниже.

Если вы не создали .vscode/launch.json файла, вы можете добавить полный набор конфигурации отладки по умолчанию. Для этого щелкните значок отладки на панели просмотра, а затем щелкните значок конфигурации (шестеренки) , затем выберите среду отладки React Native.

VS Code сгенерирует launch.json в вашем проекте с некоторыми настройками конфигурации по умолчанию, как показано ниже. Вы можете безопасно закрыть этот файл, выбрать подходящую конфигурацию в раскрывающемся списке «Конфигурация», а затем нажать F5 (или нажать Зеленая стрелка ), чтобы начать отладку приложения в VS Code.

После загрузки и запуска приложения откройте меню разработчика внутри приложения и включите удаленную отладку, нажав кнопку Удаленная отладка JS .

Расширение позволяет вам отлаживать несколько устройств и конфигураций. Пожалуйста, прочтите следующие разделы для получения дополнительной информации для вашего конкретный вариант использования.

Hermes (Android)

Hermes — это новый движок JavaScript, оптимизированный для запуска приложений React Native на Android. Это улучшает производительность приложения и уменьшает размер приложения.

Нажмите здесь, чтобы узнать больше о Hermes.

Отладка приложений с включенным Hermes в настоящее время является экспериментальной. Пожалуйста, просмотрите эту проблему, чтобы узнать о текущих известных проблемах в поддержке Hermes.

Для отладки при использовании движка Hermes выберите одну из следующих конфигураций отладки:

• React Native Direct: отладка Android Hermes — экспериментальная

 {"name": "Отладка Android Hermes - экспериментальная", "cwd": "$ {workspaceFolder  } "," тип ":" reactnativedirect "," запрос ":" запуск "," платформа ":" android "} 

• » React Native Direct: Присоединить к React Native Hermes — экспериментальный

 {"name": "Присоединить к React Native Hermes - экспериментальный", "cwd": "$ {workspaceFolder  } "," type ":" reactnativedirect "," request ":" attach "} 

Приложения iOS

Устройства iOS

Отладка на устройстве iOS требует следующих действий вручную:

• Установите ios-deploy npm install -g ios-deploy .
• Установите действующий сертификат разработки iOS.
• В вашего проекта запускать. json для target установлено устройство . Если вам нужно указать точное устройство для запуска, вы можете установить для target значение device= , или вы также можете использовать runArguments , чтобы указать конкретное устройство для запуска в случае подключения нескольких устройств (например, "runArguments": ["--device", "My iPhone"] )
• Выберите вариант Отладка iOS в раскрывающемся списке «Конфигурация» и нажмите F5.
• Встряхните устройство, чтобы открыть меню разработки, и выберите «Отладка JS удаленно».

Пользовательская схема для приложений iOS

Если вы хотите использовать пользовательскую схему для своего приложения вы можете либо передать его как часть аргументов параметра runArguments , либо установить параметр конфигурации scheme , как показано ниже:

 "runArguments": ["--scheme", "customScheme", ...]//или "runArguments": ["--scheme = customScheme", ...]//или  "scheme": "customScheme" 

Имейте в виду, указывая значение схемы как часть аргументов параметра runArguments переопределит значение параметра конфигурации scheme , если оно задано.

Прямая отладка iOS

Расширение обеспечивает экспериментальную поддержку прямой отладки iOS. Подробнее см. Здесь: react-native-community/discussions-and-предложения # 40, react-native-community/sessions-and-предложения # 206

Чтобы иметь возможность отлаживать приложение iOS напрямую , вам необходимо установить ios-webkit-debug-proxy:

• Установите HomeBrew на свой Mac.
• Откройте терминал и запустите brew install ideviceinstaller ios-webkit-debug-proxy

Для прямой отладки приложений iOS можно использовать следующие сценарии отладки:

• React Native Direct: отладка Direct iOS — экспериментальная

 "name": "Прямая отладка iOS - экспериментальная", "cwd": "  $ {workspaceFolder} "," type ":" reactnativedirect "," request ":" launch "," platform ":" ios "," port ": 9221 

• React Native Direct: присоединение к React Native iOS — экспериментальное

 "name": "Присоединение к React Native iOS - экспериментальное", "cwd  ":" $ {workspaceFolder} "," type ":" reactnativedirect "," request ":" attach "," platform ":" ios "," port ": 9221 

Приложения Expo

Для отладки проекта, созданного с помощью Expo или задачи create-react-native-app , вы можете использовать встроенную поддержку для Expo.

Подготовьте среду, следуя инструкциям по быстрому запуску Expo CLI. Для корректной работы с Expo это расширение требует Android SDK . Также обратите внимание на вкладку React Native CLI Quickstart , где вы можете найти руководство по установке Android SDK:

• Установите приложение Expo на целевое устройство или эмулятор.
• Убедитесь, что на вашем компьютере установлен Android SDK (вы можете установить его с помощью React Native CLI Quickstart guide)
• Убедитесь, что expo-cli установлен глобально ( npm install -g expo-cli )

Проверить, что все работает правильно и среда готова к использованию, можно с помощью команды npx react-native doctor .

Чтобы начать отладку в Expo, выполните следующие действия:

1. Откройте свой проект в VS Code с установленным расширением.

2. Создайте конфигурацию отладки (как описано в разделе «Отладка приложений React Native»), выберите Отладка в экспоненте в раскрывающемся меню отладки и запустите отладка

3. Подождите, пока s Некоторые зависимости настроены — расширение установит Expo Development Library (@ expo/xdl) , когда эта функция используется в первый раз.

4. Если вы раньше не использовали Exponent в этой системе, вам будет предложено ввести имя пользователя и пароль Exponent. Учетная запись Exponent позволяет использовать облачные сервисы Expo. Более подробную информацию о том, как это работает, можно найти здесь. Если вы не создали учетную запись Exponent, то при указании нового имени пользователя и пароля она будет создана. Обратите внимание, что с учетной записью не связана никакая электронная почта и нет способа восстановить забытые пароль. Если вы не хотите создавать учетную запись Exponent, вы можете указать параметр expoHostType в своей конфигурации отладки, чтобы Expo работал локально (через локальную сеть или на localhost).

5. После запуска упаковщика расширение откроет отдельную вкладку с QR-кодом для сканирования из приложения Exponent. Как только вы это сделаете, приложение Exponent подключится к упаковщику и запустит ваше приложение.

6. После загрузки и запуска приложения откройте меню разработчика и включите удаленную отладку, нажав кнопку Удаленная отладка JS .

   

   Отсюда вы можете запускать и отлаживать приложение как обычно.

Настройка Expo

Расширение поддерживает запуск через Exponent не только приложений, созданных с помощью Expo, но даже приложений на чистом React Native (в этом случае вам нужно добавить пакет expo в node_modules , чтобы он работал с Expo: npm install expo --save-dev . В любом случае он использует app.json файл конфигурации в корне проекта.

Если вы используете конфигурацию Debug in Exponent или любую из команд палитры, например Run in Exponent , Опубликуйте в Exponent , тогда этот файл будет создан автоматически, если он отсутствует, или обновлен следующим разделом базовой конфигурации:

 {"expo": {"slug": "  MyApp ",//Заголовок проекта" name ":" MyApp ",//Название проекта" sdkVersion ":" 31.0.0 ",//Expo SDK версии" entryPoint ":" .vscode \ exponentIndex.js "//Точка входа  для проекта}, "name": "MyApp"//Название проекта} 

Полный список параметров конфигурации для раздела expo в app.json можно найти на официальной странице документации Expo.

Для запуска приложения pure React Native расширение создает и использует .vscode/exponentIndex.js , который указывает на точку входа приложения ( index.js или index.android.js или index.ios.js ).

Если вы хотите изменить свой точка входа в приложение (например, от index.js до index.android.js ), удалите .vscode/exponentIndex.js , а затем перезапустите сеанс отладки.

ПРИМЕЧАНИЕ : расширение кэширует версию SDK экспоненты, используемую вашим проектом. Это полезно, поскольку мы не хотим устанавливать SDK каждый раз, когда вы запускаете экспоненту. Если вы хотите, чтобы расширение обновляло версию SDK на основе вашей версии React Native, просто перезапустите VS Code, и если оно поддерживается, оно должно работать. Если это не помогло, откройте проблему.

React Native для Windows

Как для запуска и отладки приложения React Native для Windows

Вы можете отлаживать приложения UWP и WPF React Native для Windows, изменив платформу в вашем Конфигурация launch.json :

• Для UWP используйте windows :

   {"name": "Debug UWP", "cwd": "$ {workspaceFolder}", "type": "reactnative", "request": "запуск  "," platform ":" windows "} 

• Для WPF используйте wpf :

   {"name": "Отладка WPF", "cwd": "$ {workspaceFolder}", "type": "reactnative", "request  ":" launch "," platform ":" wpf "} 

Как подключиться к запущенному React Native для приложения Windows

1. Добавьте конфигурацию Attach to packager в .vscode/launch. json в вашем проекте

    {"name": "Присоединить к упаковщику", "cwd": "$ {workspaceFolder}", "type": "reactnative  "," request ":" attach "} 

2. ( Необязательно ) Запустите Metro packager с помощью команду React Native: Start Packager Command Palette или запустите команду npx react-native start в терминале в корневой папке проекта

3. Выберите конфигурацию Присоединиться к упаковщику и нажмите кнопку play . Если упаковщик Metro еще не запущен, расширение запустит его автоматически.

4. Запустите приложение React Native Windows. Убедитесь, что приложение находится в режиме удаленной отладки.

Затем расширение должно подключиться к запущенному приложению.

Вы можете дополнительную информацию о том, как настроить приложение для работы с Windows, можно найти в React Native для Windows. Инструкция по началу работы

React Native для macOS

Вы можете отлаживать React Native для приложений macOS, изменив платформу в конфигурации launch.json на macos :

 {"name": "Отладка macOS", "cwd": "$ {workspaceFolder}", "type": "reactnative", "request": "запуск"  , "platform": "macos"} 

Чтобы присоединиться к работающему приложению macOS, вы можете использовать конфигурацию отладки Attach to packager по умолчанию. Убедитесь, что приложение находится в режиме удаленной отладки.

 {"name": "Присоединить к упаковщику", "cwd": "$ {workspaceFolder}", "type  ":" reactnative "," request ":" attach "} 

Дополнительную информацию о том, как настроить приложение для работы с macOS, можно найти в React Native для macOS. Инструкция по началу работы.

TypeScript и Haul

Sourcemaps

отладчик использует исходные карты, чтобы вы могли отлаживать исходные источники, но иногда исходные карты не создаются должным образом и требуются переопределения. В конфигурации мы поддерживаем sourceMapPathOverrides , отображение исходных путей из карты источников в расположение этих источников на диске. Полезно, когда исходная карта неточна или не может быть исправлена ​​в процессе сборки.

Левая часть сопоставления — это шаблон, который может содержать подстановочный знак и будет протестирован на соответствие Запись sourceRoot + sources в исходной карте. Если он совпадает, исходный файл будет преобразован в путь с правой стороны, который должен быть абсолютным путем к исходному файлу на диске..

Ниже приведены несколько примеров того, как исходные карты могут быть разрешены в различных сценариях:

//webRoot =/Users/me/project "sourceMapPathOverrides  ": {" webpack:///./~/* ":" $ {webRoot}/node_modules/* ",//Пример:" webpack:///./~/querystring/index.js "->" /Users/me/project/node_modules/querystring/index.js "" webpack:///./* ":" $ {webRoot}/* ",//Пример:" webpack:///./src/app  .js "->"/Users/me/project/src/app.js "," webpack:///* ":" * ",//Пример:" webpack:///project/app.ts "-  > "/project/app.ts" "webpack:///src/*": "$ {webRoot}/*"//Пример: "webpack:///src/app.js" -> "/Users/ me/project/app.js "} 

Отладка Haul

Расширение предоставляет функциональные возможности для подключения к Haul приложения на базе упаковщика. Вы можете использовать сценарий Attach to packager , чтобы присоединиться к приложению на основе Haul и отладить его. На данный момент сценарии запуска не поддерживаются. Дополнительную информацию можно найти в проблеме.

Вы можете подготовить свое приложение React Native для работы с Haul , следуя инструкциям Haul Приступая к работе guide.

Если вы используете устаревшую версию Haul в качестве сборщика React Native вместо стандартного Metro, может потребоваться добавить sourceMapPathOverrides в файл launch.json .

Например:

  {//Другие конфигурации "sourceMapPathOverrides": {"webpack:///./~/*": "$ {workspaceRoot}/node_modules/*", "webpack:///./*": "$ {workspaceRoot} /* "," webpack:///* ":" * "}} 

Свойства конфигурации отладчика

Ниже приводится список всех свойств конфигурации, которые принимает отладчик в launch.json :

Расширение можно дополнительно настроить для других сценариев React Native.. Это наиболее распространенные:

Ведение журнала

Ведение журнала расширения разделено на несколько выходных каналов:

• React Native — основной канал расширения, который собирает выходные данные от React Native Packager и показывает критические ошибки в расширении.
• Эти каналы создаются только при выполнении определенного сценария запуска :
  • React Native: запустите Android
    • LogCat monitor (для получения выходных данных LogCat с устройства Android можно отфильтровать с помощью параметров конфигурации отладки)
  • React Native: запускать iOS
  • React Native: запускать macOS
  • React Native: запускать экспоненту
• Консоль отладки, которая используется для получения журналов приложений и журналов, созданных адаптером отладки ( console.log и другие std выводятся из приложения)
• Подробные журналы отладчика расширения (эти журналы отображаются, только если в сценариях отладки включен параметр trace: "verbose" )
  • React Nati ve Chrome Proxy — показывает, что выполняется в отладчике и приложении.
  • Консоль отладки становится более информативной и содержит некоторую отладочную информацию из адаптера отладки.
  • Глобальные ошибки расширения контролируются VS Code и печатаются в инструментах разработчика VS Code.

Существуют также некоторые технические журналы глобальных расширений, которые могут отображаться на выходе. Чтобы увидеть их, установите следующие свойства:

 {"react-native-tools": {"logLevel": "Trace"}} 

logLevel может иметь значение None (без журналов), Error , Предупреждение , Info , Debug , Trace (все журналы). По умолчанию: Info.

Скомпилируйте APK и сгенерируйте пакет

Вы можете добавить задачи VSCode для создания файла .apk и создания пакетов iOS/Android.

Ниже приводится пример файла tasks.json для проектов response-native init . Поместите его в папку .vscode в своем проекте, чтобы использовать:

 {"версия": "2.0.0", "презентация": {"показывать": "всегда", "панель": "новый"}, "задачи": [{"taskName": "Сборка APK Отладка  "," group ":" build "," type ":" shell "," windows ": {" command ":" cd android; if ($?) {./gradlew assemblyDebug} "}," linux ": {  "command": "cd android && ./gradlew AssemblyDebug"}}, {"taskName": "Build APK Release", "group": "build", "type": "shell", "windows": {"command  ":" cd android; if ($?) {./gradlew assemblyRelease} "}," linux ": {" command ":" cd android &&./gradlew assemblyRelease "}}, {" taskName ":" Создать пакет Android "," group ":" build "," type ":" shell "," command ":" react-native bundle --platform android --dev  false --entry-file index.js --bundle-output android/main.jsbundle "}, {" taskName ":" Создать пакет iOS "," group ":" build "," type ":" shell ","  команда ":" response-native bundle --platform ios --dev false --entry-file index.js --bundle-output ios/main.jsbundle "}]} 

Чтобы узнать больше о задачах в VSCode, прочтите официальную документацию.

Посетите страницу создания подписанного APK, чтобы узнать больше по этой теме.

Указание настраиваемых аргументов для react-native run- * command

Использование настраиваемых аргументов запуска для react -native run- : ПРИМЕЧАНИЕ. Это переопределяет все другие параметры конфигурации.

 {"react-native.  android.runArguments.simulator ": [" --appFolder ","/Users/test/AwesomeProject/android/app "," --deviceId "," emulat  or-5555 "]," react-native.ios.runArguments.device ": [" --project-path "," ios "," --device "," Max's iPhone "]} 

ПРИМЕЧАНИЕ. Вы можете получить список установленных устройств симулятора с помощью:

устройств iOS (только macOS):

  xcrun simctl list --json devices  

Android-устройства:

  adb-устройства  

ПРИМЕЧАНИЕ. Если вы хотите запустить приложение на устройстве iOS, убедитесь, что у вас установлен ios-deploy . глобально.

npm install -g ios-deploy

Настройка React Native packager

Чтобы использовать настраиваемый порт для упаковщика react-native :

 {"react-native  ": {" packager ": {" port ": portNumber}}} 

Если вы измените этот порт, то для устройств iOS и сценариев симулятора вам придется изменить собственный код файлы. Инструкции здесь.

Если вы используете Android, вам необходимо изменить сервер отладки:

1. CTRL + M ( CMD + M ) в эмуляторе.
2. Перейдите в Настройки разработчика
3. Хост сервера отладки для устройства => введите localhost: .
4. Перезагрузите приложение (дважды нажмите R )
5. (только Hermes) движок Hermes по умолчанию прослушивает порт 8081 для отладки, чтобы изменить его, вам может потребоваться изменить файл metro.config.js , добавив "port": аргумент portNumber в настройках сервера.

//Пример metro.config.jsmodule.exports = {server  : {port: 9091,},}; 

ПРИМЕЧАНИЕ. Некоторые аспекты React Native жестко устанавливают порт на значение по умолчанию как указано в этой проблеме.

Пользовательские переменные среды

Расширение поддерживает передачу пользовательских переменных среды в контекст процесса React Native Packager. Чтобы добавить пользовательские переменные, вы можете создать файл .env в корневой папке вашего проекта и добавить необходимые переменные среды в следующем формате:

   Variable1_name = Variable1_valueVariable2_name = Variable2_value  

Переменные, объявленные в этом файле .env , могут переопределять исходные переменные среды из процесса . env процесса Packager.

Можно передавать переменные среды (с помощью аргументов env и envFile в launch.json ) из lau nch или прикрепите сценарии отладки к Packager. Если эти переменные определены, они будут использоваться, в противном случае используется файл .env .

Изменить корень проекта

Чтобы указать подпапку, в которой находится проект, поддерживающий реакцию, установите react-native-tools.projectRoot . Здесь вы можете использовать абсолютный или относительный путь:

 {"react-native-tools": {"projectRoot": "./your/react-native/project"  }} 

Настроить Android LogCat Monitor

Есть два способа отфильтровать вывод LogCat Monitor в зависимости от как был запущен LogCat Monitor:

1. Поскольку LogCat Monitor запускается для всех сценариев запуска Android по умолчанию, вы можете добавить logCatArguments в свой сценарий отладки в файле launch.json , как в следующем примере:

 {"name": "Debug Android", "cwd  ":" $ {workspaceFolder} "," type ":" reactnative "," request ":" launch "," platform ":" android "," logCatArguments ": [" ReactNativeJS: V "]} 

1. Если вы хотите запустить LogCat Monitor из команды Command Pallette React Native: запустите React Native LogCat Monitor с установленными параметрами фильтрации response-native.android.logCatArguments в настройках gs.json :

 {"response-native.android.logCatArguments": ["*: S", "ReactNative: V",  "ReactNativeJS: V"]} 

Чтобы лучше понять, как работает фильтрация LogCat, примите во внимание, что расширение запускает LogCat с флагом -s а затем добавляет в качестве аргументов пользовательские фильтры. См. Официальную инструкцию о том, как работает фильтрация LogCat.

Расширение поддерживает функции удаленной разработки VS Code в Linux.. Следуйте официальной документации VS Code, чтобы настроить свою среду для использования подхода удаленной разработки.

Вы можете использовать официальный образ React Native Docker, предоставленный сообществом react-native-community.

Вот шаги для запуска отладки React Native внутри Docker-контейнера на реальном устройстве Android:

1. Откройте палитру команд и выполните следующую команду

     Удаленные контейнеры: добавить файлы конфигурации контейнера разработки ...  

   Затем выберите Существующий файл Dockerfile для создания файла конфигурации .devcontainer/devcontainer.json .

2. Создать файл Docker, расширяющий образ responsenativecommunity/response-native-android . Например, вы можете использовать следующий файл Docker:

     FROM responsenativecommunity/response-native-android: latestRUN npm install -g expo-cli react-native-cli  

3. Настройте файл devcontainer.json по мере необходимости. Ниже приведен пример конфигурации:

    {"name": "React Native Android Container",//Устанавливает контекст выполнения на один уровень выше вместо папки .devcontainer.  "context": "..",//Обновите свойство 'dockerFile', если вы не используете стандартное имя файла 'Dockerfile'.  "dockerFile": "Dockerfile",//Необязательное свойство runArgs можно использовать для указания дополнительных аргументов времени выполнения.  "runArgs": ["--privileged",//передаем все возможности контейнеру, другими словами, контейнер может делать почти все, что может делать хост "--net", "host",//перенаправляя все  порты хост-машины «-v», «/dev/bus/usb:/dev/bus/usb»//монтировать подключенные USB-устройства к контейнеру], «settings»: {//Это будет игнорировать пользовательские настройки локальной оболочки для  Linux, поскольку оболочки, подобные zsh, обычно//не входят в базовые образы контейнеров.  Вы также можете обновить это до конкретной оболочки, чтобы убедиться, что VS Code//использует правильную оболочку для терминалов и задач.  Например,/bin/bash (или/bin/ash для Alpine).  "terminal.integrated.shell.linux": null},//Добавьте идентификаторы расширений, которые вы хотите установить при создании контейнера в массиве ниже.  "extensions": ["msjsdiag.vscode-react-native"]} 

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

5. Подключите устройство через USB и начните отладку так же, как на локальном компьютере.

В настоящее время описанный выше сценарий не работает в macOS и Windows. Реализация контейнера Docker в этой ОС использует инструменты виртуальной машины, которые могут иметь проблемы с пересылкой USB для мобильных устройств.

Для получения дополнительной информации см. Наше вспомогательное руководство..

Вот список распространенных известных проблем, которые могут возникнуть при использовании расширения:

Known-Issues предоставляет полный список активных и решенных проблем.

Расширение VS Code React Native собирает данные об использовании и отправляет их в Microsoft, чтобы помочь улучшить наши продукты и услуги. Прочтите наше заявление о конфиденциальности, чтобы узнать больше.

Если вы не хотите отправлять данные об использовании в Microsoft, отредактируйте файл VSCodeTelemetrySettings.json в ~/.vscode-react-native и добавьте optIn: false .

В этом проекте принят Кодекс поведения с открытым исходным кодом Microsoft.. Для получения дополнительной информации см. Часто задаваемые вопросы о Кодексе поведения или обращайтесь по адресу opencode@microsoft.com с любыми дополнительными вопросами или комментариями.

Изменить язык на JSX в Visual Studio Code

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

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

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

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

  //Поместите свои настройки в этот файл, чтобы перезаписать настройки по умолчанию {"files.associations": {"* .js": "javascriptreact"}}  

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

Я мог бы это сделать, но «не файлы 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 и снова откройте.

6

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

Щелкните в правом нижнем углу редактора кода VS, где написано Javascript.

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

1.

Улучшите этот ответ

ответил 24 апр. ’19 в 14:04

• 1
  Этот вопрос возник в то время, когда эта опция еще не существовала. Прямо сейчас это так просто, как вы сказали. — Уильям Грейсель, 15 августа ’19, 20:26
• Почему я не вижу этого в нижней части редактора vs? У меня установлено последнее обновление vs community и последняя версия react. и все расширения обновлены. Вместо этого я вижу строку, показывающую одну ошибку компиляции, и стрелку влево/вправо, чтобы просмотреть ошибки, и строку github «добавить в систему управления версиями» синим цветом. — Эндрю Х, 14 июня ’20 в 20:01
• Отлично работает, спасибо — JeffinJ 31 авг., 11:12

добавить комментарий |

Мне кажется, что это самый простой способ форматирования кода.

Щелкните в правом нижнем углу на Редактор кода VS, где написано «Javascript».

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

1.

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

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

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

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

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

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

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

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

3

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

Перейдите в File> Prefrences> Settings , а затем прокрутите вниз и найдите «Emmet» открытым на вкладке, и вы должны увидеть следующий текст

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

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

Улучшить этот ответ

ответ дан 4 августа 2018 в 7:08

• Спасибо. Слава работает без побочных эффектов Диониса. — Фрейзер Киркман 15 фев, в 17:24

добавить комментарий |

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

Перейдите в Файл> Настройки> Настройки , затем прокрутите вниз и найдите «Эммет», откройте вкладку, и вы должны увидеть следующий текст

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

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

0

1-нажмите F1 (в Visual Код студии)

2-введите «расширение» в появившемся текстовом поле

3-выберите «Расширения: установить расширение»

3-введите «ext install jsx»

4- установите JS JSX-фрагменты

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

Улучшите этот ответ

отредактировано 23 авг. в 6:03

Аргья Садху

25.4k99 золотых знаков3232 серебряных знака5353 бронзовых знака

ответил 23 авг. 58

добавить комментарий |

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

2-введите «расширение» в появившемся текстовое поле

3-Pick «Extensions: Install Extension»

3-Type «ext install jsx»

4- установить JS Фрагменты JSX

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

-2

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

• Нажмите F1 (в Visual Studio Code)
• Введите «extension» «в появившемся текстовом поле.
• Выберите» Расширения: Установить расширение «
• Введите» ext install jsx «
• Перезапустить код Visual Studio

Источник:

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

Улучшить этот ответ

ответил 01 декабря 2015, 20:30

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

• Нажмите F1 (в Visual Studio Code)
• Введите «extension» в появившемся текстовом поле.
• Выберите «Extensions: Install Extension»
• Введите «ext install jsx»
• Перезапустить код Visual Studio

Источник:

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

  ln -s index.ios.js index.ios.  jsx  

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

  ln -s index.ios  .js index.ios.jsx