Редакторды конфигурациялау

Сіздің редакторыңыз

VS Code бүгінгі таңда қолданылатын ең танымал редакторлардың бірі. Плагиндер жүйесінде кең таңдау бар және GitHub сияқты танымал қызметтермен жақсы біріктірілген. Төменде тізімделген мүмкіндіктердің көпшілігін VS Code-на плагиндер ретінде қосуға болады, бұл оны жоғары конфигурациялауға мүмкіндік береді!

React қауымдастығында қолданылатын басқа танымал мәтіндік редакторлар:

• WebStorm JavaScript үшін арнайы әзірленген орта.
• Sublime Text JSX және TypeScript қолдауы бар, синтаксистік ерекшелеу және қораптан автотолтыру бар.
• Vim кез келген мәтін түрін жасау мен өзгертуді өте тиімді ету үшін жасалған жоғары конфигурацияланатын мәтіндік редактор. Ол UNIX жүйелерінің көпшілігінде және Mac OS жүйесінде «vi» командасымен шақырылады.

Ұсынылатын мәтіндік редактор мүмкіндіктері

Кейбір редакторлар осы мүмкіндіктермен бірге келеді, бірақ басқалары кеңейтімді қосуды қажет етуі мүмкін. Сіз таңдаған редактордың қандай мүмкіндіктері бар екенін тексеріңіз!

Линтинг

Код линтерлері сіз жазған кезде кодыңыздағы ақауларды тауып, оларды ертерек түзетуге көмектеседі. ESLint — JavaScript үшін танымал опенсорс жоба.

• React-қа ұсынылған ESLint конфигурациясын орнатыңыз (Node орнатылғанына көз жеткізіңіз!)
• ESLint бағдарламасын VSCode редакторына орнатыныз

Жобаңызға eslint-plugin-react-hooks ережелерін қосқаныңызға көз жеткізіңіз. Өте маңызды және қиын қателерді ерте ұстайды. Біз ұсынылған eslint-config-react-app пресет осылардын барлығын қамтиды.

Форматтау

Кодыңызды басқа адамдармен бөліскен кезде ең соңғы уайымдайтын нәрсе ол табтар немесе бос орындар! Қуанышқа орай, Prettier кодты алдын ала орнатылған ережелерге сәйкес форматтайды. Prettier-ді іске қосыңыз, сонда барлық қойған табтар, бос орындар, тырнақша түрі және т.б. конфигурацияға сәйкес келетіндей етіп өзгертіледі. Prettier файлды сақтаған кезде форматтауды іске қосылады, бұл сіздің жұмысынызды жеңілдетеді.

Мына қадамдарды орындау арқылы VSCode ішінде Prettier кеңейтімін орнатуға болады:

1. VS code іске қосыңыз
2. Жылдам ашуды пайдаланыңыз (Ctrl/Cmd+P)
3. ext install esbenp.prettier-vscode командасын жазыныз
4. Enter пернесін басыңыз

Сақтау кезінде форматтау

Ең дұрысы, кодты әр сақтау кезінде форматтау керек. VS Code-да бұл үшін параметрлер бар!

1. VS Code iшінде CTRL/CMD + SHIFT + P пернелер тіркесімін басыныз.
2. ”settings” теріңіз
3. Enter пернесін басыңыз
4. Іздеу жолағына “format on save” деп теріңіз.
5. ”format on save” опциясына белгі қойылғанына көз жеткізіңіз!

Егер ESLint форматтау ережелері болса, олар Prettier бағдарламасымен қайшы келуі мүмкін.eslint-config-prettier арқылы ESLint алдын ала орнатылған барлық форматтау ережелерін өшіруді ұсынамыз. ESLint тек логикалық қателерді анықтау үшін пайдаланылады. Pull request код біріктірудің алдында файлдардың форматтауына көз жеткізгіңіз келсе, үздіксіз біріктіру (continuous integration) жүйеңізде [prettier --check](https://prettier.io/docs/en/cli.html#—check командасын пайдаланыңыз.