Packages ที่ใช้ประจำใน Sublime Text 2

Posted by in Coding

Sublime_Text_Logo

พอดีพึ่งลง sublime text 2 ใหม่ กับเครื่องที่ทำงาน ต้องลง packages ใหม่ทั้งหมด เพราะไม่ได้ back up ไว้ คราวนี้เลยลงแต่ตัวที่จำเป็นๆ ต้องใช้ วันนี้จะลิสให้ดูว่า วันๆ เราใช้อะไรช่วยในการทำงานบ้างค่ะ

ชีวิตการทำงานด้าน Web ส่วน coding หลักๆ ของเราคือ

  • ขึ้นหน้าเว็บหลักๆ ด้วย HTML, CSS
  • เขียน JQuery บ้างนิดๆ หน่อยๆ (เฉพาะส่วนที่เกี่ยวข้องกับ UI)
  • แก้ โค้ด PHP บ้าง ตามความสามารถจะพึงมี
  • ใช้ SASS + Compass ช่วยในการเขียน CSS
  • ใช้ Emmet (Zen Code) ช่วยในการเขียน HTML
  • และใช้ Sublime Text 2 ในการเขียนโค้ด

จากลิสข้างบน คงรู้แล้วว่า package ที่เราใช้จะเหมาะกับใครนะคะ ส่วนใครที่เป็นสายโปรแกรมเมอร์จ๋า ก็คงไม่เหมือนกันเนอะ เราเป็นพวกสายเขียนเอาขำๆ สนุกสนาน สวยงาม และ เห็นผลชัดเจน แถมไม่ได้ทำงาน coding พวกนี้ตลอดเวลาด้วย บางช่วงก็ต้องไปทำงานด้านออกแบบไม่ได้ code เลยเหมือนกันค่ะ

Packages Control 

ตัวนี้เป็นตัวที่เราคิดว่า ทุกคนต้องลงใน Sublime Text 2 เลยก็ว่าได้ เป็น Package ที่ทำช่วยจัดการ Package ต่างๆ ใน Sublime Text 2 ได้ง่ายๆ ทั้งการค้นหา/Install/Remove Package โดยที่ไม่ต้องไปนั่ง Download เอง

Sublime CodeIntel

อีก Package ที่ต้องมีไว้ติดเครื่อง ตัวนี้จะช่วยหาคำในไฟล์ต่างๆ ที่เราเปิดไว้ แล้วขึ้น auto complete ให้

SASS + Compass

ลง SASS และ Compass เพื่อรองรับการอ่านไฟล์ format .sass และ .scss นอกจากนี้ในตัว Compass ยังมีตัว Compass Build เข้ามาให้ด้วย ทำให้เราสามารถ Build Compass project ผ่าน Sublime ได้เลย (แต่สำหรับตัว sass ไม่ได้รวมตัว build ของ sass มาให้ด้วย ต้องลง Sass Build เพิ่มเอาเองค่ะ)

Emmet

ลงเพื่อให้เราใช้ Emmet ได้นั่นเอง

SublimeOnSaveBuild

Package อันนี้จะช่วยให้เรา Build project ทุกครั้งหลังจากที่เรากด save ไฟล์ ในกรณีของเรา เราสั่งให้มัน Build Compile SASS ให้ ผ่าน compass โดยต้องลง Package SASS และ Compass ก่อน

Bracket Highlighter

เป็น Package ที่จะ Highlight จับคู่ วงเล็บต่างๆ ให้เห็นชัดๆ ใช้แล้ว ทำให้สะดวกเวลาหาบักดีค่ะ

Sidebar Enhantments

ตัวจัดการ Sidebar ใน Sublime Text 2 ทำให้เราสามารถ cut, paste, move และอื่นๆ กับ file, folder ต่างๆ ใน sidebar ได้

TrailingSpaces

ตัวนี้จะช่วย Highlight พวก White Space ที่อยู่ตรงปลายของบรรทัด ที่เป็นส่วนที่ไม่มีประโยชน์อะไร และจะช่วยลบ White Space ส่วนเกินพวกนี้ทิ้ง ตอนที่เรา Save ไฟล์ด้วย

DocBlockr

ช่วยให้เราจัดการการ comment ต่างๆ ได้สะดวก และเป็นระเบียบขึ้น

csscomb

ตัวนี้จะช่วยเรียง css properties ให้เรียงแบบสวยงามอ่านง่ายน่ามอง

 

พอแค่นี้ก่อนละกันนคะ จริงๆ เราใช้เยอะกว่านี้นิดหน่อย แต่ก็เป็นแค่พวกธีม หรืออะไรแนวความสวยงาม ส่วนนี้มันแล้วแต่ว่า ใครจะชอบแต่งแบบไหนมากกว่า นอกจากนี้เราก็เขียนคำสั่ง Custom Build ขึ้นมาเอง เพื่อให้ใช้งานได้สะดวกๆ แต่ก็ไม่ได้รู้อะไรลึกมากมาย

ปล. เราพึ่งเริ่มใช้ Emmet ได้ราวๆ สัปดาห์ก่อนเองค่ะ ตอนนี้ไม่คล่องมาก แต่ก็ชีวิตมีความสุขขึ้นอีกเยอะ รู้สึกดีขึ้น เหมือนตอนที่ได้รู้จัก SASS (อย่าถามว่าทำไมไม่ใช้ Less นะคะ เพราะเรายังไม่มีเวลาลอง Less เลยต่างหาก)