Перейти к содержанию

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

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

Вы узнаете

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

Ваш редактор

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

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

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

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

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

Линтинг

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

Убедитесь, что вы включили все правила 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

Комментарии