เทคนิคทำงานกับ TypeScript แบบไม่รกตา กับ Visual Studio Code

Visaul Studio Code ที่เป็นโปรแกรมหากินตัวล่าสุดที่พลคิดว่ามันเวิร์คมาก หลังจากตัดสินใจเปลี่ยนจาก Sublime Text และ Atom เพราะมันเหมือนรวมข้อดีของทั้ง 2 โปรแกรมไว้ นั่นคือ เร็ว, มีส่วนเสริมเพียบ, และรองรับภาษาไทย

ยิ่งหลังๆ มานี่ พวกเราหลายคนเริ่มเอาเครื่องมืออย่าง Angular หรือ React มาใช้ทำงานกันเยอะขึ้นเรื่อยๆ โดยเฉพาะ Angular เนี่ย จะไม่พ้นการเขียนภาษา TypeScript เลย

และถ้าใช้มาได้สักพัก จะรู้ว่าพลังอันยิ่งใหญ่ที่ TypeScript นำมาให้ในฝั่งคนทำเว็บ Front-End นั้น มาพร้อมกับความรับผิดชอบที่ใหญ่ยิ่ง แถมสับสนสำหรับมือใหม่อีกต่างหาก

วันนี้เลยขอรวมวิธีปรับให้ Visual Studio Code ของเรามันเป็นสวรรค์สำหรับคนที่ต้องเขียน TypeScript มาไว้ที่นี่ สำหรับคนที่เรียน Ionic 2, MEAN Stack, NativeScript กับโค้ชพลไป ก็ใช้ได้นะ

วิธีซ่อนไฟล์ JavaScript ที่ได้จาก TypeScript ในโปรเจค

ปัจจุบัน TypeScript จะต้องถูกแปลง (transpiled) เป็นภาษา JavaScript เพื่อง่ายในการนำไปใช้บนเว็บแอพพลิเคชั่น

ซึ่งในความเป็นจริงแล้ว ไฟล์ JavaScript (.js) เหล่านี้มันออกจะรกหูรกตานักพัฒนา เหลือเกิน เพราะถ้าไม่จัดให้ดี มันก็จะโผล่มากองรวมกับไฟล์ TypeScript (.ts ) ในโปรเจค

ซ่อนมันได้ง่ายๆ ด้วยวิธีต่อไปนี้

1. เปิด Preferences > Settings
2. ค้นหาส่วนที่ชื่อว่า files.exclude
3. ทำการเพิ่มส่วนที่ชื่อ “**/*.js”: { “when”: “$(basename).ts”}  เข้าไป

เช่นของที่ VSCode ให้มาเป็นแบบนี้

"files.exclude": {
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/.DS_Store": true
}

ก็ให้เพิ่มเข้าไปแบบนี้

"files.exclude": {
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/.DS_Store": true,
        "**/*.js": { "when": "$(basename).ts"}
}

เสร็จแล้วอย่าลืมบันทึก Setting ล่ะ

วิธีนี้จะทำให้เกิดการซ่อนไฟล์ .js  ในกรณีที่มีไฟล์ .ts  ชื่อเดียวกัน เท่านี้ก็จะโล่งโปร่งสบายตามากขึ้นแล้ว

• ติดตามจากแฟนเพจ Nextflow
• กดติดตามคลิปใหม่ๆ  Subscribe YouTube Channel ของพลได้เลย
• โทรติดต่อบริการจัดอบรม 083-071-3373 คลิกโทรผ่านมือถือได้เลย
• สอบถามผ่านทาง LINE คลิก
• สอบถามผ่านทาง Facebook คลิก