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

Ваш редактор

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