แนะนำ VS Code extensions สำหรับ Nuxt Developer

Vetur

Extensions ยอดนิยมของ Vue และ Nuxt

Vue VSCode Snippets

ตัวช่วยสร้าง Code ไม่ต้องพิมพ์เยอะ เช่นเราสามารถใช้ vbase(เลือกได้ว่าจะเอา Template แบบไหน) Extensions นี้ก็สร้าง tag template, script, style มาให้ 
ตัวที่ผมใช้บ่อยๆก็เช่น vbase, vcomponents, vprops, vfor, v3computed, v3watch, v3on…

Prettier — Code formatter

ตัวช่วยที่จะช่วยให้การเขียนโค้ดเราดูสวยมากขึ้น อ่านง่ายมากขึ้น

ESLint

แนะนำให้เราเขียนโค้ดตามกฎมาตรฐานต่าง อ่านง่ายมากขึ้น

TypeScript Extension Pack

ตัวนี้ช่วยอำนวยความสะดวกในการเขียน TypeScript จะประกอบด้วย Extension 8 ตัว คือ

• TSLint, 
• TypeScript Hero,
• json2ts, 
• Move TS — Move TypeScript files and update relative imports,
• Path Intellisense,
• TypeScript Importer,
• Prettier — Code formatter
• Debugger for Chrome

Tabnine Autocomplete AI

ตัวนี้ข่วย Suggest หรือ Recomment Code ที่เราใช้บ่อยๆ มาช่วยแนะนำเรา เพราะบางทีเราก็จำคำสั่งได้ไม่หมด หรือจำได้ลางๆ ตัวนี้จะช่วยได้ ลองดูแล้วจะติดใจ

SonarLint

ตัวนี้ช่วยตรวจสอบการโค้ด โดยจะเน้นข้อบกพร่องและช่องโหว่ด้านความปลอดภัยในขณะเขียนโค้ดพร้อมคำแนะนำการแก้ไขที่ชัดเจนเพื่อให้สามารถแก้ไขได้ก่อนที่โค้ดจะถูก Commit

Ant Design Vue helper

ตัวนี้ข่วย Suggest หรือ Recomment Code ของ Ant Design Vue

Auto Rename Tag

ตัวนี้ช่วยเปลี่ยนชื่อ Tag เปิดและปิด ของ Html กรณีที่เราต้องการเปลี่ยนชื่อ Tag Extension ก็จะช่วยไป Rename คู่ Tag ที่เราเข้ไปแก้

Bracket Pair Colorizer

ตัวนี้ช่วเปลี่ยนสี () และ {} ช่วยให้สังเกตุง่ายขึ้น ถ้ามีวงเล็บซ้อนหลายๆอัน ทำให้สังเกตุตัววงเล็บเปิดและปิดคู่ตัวได้ง่าย

Highlight Matching Tag

ช่วยหา Tag ปิด ของ Tag ที่ Cursor อยู่

Material Icon Theme

เปลี่ยน Icon ของ File และ Folder ตาม FileType 

GitLens — Git supercharged

เอาไว้ดู History การแก้โค้ด