ການຕັ້ງຄ່າ Editor

Editor ຂອງທ່ານ

VS Code ເປັນໜຶ່ງໃນ editor ທີ່ໄດ້ຮັບຄວາມນິຍົມສູງສຸດໃນປັດຈຸບັນ. ມັນມີຕະຫຼາດຂອງ extension ທີ່ໃຫຍ່ ແລະ ສາມາດເຮັດວຽກຮ່ວມກັນໄດ້ດີກັບບໍລິການທີ່ໄດ້ຮັບຄວາມນິຍົມຢ່າງເຊັນ Github. ຄຸນສົມບັດສ່ວນໃຫຍ່ທີ່ສະແດງດ້ານລຸ່ມແມ່ນສາມາດເພີ່ມລົງໃນ VS Code ໃນຮູບແບບ extension ໄດ້ຄືກັນ, ເຮັດໃຫ້ມັນສາມາດປັບແຕ່ງໄດ້ສູງສຸດ!

Editor ອື່ນທີ່ໄດ້ຮັບຄວາມນິຍົມໃນ React community ປະກອບມີ:

• WebStorm ເປັນ integrated development environment ທີ່ອອກແບບມາສຳລັບ JavaScript ໂດຍສະເພາະ.
• Sublime Text ແມ່ນ support ສຳລັບ JSX ແລະ TypeScript, syntax highlighting ແລະ autocomplete ໃນໂຕ.
• Vim ແມ່ນ text editor ທີ່ສາມາດປັບແຕ່ງໄດ້ສູງ ຊື່ງສ້າງຂຶ້ນມາສຳລັບການສ້າງ ແລະ ແກ້ໄຂ text ທີ່ມີປະສິດທິພາບຫຼາຍ. ມັນລວມມີ “vi” ກັບລະບົບ UNIX ເປັນສ່ວນໃຫຍ່ ແລະ ກັບ Apple OS X.

ແນະນຳຄຸນສົມບັດຂອງ text editor

ບາງ editor ມາພ້ອມກັບຄຸນສົມບັດເຫຼົ່ານີ້ໃນໂຕ, ແຕ່ໂຕອື່ນອາດຈະຕ້ອງໄດ້ລົງ extension. ກວດສອບເບິ່ງສິ່ງທີ່ editor ທີ່ທ່ານເລືອກ support ຫຍັງແນ່! Some editors come with these features built in, but others might require adding an extension. Check to see what support your editor of choice provides to be sure!

Linting

Code linters ຄົ້ນຫາບັນຫາໃນ code ຂອງທ່ານໃນຂະນະທີ່ທ່ານກຳລັງຂຽນ, ຊ່ວຍທ່ານແກ້ໄຂໄດ້ແຕ່ເນີ້ນໆ. ESLint ແມ່ນໄດ້ຮັບຄວາມນິຍົມ, ເປັນ open source linter ສຳລັບ JavaScript.

• ຕິດຕັ້ງ ESLintr ພ້ອມກັບຄຳແນະນຳການຕັ້ງຄ່າສຳລັບ React (ໃຫ້ແນ່ໃຈວ່າທ່ານໄດ້ ຕິດຕັ້ງ Node ແລ້ວ!)
• Integrate ESLint ໃນ VSCode ກັບ extension ທາງການ

ໃຫ້ໝັ້ນໃຈວ່າທ່ານໄດ້ເປີດeslint-plugin-react-hooks rules ທັງໝົດສຳລັບ project ທ່ານ. ພວກມັນມີຄວາມສຳຄັນ ແລະ ກວດຫາ bug ໄດ້ແຕ່ເນີ້ນໆ. eslint-config-react-app ທີ່ແນະນຳແມ່ນໄດ້ລວມໄວ້ແລ້ວ.

Formatting

ສິ່ງສຸດທ້າຍທີ່ທ່ານຕ້ອງເຮັດເມື່ອ share code ຮ່ວມກັບຜູ້ມີສ່ວນຮ່ວມອື່ນໆແມ່ນໃຫ້ລົມກັນກ່ຽວກັບ tabs vs spaces! ໂຊກດີທີ່, Prettier ຈະ clean up code ຂອງທ່ານ ໂດຍການ reformat ມັນເພື່ອໃຫ້ສອດຄ່ອງກັບ ກົດຂອງການຕັ້ງຄ່າ. ແລ່ນ Prettier, tab ທັງໝົດຂອງທ່ານຈະຖືກປ່ຽນເປັນ space ແລະ ການຍະຫ່າງຂອງທ່ານ, ເຄື່ອງໝາຍຂີດ ແລະ ອື່ນໆ ຈະຖືກປ່ຽນແປງໃຫ້ສອດຄ່ອງກັບ ກົດຂອງການຕັ້ງຄ່າ. ໃນການຕັ້ງຄ່າທີ່ເໝາະສົມທີ່ສຸດ, Prettier ຈະແລ່ນຟາຍຂອງທ່ານເມື່ອທ່ານບັນທຶກ ແລະ ທຳການແກ້ໄຂເຫຼົ່ານີ້ໃຫ້ທ່ານໄດ້ຢ່າງວ່ອງໄວ.

ທ່ານສາມາດຕິດຕັ້ງ Prettier extension ໃນ VSCode ໂດຍການປະຕິບັດຕາມຂັ້ນຕອນດັ່ງນີ້:

1. ເປີດ VS Code
2. ໃຊ້ Quick Open (ກົດ Ctrl/Cmd+P)
3. Paste ນີ້ ext install esbenp.prettier-vscode
4. ກົດ Enter

Formatting ຕອນບັນທຶກ

ຕາມຫຼັການແລ້ວ, ທ່ານຄວນຈະ format code ຂອງທ່ານທຸກໆຄັ້ງຕອນບັນທຶກ. VS Code ມີການຕັ້ງຄ່າສຳລັບສິ່ງນີ້!

1. ໃນ VS Code, ກົດ CTRL/CMD + SHIFT + P.
2. ພິມ “settings”
3. ກົດ Enter
4. ໃນ search bar, ພິມ “format on save”
5. ໃຫ້ແນ່ໃຈວ່າຕົວເລືອກ “format on save” ຖືກຕິກແລ້ວ!

ຖ້າຄ່າ ESLint ຂອງທ່ານມີກ format rule, ພວກມັນອາດຈະມີບັນຫາກັບ Prettier. ພວກເຮົາແນະນຳໃຫ້ທ່ານປິດ format rule ທັງໝົດໃນການຕັ້ງຄ່າ ESLint preset ໂດຍໃຊ້ eslint-config-prettier ດັ່ງນັ້ນ ESLint ຈຶ່ງຈະໃຊ້ສຳລັບຈັບຫາຂໍ້ຜິດພາດເຊີງຕັກກະເທົ່ານັ້ນ. ຖ້າທ່ານຕ້ອງການບັງຄັບໃຫ້ format file ກ່ອນ pull request ຈະຖືກ merged, ໃຊ້prettier --check ສຳລັບ continuous integration ຂອງທ່ານ.