บทความ IT เจ๋งๆ
15 VS Code Extensions ที่ช่วยให้คุณ Develop ได้เร็วขึ้น
26-ก.พ.-20
คัมภีร์เทพ IT
ใน VS Code เองมี Marketplace ด้วย ซึ่งมี Collection ของ Plugins ที่สามารถ Install ใน Text Editor ทำให้มีประสิทธิภาพมากขึ้น โดยคุณสามารถเปิด Marketplace ได้ด้วยการเลือก Extension option ใน View menu หรือเพียงแค่กดปุ่ม shift + cmd + X โดยในบทความนี้จะมาแนะนำ 15 VS Code Extensions ที่ช่วยให้คุณ Develop ได้เร็วขึ้น
1. Live Server
Extension นี้จะช่วยให้สามารถ Reload Web Page ได้โดยอัตโนมัติเมื่อคุณเปลี่ยนแปลงแก้ไข Code ใน IDE ของคุณ
เมื่อติดตั้ง Live Server แล้ว คุณสามารถคลิกขวาที่ Html File แล้วคุณจะเห็น option Open with Live Server[Alt + L + Q]
2. Quokka.js
Quokka.js จะคำนวณผลลัพธ์ที่คุณกำลังพิมพ์ และ Print ผลลัพธ์ใน IDE โดยอัตโนมัติ
Spell Checker ตัวนี้จะช่วย Report ถึง Error จากการสะกดผิดที่มักพบบ่อย ๆ ซึ่งมันจะทำงานได้เป็นอย่างดีกับ camelCase code
4. GitLens
GitLens จะช่วยเพิ่มขีดความสามารถของ Git ที่สร้างขึ้นใน Visual Studio Code มันช่วยให้คุณเห็นว่าใคร Commit Code ไปและเมื่อไร่ได้อย่างรวดเร็วผ่าน Git Blame Annotations มันจะเข้าไปสำรวจ Git Repositories อีกทั้งจะได้ข้อมูลเชิงลึกผ่าน Comparison Commands ที่มีประสิทธิภาพ รวมทั้งอื่น ๆ อีกมากมาย
5. Prettier (Code Formatter)
Prettier เป็นตัวจัด Format Code มันจะทำให้ Code มี Style ที่สอดคล้องกันโดยการแยก Code ของคุณและ Re-print อีกครั้งตามกฎของมันเอง นี่เป็น Tool สำคัญที่ช่วยให้คุณสามารถจัด Format Code ได้อย่างถูกต้องโดย Developer ไม่ต้องใช้ความพยายามมากนัก Prettier มาพร้อมกับค่า Default ที่สมเหตุสมผล แต่คุณยังสามารถจัดเตรียม Configuration File ที่ Root ของProject เพื่อกำหนด Standard ของคุณเอง เช่น ความยาวของบรรทัด, จำนวน Tabs/Spaces และอื่น ๆ อีกมากมาย หากคุณต้องการ Install สามารถคลิกได้ที่นี่
6. ESLint
ESLint เป็น Tool ที่ใช้ในการวิเคราะห์ Code สำหรับการระบุรูปแบบของปัญหาที่พบใน JavaScript Code ซึ่งกฎใน ESLint สามารถ Configure และกฎที่ถูก Customize จะถูก Define และ Reload ได้ ESLint สามารถครอบคลุมทั้ง Code Quality และ Coding Style Issues
7. vscode-icons
สิ่งนี้จัดเตรียม Icon ถัดจาก File Name ในมุมองแบบ Tree ตาม File Extension มันทำให้ง่ายต่อการระบุ File ของคุณได้อย่างรวดเร็ว
นี่เป็น VS Code Extension ที่ช่วยให้คุณสามารถ Compile/Transpile SASS/SCSS ของคุณไปยัง CSS File แบบ Real Time ด้วย Live Browser Reload
9. JavaScript (ES6) code snippets
Extension นี้ประกอบไปด้วย Code Snippets สำหรับ JavaScript ใน ES6 Syntax สำหรับ VS Code Editor (รองรับทั้ง JavaScript และ TypeScript)
10. Browser Preview
Browser Preview สำหรับ VS Code ช่วยให้คุณสามารถเปิดดู Browser Preview จริง ภายใน Editor ที่คุณสามารถ Debug มันได้
สิ่งนี้จะช่วย Autocomplete ทั้ง Path และ File Names ใน Code ของคุณ
Extension นี้ช่วยให้สามารถจับคู่ของวงเล็บได้ด้วยสีที่เมือนกัน โดย User สามารถกำหนดตัวอักขระที่จะให้จับคู่ รวมทั้งสีที่จะใช้
13. Vim
VSCodeVim เป็น Vim Emulator สำหรับ Visual Studio Code มันช่วยเพิ่มประสิทธิภาพของ Vim ให้ Text Editor ของคุณ หากคุณต้องการ Install สามารถคลิกได้ที่นี่
14. TODO Highlight
สิ่งนี้จะช่วยเน้น TODO, FIXME และ Annotations อื่น ๆ ใน Code ของคุณ
15. Color Highlight
Extension นี้มี Style สี CSS/Web ที่พบใน Document ของคุณ ทำให้คุณสามารถดูสีของพวกมันโดยไม่จำเป็นต้องเปิด Page ขึ้นมา
ที่มา: https://levelup.gitconnected.com/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด