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

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

Ваш редактор

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

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