FRA500 Software Review : Visual Studio Code

Natdhanai wangwiwatthana
3 min readApr 9, 2021

--

Author : Natdhanai Wangwiwatthana 60340500054

หากใครเป็นสายโปรแกรมเมอร์ ที่มักจะต้องเขียนโค้ดอยู่บ่อย ๆ ก็คงจะคุ้นเคยหรือรู้จักกันเป็นอย่างดี กับเจ้า Visual Studio Code หรือที่เรียกกันสั้น ๆ ว่า VS Code อย่างแน่นอน

Visual Studio Code คืออะไร??

ก่อนอื่นเลย เรามาทำความรู้จักกับ Visual Studio Code กันก่อน ว่าคืออะไร มาจากไหน และมีไว้สำหรับใช้งานประเภทไหนบ้าง Visual Studio Code ก็คือโปรแกรม Code Editor ที่ถูกพัฒนาโดยบริษัท Microsoft ที่เรารู้จักกันดีนั่นเอง สามารถใช้ในการแก้ไขและปรับแต่งโค้ด โดยโปรแกรมนี้เป็นซอฟต์แวร์ประเภท Opensource สามารถนำมาใช้งานได้ฟรี!! ไม่เสียค่าใช้จ่ายใด ๆ และยังสามารถติดตั้งเครื่องมือเสริมเพิ่มได้อีกด้วย ซึ่งจะมีการพูดถึงในส่วนต่อไป

VS Code ช่วยพัฒนางานของเราอย่างไร??

ถ้าพูดถึงที่มาของการเลือกใช้ VS Code นั้น คงต้องเกริ่นก่อนว่า โปรเจคที่กำลังเกิดขึ้นนี้ เป็นการพัฒนาอุปกรณ์ติดตามผู้ป่วย เพื่อลดและป้องกันการเกิดแผลกดทับ โดยตัวอุปกรณ์จะสามารถแจ้งเตือนข้อมูลต่าง ๆ กับผู้ใช้งานผ่านช่องทาง LINE Notification

เราได้เล็งเห็นถึงความสำคัญและความสะดวกสบายของผู้ใช้ จึงมีแนวคิดที่จะพัฒนาเว็บไซต์ขึ้น โดยมีจุดประสงค์คือ เพื่อเพิ่มความสะดวกสบายให้กับผู้ใช้ และเพื่อเพิ่มทางเลือกจากแนวทางในปัจจุบัน จากการแจ้งเตือนผ่านไลน์เพียงช่องทางเดียว ผู้ใช้ก็สามารถล็อกอินเข้าสู่เว็บไซต์ได้อีกด้วย

ด้วยสาเหตุนี้ เราจึงได้มองหาโปรแกรม Editor ที่เหมาะกับเรา เพื่อนำไปใช้ในการพัฒนาเว็บไซต์ จนได้มาเจอกับ VS Code ที่ทั้งใช้งานง่าย โปรแกรมไม่หนักเครื่องจนเกินไป และสามารถติดตั้งง่าย มีลูกเล่นเยอะ ทำให้ตัดสินใจเลือกและนำมารีวิวในครั้งนี้

ทำไมถึงเลือกใช้ VS Code

จุดเด่น

  1. ใช้งานได้ ฟรี!!
  2. เป็นโปรแกรม Opensource ที่มีประสิทธิภาพสูง
  3. ใช้ได้กับหลายระบบปฏิบัติการ เช่น Window, Linux, หรือ MacOS เป็นต้น ทำให้สามารถทำงานข้ามแพลตฟอร์มได้
  4. รองรับการติดตั้งเครื่องมือเสริม (Extension) ได้เยอะ มีให้เลือกใช้มากมาย
  5. รองรับได้หลายภาษา เช่น C#, Java, Python, C++ เป็นต้น
  6. สามารถเชื่อมต่อกับ Git ได้ มีฟังก์ชันการ commit , push , pull ทำให้สามารถทำงานร่วมกันได้สะดวกขึ้น
  7. ใช้งานง่าย ไม่ซับซ้อน
  8. แยก layout ได้ สามารถแบ่งจอดูหลาย ๆ ไฟล์ได้พร้อมกัน

จริง ๆ แล้ว VS Code ยังมีข้อดีและส่วนที่น่าสนใจอีกมากมาย ต่อไปเราจะขอพูดถึงจุดที่อยากให้เพิ่มเติม (ในความคิดเห็นส่วนตัวของผม) กันบ้าง

จุดที่อยากให้เพิ่มเติม

เป็นจุดด้อยเล็ก ๆ น้อย ๆ ที่ถูกตัด GUI designer ออกไป แต่ก็แลกมากับตัวโปรแกรมที่มีน้ำหนักเบาขึ้น และการไม่สามารถเปิดหลาย ๆ folder ได้พร้อมกัน ต้องเลือกอย่างใดอย่างหนึ่ง แอบขัดใจเล็กน้อยแต่ก็ถึงกับเป็นปัญหา

วิธีการติดตั้งโปรแกรม

  1. โดยเริ่มแรกให้เข้าไปที่เว็บ https://code.visualstudio.com/ เพื่อทำการดาวน์โหลดตัวโปรแกรมลงมาในเครื่อง

2. ดับเบิ้ลคลิกหรือคลิกขวาและกด “Open” โปรแกรมที่ดาวน์โหลดมา เมื่อเปิดตัวติดตั้งขึ้นมาหน้าจอแสดงว่า ( Welcome to the Visual Studio Code Setup Wizard ) แล้วเราให้กดปุ่ม “Next >”

3. เลือก “I accept the agreement” และคลิกปุ่ม “Next >”

4. เลือกพื้นที่ในการจัดเก็บโปรแกรม (แนะนำให้ใช้ Default ที่ให้มา) และคลิกปุ่ม “Next >”

5. จากนั้นจะแสดงหน้าจอเลือก ( Select Start Menu Folder ) แล้วก็กดปุ่ม “Next >”

7. เลือกส่วนเพิ่มงานให้เลือก Create a desktop icon และ Add to PATH (requires shell restart) จากนั้นให้คลิกปุ่ม “Next >”

8. คลิกปุ่ม “Install” เพื่อติดตั้งโปรแกรม จากนั้นรอโปรแกรมทำการติดตั้งสักครู่

9. คลิกปุ่ม “Finish” เสร็จสิ้นการติดตั้งโปรแกรม VS Code

10. เมื่อติดตั้งโปรแกรม Visual Studio Code เสร็จแล้วโปรแกรมจะทำการเปิดขึ้นมาก็เป็นถือว่าทำการติดตั้งเสร็จในขั้นตอนการติดตั้งโปรแกรม Visual Studio Code

ตัวอย่าง Extension ที่น่าสนใจ

1. Live Server จะเป็นหน้าจอที่ 2 ช่วยแสดงผลลัพธ์ของโปรแกรมใน Code Editor แบบสดๆ ไม่ต้องนั่งสลับจอ หรือ Refresh ให้เสียเวลา เพื่อให้การเขียนโค้ดนั้นง่าย และเร็วขึ้น

Extension : Live Server

2. Auto Close Tag เป็นส่วนขยายที่มีประโยชน์ในเวลาที่เรานั้นเขียน HTML. เมื่อเราเรียก Tag HTML แล้วในส่วนขยายตัวนี้จะทำหน้าที่ช่วยปิด Tag HTML ที่เปิดไว้ให้โดยอัตโนมัติ เพื่อจะได้ไม่ต้องเสียเวลากับการปิด Tag หรือหาตำแหน่งที่เราลืมปิด

Extension : Auto Close Tag

3. HTML Snippets เป็นส่วนขยายที่ทำหน้าที่แสดงรายการเมื่อเราเริ่มพิมพ์ชื่อแท็ก HTML โดยตัวช่วยนี้จะทำให้เรานั้นเขียน Code ได้รวดเร็วมากขึ้น

Extension : HTML Snippets

4. VS Code Icons จะมาช่วยแยกประเภทของไฟล์ต่าง ๆ ในโปรเจคด้วย Icon หรือสัญลักษณ์ ที่ทำให้ง่ายสำหรับการค้นหา จึงช่วยประหยัดเวลา

Extension : VS Code Icons

บทสรุป

ในความคิดของผมตัวของโปรแกรม Visual Studio Code เป็นโปรแกรมที่ดีอีกตัวในการเขียน code และสามารถติดตั้งปลั๊กอินมากมายเพื่อรองรับภาษาโปรแกรมทั้งหมดที่เราต้องการที่จะพัฒนา เพื่อช่วยปรับปรุง พัฒนาระบบต่างๆ ให้ดียิ่งขึ้น

สุดท้ายนี้ หากข้อมูลบางส่วนในบทความนี้ผิดพลาดประการใด ต้องขออภัยมา ณ ที่นี้และขอขอบคุณทุกท่านที่ให้ความสนใจกับบทความนี้กันนะครับ

--

--

No responses yet