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

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

Вы узнаете

Какие редакторы самые популярные
Как автоматически форматировать код

Ваш редактор

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

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

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

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

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

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

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

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

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

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

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

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

Запустите VS Code
Используйте функцию быстрого открытия (нажмите Ctrl/Cmd+P)
Вставьте ext install esbenp.prettier-vscode
Нажмите Enter

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

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

В VS Code нажмите CTRL/CMD + SHIFT + P.
Введите "settings"
Нажмите Enter
В строке поиска введите "форматировать при сохранении"
Убедитесь, что параметр "форматировать при сохранении" отмечен!

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