Наладжванне рэдактара

Ваш рэдактар

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

Іншыя папулярныя тэкставыя рэдактары, якія выкарыстоўваюць React распрацоўшчыкі:

• WebStorm — інтэграванае асяроддзе распрацоўкі, распрацаванае спецыяльна для JavaScript.
• Sublime Text — рэдактар з падтрымкай JSX і TypeScript, убудаванай падсветкай сінтаксісу і аўтадапаўненнем.
• Vim — тэкставы рэдактар, які мае шырокія магчымасці канфігурацыі і дазваляе працаваць з любым фарматам тэксту хутка і эфектыўна. Ён уключаны ў большасць UNIX сістэм і Apple OS X як «vi».

Рэкамендаваныя функцыі тэкставага рэдактара

Некаторыя рэдактары пастаўляюцца ўжо з гэтымі функцыямі, але для іншых можа спатрэбіцца дадаць пашырэнне. Каб пераканацца, праверце набор пастаўкі вашага абранага рэдактара.

Лінтаванне

Лінтары кода знаходзяць праблемы ў вашым кодзе падчас напісання, дапамагаючы вам выправіць іх на ранняй стадыі. 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 выкарыстоўваўся толькі для выяўлення лагічных памылак. Калі вы хочаце, каб файлы фармаціраваліся перад тым, як запыт на ўнясенне змяненняў (pull request) будзе аб’яднаны, выкарыстоўвайце prettier --check для бесперапыннай інтэграцыі.