บทความ IT เจ๋งๆ
10 VS Code Extensions ที่ช่วยเพิ่มประสบการณ์ในการพัฒนา Web
30-ต.ค.-24
คัมภีร์เทพ IT
Visual Studio Code มี Extensions มากมายที่คุณสามารถติดตั้งได้เพื่อเพิ่มประสิทธิภาพการทำงานของ Developers และช่วยให้คุณไม่ต้องทำงานที่ซ้ำซากจำเจ และในบทความนี้จะมาแนะนำ 10 VS Code Extensions ที่ช่วยเพิ่มประสบการณ์ในการพัฒนา Web
1. Todo Tree
Extension ที่ทรงพลังสำหรับการสร้าง Reminders เฉพาะตำแหน่ง ของ JavaScript Code Tasks ที่คุณจะต้องกลับมาทำในภายหลัง:
เพียงแค่ใช้ // TODO:
2. Prettier
Prettier เป็นเครื่องมือที่มีประโยชน์มาก มันจะช่วยจัด Format ให้ Code ของคุณโดยอัตโนมัติด้วยกฎที่กำหนดไว้ล่วงหน้าและสามารถปรับแต่งได้ตามต้องการ
มันช่วยให้ Code ทั้งหมดมี Format ที่สอดคล้องกัน และยังช่วยบังคับใช้ Style ที่กำหนดใน Project ที่ทำร่วมกับ Developers หลายคน
Prettier Extension สำหรับ Visual Studio Code ทำให้การใช้งานร่วมกันระหว่าง Code Editor กับ Prettier เป็นไปอย่างราบรื่น คุณสามารถจัด Format Code ได้ง่าย ๆ ด้วย Keyboard Shortcut หรือให้จัด Format ทันทีหลังจากบันทึกไฟล์
ตัวอย่างการทำงานของ Prettier:
3. ESLint
ESLint เป็นเครื่องมือสำหรับค้นหาและแก้ไขปัญหาใน JavaScript Code ของคุณ
มันจะช่วยตรวจสอบทั้งคุณภาพ Code และ Coding Style ให้คุณ อีกทั้งยังช่วยระบุ Programming Patterns ที่อาจนำไปสู่ Bugs ที่ซับซ้อนได้
ESLint Extension สำหรับ Visual Studio Code ทำให้คุณสามารถใช้งาน ESLint ร่วมกับ Code Editor ได้อย่างสมบูรณ์ ซึ่งจะทำให้ ESLint สามารถแจ้งเตือนปัญหาให้คุณได้ทันทีภายใน Editor
ตัวอย่างเช่น มันจะแสดงเส้นหยักสีแดงใต้ Code เพื่อแจ้ง Errors:
คุณสามารถดูรายละเอียด Errors ได้โดยเอา Mouse ไปชี้ไปที่เส้นสีแดง:
รวมทั้งยังสามารถใช้ Problems Tab เพื่อดู Errors ทั้งหมดในทุกไฟล์ใน VS Code Workspace ปัจจุบันได้อีกด้วย:
4. GitLens
GitLens เป็น Extension ที่ทรงพลังอีกตัวหนึ่ง ที่จะช่วยให้คุณใช้ประโยชน์จาก Git Source Control ใน Visual Studio Code ได้อย่างเต็มที่
GitLens จะแสดงข้อมูลสำคัญเกี่ยวกับ Repository และ File ปัจจุบัน เช่น File History, Commits, Branches และ Remotes
เมื่อคุณวาง Cursor บนบรรทัดที่ต้องการใน Editor และ GitLens จะแสดงข้อมูลเกี่ยวกับการ Commit ล่าสุดในบรรทัดที่ถูกแก้ไข:
5. Live Server
Live Server Extension สำหรับ VS Code จะเปิด Local Server ที่ให้บริการ Pages โดยใช้ Contents จากไฟล์ใน Workspace โดย Server จะ Reload โดยอัตโนมัติเมื่อมีการเปลี่ยนแปลงไฟล์ที่เกี่ยวข้อง
ในตัวอย่างด้านล่างนี้ Server จะถูกเปิดขึ้นอย่างรวดเร็วเพื่อแสดง Contents จากไฟล์ index.html เมื่อมีการแก้ไขไฟล์และบันทึก Server จะทำการ Reload ทันที มันจะช่วยให้คุณไม่ต้อง Reload Page ใน Browser เองทุกครั้งที่ทำการเปลี่ยนแปลง
ตามที่เห็นในตัวอย่าง คุณสามารถเปิด Server ใหม่ได้ง่าย ๆ ด้วยการคลิกขวาที่ไฟล์ใน VS Code Explorer แล้วเลือก Open with Live Server:
ปัจจุบัน GenAI กำลังเติบโตอย่างรวดเร็ว และตอนนี้ก็มี Extension ที่ช่วยให้คุณได้รับ Intelligent AI Code Completions ในขณะที่คุณพิมพ์
รวมถึง Chatbot ที่ผสานเข้ากับ IDE ซึ่งบางตัวสามารถใช้ Context จาก Codebase ของคุณได้
AI Extension ที่น่าสนใจ:
- GitHub Copilot: มีค่าใช้จ่าย $10/เดือน
- Coding Beauty Assistant: ใช้ฟรี, แต่หากต้องการ Features เพิ่มเติม จะมีค่าใช้จ่าย $10/เดือน
- Tabnine: มี Free Version, ส่วน Version เต็มราคา $12/เดือน
7. CSS Classname Intellisense Extensions
Extension เหล่านี้ จะช่วยให้การจัดการกับ CSS Classes ทำได้ง่ายขึ้น
CSS Peek จะช่วยให้คุณดูคำจำกัดความของ CSS Style ที่ใช้ใน Class Name หรือ IDs ต่าง ๆ ใน HTML ได้อย่างรวดเร็ว
เพียงกด Ctrl ค้างไว้ แล้ววาง Mouse เหนือ Class Name หรือ ID เพื่อดูคำจำกัดความได้ทันที
IntelliSense for CSS Class Names in HTML สามารถทำงานร่วมกับ CSS Peek ได้
มี Code Completion สำหรับ Class Attribute ใน HTML โดยอ้างอิงจากคำจำกัดความของ CSS ที่มีอยู่ใน Workspace ปัจจุบัน
คุณจะเห็นประโยชน์ของ Extension นี้ ในกรณีที่ต้องทำงานกับ 3Rd Party CSS Libraries ที่มี Classes เป็นจำนวนมาก ๆ
เมื่อติดตั้ง Tailwind CSS IntelliSense คุณจะได้ความสามารถของ CSS Classname Peek และ Auto-Completion ใน Tailwind
8. JavaScript (ES6) Code Snippets
Extension นี้มี Code Snippets มากมายที่ช่วยให้คุณประหยัดเวลาในการเขียน JavaScript ใน ES6 Syntax
นี่คือตัวอย่างที่ใช้ imp และ imd Snippets จาก Extension นี้ เพื่อจะ Import Module 2 Modules ได้อย่างรวดเร็วด้วย ES6 Syntax
9. Visual Studio Intellicode
IntelliCode เป็นอีกหนึ่ง AI Tool ที่ทรงพลัง โดยมันจะสร้างคำแนะนำสำหรับ Code Completion อย่างชาญฉลาดที่เหมาะสมกับ Context ของ Code ปัจจุบัน
วิธีนี้จะใช้ AI Model ที่ถูก Train มาจาก Open-Source Projects ยอดนิยมหลายพัน Projects ใน GitHub
เมื่อคุณพิมพ์เครื่องหมาย . เพื่อเข้าถึง Method หรือ Field ของ Object ตัว IntelliCode จะนำเสนอรายการของ Member ที่มีแนวโน้มว่าจะใช้ในสถานการณ์ปัจจุบัน โดย Items ที่แนะนำจะมีเครื่องหมาย Star กำกับไว้ ดังที่แสดงในตัวอย่างด้านล่างนี้
IntelliCode สามารถรองรับได้หลายภาษา เช่น JavaScript, TypeScript, Python รวมทั้งภาษาอื่น ๆ
10. VSCode Icons
มีชุดของ Icon ให้เลือกใช้เพื่อตกแต่งรูปลักษณ์ของไฟล์ใน Visual Studio Code ซึ่งจะช่วยให้ง่ายต่อการระบุและแยกประเภทไฟล์ต่าง ๆ
VSCode Icons เป็นส่วนหนึ่งในชุดของ Icon ยอดนิยมมากที่สุดชุดหนึ่ง โดยมันมี Icon ให้เลือกมากมายและมียอด Download กว่า 11 ล้านครั้ง
นอกจากการแยกตามนามสกุลของไฟล์แล้ว VSCode Icons ยังมี Icons เฉพาะสำหรับ Files และ Folders เช่น package.json, node_modules และ .prettierrc
ที่มา: https://medium.com/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด