วิธีตั้งค่า VSCode เพื่อใช้กับ NestJS

#Dev#Javascript#Nestjs#Backend#Vscode#Settings

สำหรับ NestJS (opens new window) นั้น ตอนนี้ผมก็จะ Dev ใน VSCode เป็นหลัก ไม่แน่ใจว่าถ้าเปลี่ยนไปใช้ Webstorm จะง่ายกว่ารึไม่นะ

แต่ถ้าคุณใช้ VSCode เหมือนกับผมแล้วล่ะก็ วันนี้ผมจะมานำเสนอวิธีการตั้งค่าเพื่อให้ชีวิตง่ายขึ้น?

ตั้งค่า settings.json

.vscode/settings.json

{
  "editor.tabSize": 2,
  "eslint.validate": ["typescript", "typescriptreact"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "typscript.validate.enable": false,
  "typscript.format.enable": false,
  "editor.formatOnSave": true,
  "debug.node.autoAttach": "on",
  "debug.openDebug": "neverOpen"
}

ทั้งหมดนี้จะเป็นการตั้งค่าให้ VSCode จัด Format โค้ดทันทีที่เราเซฟไฟล์ต่างๆ

และเมื่อเราสั่ง npm run start:debug ใน Terminal ที่อยู่ข้างใน VSCode
ตัว VSCode จะเริ่ม Debug Mode ทันที เราสามารถกดสร้าง Breakpoints เพื่อหยุดบรรทัดโค้ดของเราได้เลย

ติดตั้ง VSCode Extension

ที่จะติดตั้งหลักๆก็คือตัวช่วยในภาษา TypeScript และ ตัวช่วยในการทำ Testing

Typescript Extension Pack

เป็น Pack รวมหลายๆเครื่องมืออำนวยความสะดวกของภาษา TypeScript รายละเอียดเพิ่มเติมอ่านในลิงก์ได้เลยครับ
Download (opens new window)

Jest

และถ้าหากเราต้องการให้ VSCode ทำการ Automate Testing ด้วยความที่ NestJS จะทำการติดตั้ง Jest (opens new window) มาเป็นตัวทำ Testing เราก็จะใช้อันนี้ล่ะ
Download (opens new window)

ทีนี้ทุกครั้งที่เราเซฟไฟล์ก็จะเกิดการทำ Testing โดยอัตโนมัติ

---