Какие шаги необходимо предпринять для того, чтобы автозаполнение работало над React Native в коде Visual Studio?

Question

Я выполнил шаги, описанные в документации VS Code, для того, чтобы Intellisense работал на React Native, установив типовые записи для React Native. Теперь, что мне нужно сделать, чтобы получить автозаполнение? Например, если я нахожу <Text>, я хотел бы увидеть автоматическое закрытие этого тега. Что мне здесь не хватает? Кажется, что он работает из коробки.

Answer 1

Чтобы включить IntelliSense (автозаполнение), вам необходимо установить официальное расширение React Native Tools.

Установка

Open Command Palette нажатие F1, типа ext install и нажмите Enter , затем искать Реагировать собственные инструменты расширения.

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

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

(Дополнительный)

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

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

Вы можете найти больше на https://code.visualstudio.com/docs/languages/javascript#_javascript-projects-jsconfigjson

Создайте файл .babelrc для ReactNative Packger трансформатора (по желанию, если вы хотите использовать машинопись)

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

{ 
    "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" 
} 

Установка типизации для React Native (опция)

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

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

Answer 2

React Native Tools в VSCode не может помочь вам закрыть тег после напечатал <Text>, вы можете попробовать установить Auto Close Tag и Auto Rename Tag

Answer 3

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

jsconfig.JSON

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

tsconfig.json

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