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

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

Вы узнаете

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

Ваш редактор

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+P или Cmd+P)
3. Вставьте ext install esbenp.prettier-vscode.
4. Нажмите Enter

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

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

1. В VS Code нажмите Ctrl+Shift+P или Cmd+Shift+P.
2. Введите "settings".
3. Нажмите Enter
4. В строке поиска введите "формат при сохранении".
5. Убедитесь, что опция "форматировать при сохранении" отмечена!

Интеграция ESLint и Prettier

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

Источник — https://react.dev/learn/editor-setup

Комментарии