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

Ваш редактор

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

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

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

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

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

Проверка кода

Инструменты проверки кода находят проблемы в вашем коде по мере его написания, помогая вам исправить их на ранней стадии. ESLint — популярный, открытый инструмент проверки кода для JavaScript.

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

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

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

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

Вы можете установить расширение Prettier в VSCode, выполнив следующие шаги:

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. Убедитесь, что опция «форматировать при сохранении» отмечена!

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