แนะนำ extension ที่ผมใช้ร่วมกับ VS Code

VS Code เป็นเครื่องมือช่วยเขียนโค้ดอีกตัว ที่ผมกำลังจะนำมาแทน Netbeans เนื่องจากประสบปัญหา Netbeans ช้าในบางครั้ง ซึ่งก่อนที่ผมจะนำมาใช้งานจริงผมจำเป็นต้องปรับแต่ง VS Code ให้มีสภาพแวดล้อมเหมาะสมในการทำงานของผมเสียก่อน ด้วยการติดตั้ง extension ต่างๆ ตามที่ผมใช้งานเป็นประจำ

บอกก่อนเลยว่า extension ที่ผมใช้เหล่านี้เหมาะสำหรับ Web Devloper เท่านั้น (PHP SQL CSS HTML Javascript) เนื่องจากผมทำงานในสายนี้ และผมก็ได้ติดตั้ง extension ต่างๆ เฉพาะเท่าที่จำเป็นต่อการทำงานเท่านั้น

กลุ่มแรก Beautifier เป็น extension ที่เอาไว้ใช้จัดรูปแบบโค้ดให้อ่านง่าย และเป็นไปตามมาตรฐาน
  • Prettier - Code formatter เป็น extension สำหรับการจัดรูปแบบโค้ด Javascript และ CSS
  • phpfmt - PHP formatter เป็น extension สำหรับการจัดรูปแบบโค้ด PHP
  • vscode-php-cs-fixer extension สำหรับการจัดรูปแบบโค้ดตามมาตรฐาน PSR ช่วยให้โค้ดเป็นระเบียบ
สำหรับโค้ด formatter ผมใช้ร่วมกับการตั้งค่าด้านล่าง ให้มันจัดรูปแบบโดยอัตโนมัติ เมื่อมีการกดบันทึก
"editor.formatOnSave": true,
หมายเหตุ ที่ต้องมีหลายตัว เพราะแต่ละตัวมีความสามารถแตกต่างกัน เลยต้องนำมาใช้ร่วมกัน

กลุ่มที่สอง เป็น Tools หรือเครื่องมือช่วยในการเขียนโค้ด
  • sftp sync extension for VS Code เป็น extension ที่สำคัญสำหรับผมอันหนึ่งเลยทีเดียว มันมีความสามารถในการ sync ไฟล์โค้ดของเราจากเครื่องที่เราใช้ในการเขียนโปรแกรม กับบน Server จริงๆ ซึ่งมันมีคุณสมบัติที่ค่อนข้างครบถ้วนทีเดียว
    • สามารถอัปโหลด ดาวน์โหลดไฟล์ ระหว่าง local และ บน Server ได้
    • สามารถเปรียบเทียบไฟล์ทั้งโปรเจ็ค ระหว่าง local และ บน Server ได้ และอัปโหลดเฉพาะไฟล์ที่มีการเปลี่ยนแปลงได้ ช่วยลดระยะเวลาการ sync ไฟล์
    • สามารถอัปโหลดไฟล์ได้ทันทีที่มีการบันทึกไฟล์
    • สามารถตรวจจับการเปลี่ยนแปลงไฟล์โดยโปรแกรมภายนอก แล้วอัปโหลดให้โดยอัตโนมัติหากไฟล์มีการเปลี่ยนแปลง
การตั้งค่า extension ตัวนี้ผมใช้การตั้งค่าตามนี้เลยครับ (ค่าเริ่มต้นของมันมีมาให้นิดเดียว)
{
  "protocol": "ftp",
  "host": "host",
  "username": "username",
  "password": "password",
  "remotePath": "./public_html",
  "uploadOnSave": true,
  "syncMode": "full",
  "ignore": [
    "\\.vscode",
    "\\.git",
    "\\.DS_Store",
    "/datas/*",
    "/language/*",
    "/settings/*"
  ],
  "watcher": {
    "files": "**",
    "autoUpload": true,
    "autoDelete": true
  } 
}
  • Intelephense extension ตัวนี้เป็นที่แนะนำและออกจะมีความสามารถหลายอย่าง ควรติดตั้งไว้
  • PHP Debug Adapter for Visual Studio Code นี่ก็เป็นอีกตัวที่แนะนำ และขาดไม่ได้ สำหรับการ debug โค้ด PHP
  • GitLens สำหรับคนที่ใช้ git ต้องมี แต่ส่วนตัวผมได้ปิดความสามารถบางอย่างของมันเนื่องจากไม่ชอบ เช่นตัวอย่าง มันมีข้อความแสดง You, 7 hours ago ในโค้ด ซึ่งมันเป็นข้อความบอกเวลาที่มีแก้ไขบรรทัดข้างต้นครั้งสุดท้าย ซึ่งบางไฟล์มันแสดงข้อความนี้เยอะมาก หากมีการแก้ไขหลายครั้ง
    ผมทำการปิดความสามารถนี้ด้วยคำสั่งนี้ (การปิดความสามารถนี้จะยังคงเห็นข้อความอยู่แต่จะเป็นสีจางๆ ซึ่งไม่กระทบการดูโค้ด)
    "gitlens.codeLens.enabled": false
    ผลลัพท์เป็นไปดังรูปด้านล่าง
  • PHP DocBlocker สำหรับการสร้างโค้ดส่วน document ของ คลาสหรือ method โดยอัตโนมัติ
  • IntelliSense for CSS class names in HTML เป็น extension สำหรับลิสต์รายการ class ของ CSS ที่มีในโปรเจ็ค
  • Bracket Pair Colorizer สำหรับใส่สีให้กับ วงเล็บ () หรือปีกกา {} แตกต่างกัน extension นี้เหมาะกับ theme ที่เป็นสีดำเท่านั้น เนื่องจากสีของ bracket มองเห็นยากใน theme สีขาว
นอกจากนนี้ยีงมีการตั้งค่าเพิ่มเติมดังนี้
แสดง path บน Title bar จะได้รู้ว่าทำงานอยู่ที่ไฟล์ไหน
"window.title": "${activeEditorMedium}${separator}${rootName} ${dirty}",
เอา $ และ # ออก เพื่อให้สามารถเลือก $variable หรือ # ได้ทั้งข้อความ หรือในการเลือกโค้ดสี
"editor.wordSeparators": "`~!@%^&*()=+-[{]}\\|;:'\",.<>/?",
ลบตัวอักษรว่างท้ายบรรทัดออก
"files.trimTrailingWhitespace": true,
"files.trimFinalNewlines": true,

ปิดแผนที่โค้ดด้านขวา
"editor.minimap.enabled": false,
ยกเลิกการปิด [] และ {} โดยอัตโนมัติ
"editor.autoClosingBrackets": false,
อนุญาติให่ใช้ ' (ฟันหนู) ได้
"prettier.singleQuote": true,
กำหนดการ highlight แถวที่เลขแถวเท่านั้น
"editor.renderLineHighlight": "gutter",
หากใครมี extension อะไร แนะนำสามารถเล่าสู่กันฟังเพิ่มเติมได้นะครับ
ผู้เขียน Goragod โพสต์เมื่อ 03 มิ.ย. 2561 เปิดดู 1,066 ป้ายกำกับ VS Code

เรื่องที่เกี่ยวข้อง

^