ไม่รู้จัก Package Control แล้วจะเสียใจ!! ทำไมตูไม่รู้ตั้งแต่แรก


มารู้จัก Package Control ใน Sublime Text ก่อน

    ในบทความก่อนสอนติดตั้งเจ้าตัว Sublime Text ไปแล้ว หากใครยังไม่ได้อ่านหรือดูตามไปดูได้ ที่นี่ สำหรับคนที่ติดตั้ง Sublime Text ไปแล้วอ่ะ วันนี้แอดมาแนะนำตัว Package Control สำหรับทำโปรเจคเว็บแอปพลิเคชันหรือทำโปรเจคเว็บไซต์ก่อนนะ

Package Control มันคือไรอ่ะ ?

Package Control ทำหน้าที่คล้ายๆ กับตัว Plugin ในโปรแกรม Sublime Text หรือที่เรียกว่าส่วนเสริม

Package Control มันดียังไง ?

ดีโคตร ๆ มันช่วยให้เราเขียนโค้ดได้ไวขึ้นเยอะ ยกตัวอย่างง่าย ๆ ถ้าผมจะสร้างไฟล์ HTML ขึ้นมามันปกติเราต้องพิมพ์โค้ดตามนี้

แต่ใน Sublime Text ที่ติดตั้งตัว Package แล้วนะ เวลาสร้างไฟล์ใหม่ขึ้นมาพิมพ์แค่ ! หรือ html5 แล้วกด tab ทีเดียวจะได้โครงสร้างโค้ดตามภาพด้านบนเลยหล่ะ สบายไหมหล่ะ 555 ทีนี้มาดูกันว่ามี Package อะไรมั่ง

1. Emmet
ตัวนี้ขาดไม่ได้เลย ช่วยเขียนโค้ด HTML และ CSS ให้สั้นเพียงแค่กำหนดรูปแล้วกดแท็ป จะได้โครงสร้างโค้ดที่เราต้องการ

2. BracketHighlighter
อีกตัวช่วยในการดู Tag เปิดปิด

.....

หรือวงเล็บปีกกา { โดย Highlight วงเล็บ ต่างๆ ที่เป็น Block ของมัน เช่น if..else, for และยังรวมถึง HTML tag ด้วย

 

3. DocBlockr
ช่วยให้เราจัดการกับ Comment ได้ง่ายขึ้น แนะนำให้ใช้เลย ทำให้เราสร้าง Mini Document ใน Code เราได้เร็วขึ้นเยอะเลย

4. SidebarEnhancements
ช่วยจัดการไฟล์ได้มากกว่าเดิม โดยคลิ๊กขวาที่เมนูไฟล์

5. Color HighLighter
ช่วยเราดูผลลัพธ์ของค่าสีแบบ RGB ในการเขียนโค้ด CSS ที่ต้องใส่ค่าสี

6. Package ตระกูล Snippets ต่าง ๆ
ช่วยในการย่นระยะเวลาที่ต้องเขียนโค้ดยาวๆหรือที่เราจำรูปแบบโค้ดมันไม่ได้ยกตัวอย่างเช่น  PHP Snippets ถ้าเราต้องการแทรกโค้ด php ก็แค่พิมพ์
php แล้วกด tab ตัว Snippets มันจะ generate format php มาให้เป็น <!--?php  ?--> ส่วน Package Snippets
ที่ใช้บ่อย ๆ ได้แก่ HTML5, CSS, JQuery, Bootstrap 3 หรือ Bootstrap 4, PHP, AngulaJS, Nodejs, C# เป็นต้น หรือที่เป็นตัว Framework ก็มีให้ใช้นะ อย่างเช่น
Codeigniter, Ruby อะไรประมาณนี้ ก็ลองใช้กันดูผมว่ามันช่วยได้เยอะมาก ทำให้เราเขียนโค้ดได้เร็วจริง ๆ แต่ก็มีข้อเสียอย่างนึงคือเราจะจำ Format ไม่ได้นะ 555

7. HTML-CSS-JS Prettify
ช่วยจัดโค้ด HTML, CSS หรือ JS และให้ดูสวย จริง ๆ มันมีประโยชน์ถ้าเราไปคัดลอกโค้ดมาจากที่อื่นเจ้าตัวนี้มันจะช่วยจัดให้  **ถ้าจะลง Package นี้ในเครื่องเราควรติดตั้งเจ้า Nodejs ไว้ด้วยนะ

8. AutoFileName
ช่วยได้เยอะเวลาต้องเขียนโค้ดเรียกใช้ไฟล์รูปภาพหรือ Library