Настройка редактора

Ваш редактор

VS Code — один из наиболее популярных редакторов. Он имеет огромный набор расширений и отлично интегрирует популярные сервисы, такие как GitHub. Большинство из перечисленных ниже инструментов можно добавить в VS Code как расширения.

Другие популярные текстовые редакторы, используемые React-разработчиками:

• WebStorm — интегрированная среда разработки, спроектированная специально для JavaScript.
• Sublime Text — редактор с поддержкой JSX и TypeScript, подсветкой синтаксиса и встроенным автозаполнением.
• Vim — текстовый редактор с возможностью глубокой настройки инструментов, позволяет работать с любым форматом текста быстро и эффективно. Он встроен в большинство UNIX-систем и Apple OS X как “vi”.

Рекомендуемые инструменты текстового редактора

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

Отладчик

Отладчики находят проблемы во время написания кода, что позволяет исправлять их сразу же. ESLint — популярный отладчик для JavaScript с открытым исходным кодом.

• Установка ESLint с рекомендуемыми настройками для React (убедитесь в том, что у вас установлен Node!)
• Интеграция ESLint в VS Code при помощи официального расширения

Убедитесь в том, что все правила eslint-plugin-react-hooks включены для вашего проекта. Это базовые правила, позволяющие обнаружить большинство распространенных багов на ранней стадии. Рекомендованный пресет eslint-config-react-app уже включает эти правила.

Форматирование

При работе в команде никому не хочется вести диалоги на тему “пробелы vs табы”. К счастью, Prettier позволяет автоматически форматировать код на основе заданных параметров. Запустите Prettier и ваш код будет отформатирован, включая отступы и кавычки. В идеале Prettier будет запускаться во время сохранения файла, быстро применяя все необходимые изменения.

Вы можете установить расширение Prettier в VS Code следуя простой инструкции:

1. Запустите VS Code
2. Откройте функцию “Перейти к файлу” (нажмите Ctrl/Cmd+P)
3. Вставьте команду ext install esbenp.prettier-vscode
4. Нажмите Enter

Форматирование при сохранении

В идеале следует форматировать код при каждом сохранении. В VS Code для этого есть своя настройка!

1. В VS Code нажмите CTRL/CMD + SHIFT + P.
2. Введите “settings”
3. Нажмите Enter
4. В поиске введите “format on save”
5. Убедитесь, что настройка “format on save” включена!

Если в пресете ESLint есть правила форматирования, они могут конфликтовать с Prettier. Мы рекомендуем отключить все правила форматирования в ESLint пресете используя eslint-config-prettier. Так ESLint будет использоваться только для отслеживания логических ошибок. Если вы хотите, чтобы файлы форматировались до того, как запрос на слияние будет выполнен, используйте prettier --check для вашей непрерывной интеграции.