Node.js Tools for Visual Studio มีดีอะไร

logo.png
ชีวิตนี้ยังหนีไม่พ้น Microsoft จริงๆ เพราะตอนนี้ Microsoft ได้ออก Node.js Tools for Visual Studio (ณ วันนี้ก็ version 1.2 แล้ว) ซึ่งเป็น Extension เสริมที่ทำให้ Visual Studio(ตัวเต็ม) นั้นทำงานกับ Node ได้อย่างมีประสิทธิภาพมากขึ้นซึ่งสามารถใช้ได้กับ VS2015 – Official Link

พอลงไปแล้วก็จะมี Node.js Tools โผล่มาตรงนี้

node_tool

จากที่ Microsoft โปรโมทก็มีคร่าวๆ ดังนี้

Project Templates

ซึ่งทำให้เราสร้าง Project โดยเลือกได้เลยว่าจะเอา โปรเจคเปล่าๆ หรือมาพร้อมกับ Code ตัวอย่างที่เขียน http server ง่ายๆ ถ้ากลัวเริ่มไม่ถูก

templates
เห็นว่ามี templates ให้เลือกเต็มเลย

IntelliSense

ซึ่งผมลองแล้วก็บอกได้ว่า สมตามที่โฆษณาไว้ เพราะมันมี icon แสดงให้ดูง่ายและเร็วด้วย (สำหรับ Build-in Function นะครับ ถ้าเป็น module ที่เราใช้อาจจะต้องไปใช้ TypeScript เหมือนให้มี IntelliSense)
intellisense.png

Npm Integration

มีหน้าจอที่เป็น UI ให้ใช้ในการหา module ต่างๆ ได้ง่ายขึ้นสำหรับคนที่ไม่สันทัด command line

npm_1.png
เวลา Right Click ที่ npm folder ใน Project
npm_2
พิมพ์ “mocha” ไปก็มี version ต่างๆให้เลือก (แต่ผมว่าใช้ commandline เร็วกว่านะ :p )

Interactive Window

เป็นหน้าต่างที่เอาไว้ลอง Code JavaScript แบบทันทีทันใจแถมยังมี syntax Hilight กับ IntelliSense ให้ด้วย

interact_win
เปิดจากตรงนี้
interact_win2
หน้าต่างเปิดมาเป็นแบบนี้
interact_win3
ลองพิมพ์ function บวกเลขไปดูครับ ขึ้น Undefined…
interact_win4
ลองใส่ add(1,2) ดู ก็จะได้คำตอบออกมาเป็น “3”

Advanced debugging

ใช้ในการ Debug เช่น การตั้ง break points หรือการใช้งานพวก Watch ในการดูค่าตัวแปรต่างๆ ซึ่งทำได้ดีมากเหมือน C# ตรงนี้ผมว่า Powerful จริง

debug
ยกตัวอย่างมี express app ตัวนึงรับ ‘GET’ request มาครับ

จะเห็นว่าเราเห็นค่าของตัวแปร req ทั้งหมดเลย

debug_2
req.headers เราเห็นหมด ง่ายๆแบบนี้ (y)

 

และอื่นๆอีกมากมาย เช่น Profiling (ตัวนี้เด็ดมากกกก), Unit Testing, TypeScript Integration

ปล. ตอนแรกว่าจะเขียนเรื่อง Profiling แต่เห็น Features อื่นก็น่าสนใจไม่น้อยเลยเอามาเขียนก่อนครับ 😉

One thought on “Node.js Tools for Visual Studio มีดีอะไร”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s