ReactWeb Developer

วิธีจัดโค้ด React และ React Native ง่ายๆ ใน Sublime Text

เรื่องที่เกี่ยวข้อง - HTML/CSS/JS Prettify, React, React Native, Sublime Text

สำหรับคนที่เริ่มใช้ React JS หรือมาอบรมกับโค้ชพลไปแล้ว จะพบกว่าการเรียงโค้ดให้สวย หรือที่เรียกว่า Format ตัวโค้ดให้มีย่อหน้าสวยงามอ่านง่ายนั้น เป็นเรื่องที่ท้าทายชีวิตพอสมควร

วันนี้โค้ชพลจะมาบอกวิธีจัดโค้ด React ให้อ่านกันง่ายๆ ด้วย Sublime Text ครับ

เปิดอบรม React Native สำหรับผู้เริ่มต้น

ปูพื้นฐาน React และ React Native เข้าใจง่าย, ใช้ได้จริง, เนื้อหาใช้ในการทำแอพ Enterprise ขององค์กรได้

รู้จักกับ HTML\CSS\JS Prettify

โดยปกติ Sublime Text จะมี Package สำหรับจัดการ format ของโค้ด HTML, CSS, และ Javascript โดยเฉพาะ โดยที่โค้ชพลเลือกใช้แล้วดีนั้นชื่อ HTML/CSS/JS Prettify

ดูวิธีการติดตั้ง Sublime Text Package บน YouTube ของโค้ชได้ที่นี่

Sublime Text - HTML Ionic directive
ตัวอย่างของ HTML หลังใช้ HTML/CSS/JS Prettify ช่วยจัด

ซึ่งหลังจากติดตั้งตัว Package แล้ว สามารถเรียกใช้โดยใช้ปุ่มลัดดังนี้

  • สำหรับ Windows: Ctrl + Shift + H
  • สำหรับ Mac OS X: Cmd + Shift + H

ปัญหาเมื่อใช้ HTML Prettify กับโค้ด JSX ของ React

ทีนี้ถ้าเกิดเราใช้ตัว Package กับ JSX ของ React จะเกิดปรากฎการณ์แบบนี้ (ฮาม ฮ่าม ฮาม ฮ๊ามมม)

ซึ่งผลก็คือเราเวลาใช้ React tools แปลงโค้ด JSX เป็น Javascript ทั่วไป มันเดี้ยงดังภาพ 555

Sublime Text React - prettify without e4x formatter

เราต้องตั้งค่าให้ HTML/CSS/JS Prettify รองรับรูปแบบของ React

วิธีแก้คือเราต้องไปปรับการตั้งค่า (Setting) ของ HTML/CSS/JS Prettify นิดหน่อย โดยให้ไปที่

Preferences > Package Settings > HTML/CSS/JS Prettify > Set Prettify Preferences

แล้วค้นหาบรรทัดที่มีการตั้งค่าชื่อ e4x

แล้วค่าเปลี่ยนจาก false เป็น true ดังตัวอย่างด้านล่าง

"e4x": true

หลังจากบันทึกไฟล์เสร็จเรียบร้อย ให้ลองใช้คำสั่ง HTML/CSS/JS Prettify อีกครั้งกับไฟล์​ JSX ดู คราวนี้สวยงามหมดจดแน่นอน ที่สำคัญไฟล์ที่ format แล้ว ใช้กับ React tools ได้ไม่มีปัญหา

Sublime Text React - prettify with e4x formatter

สรุป

หวังว่าเทคนิคเล็กๆ น้อยๆ นี้จะทำให้พวกเราสร้างเว็บแอพ และ Mobile App ได้ง่ายขึ้นนะครับ

ใครสนใจเรียนรู้ React แบบสบายๆ ด้วยวิดีโอกับโค้ชพล ลองดูที่นี่ครับ 

ประกาศอบรม React Native เข้าใจง่าย ใช้ได้จริง

และถ้าสนใจเรียนแบบ Workshop 3 วันเรียน React ทำได้ทั้งเว็บ และ Mobile App ดูรายละเอียดได้ที่นี่เลย

อ้างอิง

เปิดอบรม React Native สำหรับผู้เริ่มต้น

ปูพื้นฐาน React และ React Native เข้าใจง่าย, ใช้ได้จริง, เนื้อหาใช้ในการทำแอพ Enterprise ขององค์กรได้

เริ่มต้นยุค AI ด้วยคอร์สฟรี และพรีเมี่ยม กับพล

หากชอบสิ่งที่พลเล่า เรื่องที่พลสอน สามารถสนับสนุนพลโดยการเข้าเรียนคอร์สออนไลน์ของพลนะคร้าบ

  • เข้าใจง่าย ใช้ได้จริง ออกแบบการสอนอย่างเข้าใจโดยโค้ชพล
  • มีคอร์สสำหรับคนใช้งานทั่วไป จนถึงเรียนรู้เพื่อใช้งานในสายอาชีพขั้นสูง
  • ทุกคอร์สมีใบประกาศณียบัตรรับรองหลังเรียนจบ

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

Privacy Preferences

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

Allow All
Manage Consent Preferences
  • Always Active

Save