Налаштування редактора

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

Ваш редактор

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

Інші популярні текстові редактори, що використовуються у спільноті React, включають в себе:

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

Рекомендовані можливості текстового редактора

Деякі редактори постачаються з вбудованими функціями, але для інших може знадобитися додати розширення. Щоб бути впевненим, перевірте, яку підтримку надає ваш редактор!

Linting

Лінтери коду знаходять проблеми у вашому коді під час написання, допомагаючи вам виправити їх на ранніх стадіях. ESLint - популярний лінтер з відкритим кодом для JavaScript.

Переконайтеся, що ви увімкнули всі правила 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. .
  4. У рядку пошуку введіть "формат при збереженні"
  5. Переконайтеся, що опція "форматувати при збереженні" позначена!

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