Какие шаги нужно предпринять, чтобы получить автозаполнение, работаю на реагирование на родие в Visual Studio Code? -- react-native поле с участием visual-studio-code пол Связанный проблема

What steps need to be taken to get autocomplete working for React Native in Visual Studio Code?


10
vote

проблема

русский

Я последовал за шагами, изложенными в документации по коде против VS, для получения IntelliSense работает на реагирование, нажимающий, устанавливая наличие наживки для реагирования на родных. Теперь, что мне нужно сделать, чтобы получить автозаполнение? Например, если я нахожу <код> <Text> , я хотел бы увидеть автоматическое закрытие этого тега. Что я здесь не хватает? Это кажется, что это шальд работает из коробки.

Английский оригинал

I have followed the steps outlined in the VS Code documentation for getting Intellisense working for React Native by installing typings for React Native. Now, what do I need to do to get autocomplete working? For instance, if I type <Text>, I would like to see an automatic closing of that tag. What am I missing here? This seems like it shuld work out of the box.

</div
     

Список ответов

9
 
vote

Чтобы включить Intellisense ( AutoComplete ), вы должны установить официальный quite расширение.

<Сильная> Установка

Открытая палитра команд, нажав f1 , введите <код> ext install> ext install и нажмите ENTER , затем ищите ract расширение.

создать файл jsconfig.json

Вы должны создать <код> jsconfig.json файл в вашем корневом каталоге. Это может быть пустым, но должно быть присутствует. Наличие такого файла в каталоге указывает, что каталог является корнем проекта JavaScript.

( необязательно )

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

 <код> {   "compilerOptions": {     "target": "ES6",     "module": "commonjs",     "allowSyntheticDefaultImports": true   },   "exclude": [     "node_modules"   ] }   

Вы можете найти больше в https://code.visualstudio.com / Документы / Языки / JavaScript # _Javascript-Projects-Jsconfigjson

Создайте файл .babelrc для реактивного трансформатора упаковочного устройства ( необязательно, если вы хотите использовать Teamscript )

Вы должны создать <код> .babelrc файла с <код> sourceMaps = true и <код> "presets": [ "react-native" ] для лучшей поддержки сопоставления источника. ( Требуется, если вы хотите поддержку Teadercript ).

 <код> {   "presets": [     "react-native" // this is required for debugging with react-native/packager/transformer   ],   "plugins": [],   "sourceMaps": true // must be true react-native/packager/transformer using with node-module-debug   // because of some bugs from vscode-node-debug & vscode-react-native, "sourceMaps" cannot be "inline" or "both" }   

<Сильные> Установка текстов для реакции нативных ( необязательно )

Чтобы получить IntelliSense для реагирования на родной, запустить <код> npm install typings -g , а затем <код> typings install dt~react-native --global в вашем терминале.

Надеюсь, это поможет !!

 

To enable IntelliSense (autocomplete) you have to install the official React Native Tools extension.

Installation

Open Command Palette by pressing F1, type ext install and press Enter, then look for React Native Tools extension.

Create a jsconfig.json file

You should create a jsconfig.json file in you root directory. It can be empty but must be present. The presence of such a file in a directory indicates that the directory is the root of a JavaScript project.

(Optional)

The file itself can optionally list the files belonging to the project, the files to be excluded from the project, as well as compiler options.

{   "compilerOptions": {     "target": "ES6",     "module": "commonjs",     "allowSyntheticDefaultImports": true   },   "exclude": [     "node_modules"   ] } 

You can find more at https://code.visualstudio.com/docs/languages/javascript#_javascript-projects-jsconfigjson

Create a .babelrc file for ReactNative Packger transformer (optional, if you want to use TypeScript)

You should create a .babelrc file with sourceMaps = true and "presets": [ "react-native" ] for better source-mapping support. (required if you want TypeScript support).

{   "presets": [     "react-native" // this is required for debugging with react-native/packager/transformer   ],   "plugins": [],   "sourceMaps": true // must be true react-native/packager/transformer using with node-module-debug   // because of some bugs from vscode-node-debug & vscode-react-native, "sourceMaps" cannot be "inline" or "both" } 

Install typings for React Native (optional)

To get IntelliSense for React Native, run npm install typings -g and then typings install dt~react-native --global in your terminal.

Hope this helps!!

</div
 
 
3
 
vote

<Код> React Native Tools на vscode не может помочь вам закрыть тег после того, как вы набрали <код> jsconfig.json0 , вы можете попробовать установить Авто тег Close и Авто переименовать тег

 

React Native Tools in VSCode can't help you close the Tag after you typed<Text>,you can try to install Auto Close Tag and Auto Rename Tag

</div
 
 
1
 
vote

В моем случае я должен копировать jsconfig.json в tsconfig.json, закрыть визуальный код и откройте его. Тогда это работает правильно.

JSCONFIG.JSON

 <код> jsconfig.json1  

<Сильные> Tsconfig.json

 <код> jsconfig.json2  
 

In my case, I have to copy jsconfig.json to tsconfig.json, close Visual Code and reopen it. Then it works properly.

jsconfig.json

{     "compilerOptions": {         "allowSyntheticDefaultImports": true     },     "exclude": [         "node_modules"     ] } 

tsconfig.json

{     "compilerOptions": {         "allowJs": true,         "allowSyntheticDefaultImports": true     },     "exclude": [         "node_modules"     ] } 
</div
 
 
 
 

Связанный проблема

-1  React Native ListView - TypeError: не удается прочитать свойство «CloneWithrows» undefined (...)  ( React native listview typeerror cannot read property clonewithrows of undef ) 
Попытка создать вид списка с этого API, но я продолжаю получать эту ошибку ISEERROR: не удается прочитать свойство «CloneWithrows» undefined (...) , веро...

0  Как реализовать авторизацию OAUTH2 с сервером в реакции на родом?  ( How to implement oauth2 authorization with the server in react native ) 
Я хочу реализовать авторизацию OAUTT2 в React Nature.i реализовал код следующим образом. <код> const HOST_ADRESS = "192.168.173.1"; //change with your...

4  React Nature IOS No Bundle URL-адрес  ( React native ios no bundle url present issue ) 
Я изменил файл info.plist по желанию http. Когда я запускаю реагировать нативный проект, я получаю ошибку No Bundle URL, но я не знаю, какие ошибки я делаю,...

0  Приложение не загружается при загрузке из игрового магазина, но установка сгенерированного APK работает нормально  ( Application not loading when downloaded from play store but installing the gener ) 
Проблема Я выпустил последнюю версию приложения к производству в Play Store. . Если я скачаю и устанавливаю сгенерированный APK, он работает нормально. ...

0  Cant Pack React Ratean APK APK APC: ValidatesigningRelease App: TransformnativelibsshithStripdebugsymbolforrelase Erros  ( Cant pack react native as an apk appvalidatesigningrelease apptransformnativel ) 
Я пытаюсь создать файл APK, создал мою клавишу, а также добавил пароль, следующий за руководством на сайте React. Я нахожусь в этом вопросе в поисках 6 часов....

5  Как пройти данные ввода поля из модала до контейнера в реагированном стиле?  ( How to pass input field data from modal to the container in react native ) 
Вот что я использую: <код> <Modal visible = {this.props.visible} animationType="slide" transparent onRequestClose={() => {}} > <Te...

0  Цвет пикселей в реактивном родном  ( Pixel color in react native ) 
Позвольте мне предисловие это, сказав, что я полностью новичок в JavaScript, Rect, Rect Nature, etc ... Я пытаюсь использовать нативный модуль raction [Reac...

5  React-National-карты пустые на устройстве Android  ( React native maps blank on android device ) 
React Nature Blank на моем устройстве Android. Это просто серый экран с логотипом Google. В отличие от Реакция - National-maps Пустая страница Только Google ...

3  Ошибка загрузки шрифта при использовании компонента Shoutemui / TextInput в экспонентной реагированной структуре  ( Font loading error when using the shoutemui textinput component in a exponent re ) 
Я пытаюсь использовать Shotem / ui с экспонентом, и я получаю сообщение об ошибке, используя компонент TextInput Shoutem / ui, где я получаю следующее сообщен...

2  NatureBase Beedertab возвращает ошибку при использовании значка  ( Nativebase footertab returns error when using an icon ) 
Я использовал нативную базу docs в качестве основы для создания beeertab. Я получаю следующую ошибку, если я добавляю элемент значка на кнопку: undefined ...

-1  Сортировка реагирования - родной складки алфабатично  ( Sorting react native flatlist alphabatically ) 
Это массив, из которого плоский LIS получает данные <код> const DATA = [ { id: '1', name: 'Hamza Ahzam', phone: '03076232309', DOB: '05/07/96', }, {...

4  Установка Reactanation's NativeModules.rndeviceInfo с шумом  ( Setting reactnatives nativemodules rndeviceinfo with jest ) 
Я пытаюсь переключить свое собственное применение actact с использованием Mocha / Chai, чтобы шутить, но я бегаю в проблему. Ранее в моем <код> test/setup.j...

19  React Native <listitem oness = {...}> - Почему эта функция выполняет?  ( React native listitem onpress why is this function executing ) 
Я просто начинаю обернуть голову вокруг реагирования на родной и использую Redux для управления state , Библиотека на родильной базе для моих пользовательс...

6  React-Nature-Marriter-Flux: Как предотвратить сброс вкладышей истории сцены вкладывания при изменении между вкладками?  ( React native router flux how to prevent tab scene history stack from being rese ) 
У меня есть <код> Router Настройка с 2 вкладками сцен: . Tab 1: есть 2 судоходных сцены (статические экраны); . экран a: есть кнопка для навигации на...

2  Как сделать автономное приложение из выброшенного проекта EXPO  ( How to make standalone app from ejected expo project ) 
Все. Я выбросил проект EXPO. Это хорошо работает на местном. Чтобы сделать автономное приложение, я выполняю команду «Expo Publish», а затем сделайте файл APK...

Связанный проблема

-1  React Native ListView - TypeError: не удается прочитать свойство «CloneWithrows» undefined (...) 
0  Как реализовать авторизацию OAUTH2 с сервером в реакции на родом? 
4  React Nature IOS No Bundle URL-адрес 
0  Приложение не загружается при загрузке из игрового магазина, но установка сгенерированного APK работает нормально 
0  Cant Pack React Ratean APK APK APC: ValidatesigningRelease App: TransformnativelibsshithStripdebugsymbolforrelase Erros 
5  Как пройти данные ввода поля из модала до контейнера в реагированном стиле? 
0  Цвет пикселей в реактивном родном 
5  React-National-карты пустые на устройстве Android 
3  Ошибка загрузки шрифта при использовании компонента Shoutemui / TextInput в экспонентной реагированной структуре 
2  NatureBase Beedertab возвращает ошибку при использовании значка 
-1  Сортировка реагирования - родной складки алфабатично 
4  Установка Reactanation's NativeModules.rndeviceInfo с шумом 
19  React Native <listitem oness = {...}> - Почему эта функция выполняет? 
6  React-Nature-Marriter-Flux: Как предотвратить сброс вкладышей истории сцены вкладывания при изменении между вкладками? 
2  Как сделать автономное приложение из выброшенного проекта EXPO