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

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

Ви дізнаєтесь

  • Які є найпопулярніші редактори
  • Як автоматично форматувати код

Ваш редактор

VS Code — один з найпопулярніших редакторів, що використовуються сьогодні. У нього великий асортимент розширень, він добре інтегрується з популярними платформами штибу GitHub. Більшість перелічених нижче функцій можна також додати до VS Code як розширення, тож у 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/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 використовувався лише для відловлювання помилок логіки коду. Якщо ви хочете обов’язково форматувати файли у PR перед злиттям, використовуйте у своїй неперервній інтеграції prettier --check.