Налаштування редактора
Як слід налаштований редактор може зробити код чистішим при прочитанні та швидшим при написанні. Він може навіть допомогти знайти дефекти ще при їхньому написанні! Якщо ви вперше налаштовуєте редактор або розглядаєте варіанти підлаштування нинішнього свого редактора, то в нас є кілька порад.
You will learn
- Які найпопулярніші редактори
- Як автоматично форматувати код
Ваш редактор
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 можна за допомогою таких кроків:
- Запустіть VS Code
- Скористайтеся Швидким відкриттям (натисніть Ctrl/Cmd+P)
- Вставте
ext install esbenp.prettier-vscode - Натисніть Enter
Форматування при збереженні
В ідеалі слід форматувати свій код при кожному збереженні. VS Code має налаштування для цього!
- У VS Code натисніть
CTRL/CMD + SHIFT + P. - Надрукуйте “settings”
- Натисніть Enter
- У панелі пошуку надрукуйте “format on save”
- Перевірте, що опція “format on save” має галочку!
Якщо ваш набір налаштувань ESLint має правила форматування, то вони можуть конфліктувати з Prettier. Ми радимо вимикати всі правила форматування в наборах налаштувань ESLint за допомогою
eslint-config-prettier, щоб ESLint використовувався лише для полювання на логічні помилки. Якщо ви хочете зробити форматування обов’язковим перед злиттям запиту на злиття, використовуйте в своїй неперервній інтеграціїprettier --check.