Настройка IDE для разработки под ReactNative

Итак ты решил посвятить себя созданию кроссплатформенных приложений на базе React Native. Для начала идем по ссылке на официальный сайт и настраиваем свою ОС. Затем встает закономерный вопрос где же собственно писать код? Так как любой react native проект состоит из Android кода (языки Java, Kotlin, XML, Groovy), iOS кода (языки Objective-C, Swift) и Javascript (Typescript и прочие производные), нам потребуется IDE (или несколько IDE) для полноценного написания проекта.

Для себя я выбрал связку VS Code в качестве основной среды для написания javascript кода, Android Studio для написания нативных модулей под Android и AppCode для написания нативных модулей под iOS (в качестве альтернативы можно взять XCode от самой Apple).

После скачивания и установки VS Code готова к использованию, но для большего удобства все же рекомендую установить несколько плагинов:

• React Native Tools Добавляет автодополнение кода для ReactNative Api, позволяет запускать CLI команды из интерфейса IDE, а также добавляет возможность дебага приложений
• Npm Intellisense Добавляет автодополнение названий npm модулей при написании import
• Path Intellisense Добавляет автодополнение путей к файлам
• Prettier - Code formatter Добавляет поддержку Prettier форматирования (стандарт де-факто по оформлению JavaScript/TypeScript/CSS кода)
• ESLint Добавляет поддержку ESLint (статический анализатор кода must have)
• Rainbow Brackets Добавляет цвет к скобкам (круглым, квадратным, фигурным), благодаря чему быстрее поймешь, где какая скобка
• Auto Rename Tag Автоматически переименовывает парный HTML/XML тэг, в том числе и при написании JSX кода
• Auto Close Tag Автоматически подставляет закрывающий тэг
• Settings Sync Позволяет экспортировать все настройки VS Code в GitHub Gist для последующего быстрого развертывания IDE
• TODO Highlight Добавляет подсветку TODO,FIXME в комментариях, имеет множество настроек
• npm Добавляет возможность запуска npm команд из интефейса IDE, а также валидирует package.json файлы на корректность зависимостей
• Language Support for Java(TM) by Red Hat Добавляет подсветку Java кода, на случай когда лень запускать Android Studio ради мелкой правки
• Import Cost Добавляет в секции импорта счетчик, отображающий размер подключаемого модуля
• Document This Добавляет генерацию JSDoc для классов и функций, но не генерирует полноценную документацию по проекту
• Material Icon Theme Добавляет файлам в дереве проекта иконки согласно их расширению
• Color Highlight Добавляет подсветку цветов при написании их HEX кода (‘#333’)
• Ayu Весьма привлекательная тема для VS Code

После установки плагинов VS Code следует перезапустить и можно приступать к написанию проектов

Written by Alex - android developer,
react-native learning, PS4 gamer, music lover.