Editor тохируулах

Бидний editor

VS Code бол өнөө үед хамгийн түгээмэл ашиглагддаг editor-уудын нэг юм. VS Code нь Github шиг олон төрлийн extension-уудыг marketplace-с татаж авч нэмэлтаар суулгах боломжтой. Доор дурдсан ихэнх боломжуудыг extension байдлаар суулгах боломжтой байдаг нь VS Code-ыг хамгийн уян хатан хэрэгсэл болгодог.

React нэгдлийн хүмүүст түгээмэл ашиглагддаг бусад текст editor-ууд:

• WebStorm бол JavaScript-д зориулсан цогц хөгжүүлэлтийн орчин.
• Sublime Text нь JSX болон TypeScript хэлийг дэмждэг бөгөөд өөр дээр шууд (төрмөл) байдлаар кодын бичиглэл тодруулж өгөх (syntax highlighting) болон кодын түлхүүр үг автомат гүйцээлт (autocomplete) хийдэг.
• Vim бол бүх төрлийн бичвэрийг үр ашигтайгаар засахад зориулж бүтээсэн маш уян хатан тохиргоо хийх боломжтой текст editor. Ихэнх UNIX системүүд болон Apple OS X системд “vi” нэрээр суусан байдаг.

Санал болгож буй тескт editor-ын онцлогууд

Зарим editor-уудад төрмөлөөр байдаг онцлогууд нь өөр бусдад нь extension байдлаар нэмж суулгах хэрэгтэй болно. Та өөрийн сонгосон editor алийг нь дэмжиж байгаа шалгаарай!

Linting

Код linter-үүд нь таныг код бичиж байх үед асуудлыг олж, эрт засахад тусалдаг. JavaScript-д зориулсан нээлттэй эх бүхий ESLint бол хамгийн түгээмэл тархсан code linter юм.

• React-д зориулсан зохистой тохиргоог ESLint-д суулгах нь (Node суулгасан эсэхээ шалгаарай!)
• VSCode-ын албан ёсны extension-ыг ESLint-тэй холбох нь

Та өөрийн прожект дотроо eslint-plugin-react-hooks дүрмүүдийг бүгдийг нь тааруулсан эсэхийг шалгаарай. Эдгээр нь заавал барих шаардлагатай ихэнх асуудлуудыг эрт илрүүлж өгөх болно. eslint-config-react-app preset нь уг дүрмүүдийг агуулсан байгаа тул санал болгож байна.

Код хэвжүүлэх (Formatting)

Бусад оролцогчидтой кодоо хуваалцах үед тулгардаг хамгийн түгээмэл асуудал бол tabs уу эсвэл spaces үү гэсэн хэлэлцүүлэг! Азаар энэ асуудлыг шийдэгч бол Prettier бөгөөд урьдчилсан бэлдсэн дүрэм, тохиргоогоор таны кодыг хэвжүүлэх болно. Prettier-ийг ажиллуулахад л таны бүх tab-ууд space рүү хөрвөгдөж, мөн мөрийн доголууд, хаалтууд бүгд тохиргооны дагуу өөрчлөгдөнө. Хамгийн оновчтой тохиргоо бол та файлаа хадгалахад Prettier ажиллаад шаардлагатай засваруудыг хийдэг байх юм.

Та Prettier-д зориулсан нэмэлт суулгацыг VSCode дээр доорх дарааллын дагуу суулгаж болно.

1. VS Code-оо нээх.
2. “Quick Open”-г ашиглах (Ctrl/Cmd+P хослолыг дар)
3. ext install esbenp.prettier-vscode хуулж тавих
4. “Enter” товч дарна

Хадгалах үед хэвжүүлэх нь

VS Code-д хадгалах бүрд таны кодыг хэвжүүлэх тохиргоо бий бөгөөд танд уг тохиргоог ашиглахыг санал болгож байна. Ideally, you should format your code on every save. VS Code has settings for this!

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 командыг continuous integration (CI)-дээ оруулаарай.