ปัจจุบันภาษาของการเขียนโค้ดสำหรับพัฒนาซอฟท์แวร์มีเป็นจำนวนมาก การมีโปรแกรมสำหรับการเขียนโค้ดที่ดี ใช้งานง่าย จึงเป็นสิ่งจำเป็นอย่างมากสำหรับ Developer วันนี้เราจึงจะมาแนะนำโปรแกรมหนึ่งซึ่งขาดไม่ได้สำหรับนักพัฒนาโปรแกรม ที่ชื่อว่า Visual Studio Code เราจะมาดูกันว่าโปรแกรมนี้ทำอะไรได้บ้างในบทความนี้ ไปดูกันครับ
Table of Contents
Visual Studio Code หรือ VS Code คืออะไร
Visual Studio Code หรือ VS Code คือ โปรแกรม Code Editor ของ Microsoft ที่ใช้สำหรับเขียน แก้ไขและตรวจสอบความผิดปกติของโค้ด คุณสมบัติของโปรแกรมมีลักษณะเบา มีประสิทธิภาพสูง มีส่วนขยาย (Extension) เพื่อเพิ่มขีดความสามารถและสามารถเขียนโค้ดได้หลากหลายภาษา ต่อไปนี้เราจะเรียกสั้นๆ ว่า VS Code และให้ทุกท่านเข้าใจตรงกันนะครับว่า มันคือ โปรแกรม Visual Studio Code นั่นเอง
VS Code ใช้ฟรีไหม
VS Code เป็นโปรแกรมฟรี โดยมีไลเซ่นส์แบบ MIT License ไม่จำกัดจำนวนการใช้งาน แต่ในกรณีที่มีส่วนเสริมเป็น Third Party จะต้องดูไลเซ่นส์แยกต่างหากของแต่ละส่วน
VS Code เขียนภาษาอะไรได้บ้าง
VS Code สนับสนุนการเขียนโค้ดแทบทุกภาษาคอมพิวเตอร์ เช่น JavaScript, TypeScript, CSS และ HTML และยังมีส่วนขยาย (Extension) ภายในพื้นที่ขายของ VS Code Marketplace ให้เราเลือกใช้ได้อีกมากมาย ด้านล่างคือตัวอย่างโค้ดที่โปรแกรม VS Code สนับสนุน
- JavaScript
- C#
- Java
- Markdown
- TypeScript
- C++
- JSON
- Powershell
- Python
- HTML
- PHP
- YAML
VS Code download
เราสามารถทำการดาวน์โหลดโปรแกรม Visual Studio Code ได้จากหน้า ดาวน์โหลดโปรแกรม Visual Studio Code (https://code.visualstudio.com/Download) โดยโปรแกรมนี้สามารถใช้งานได้กับ Operating Systems ที่เป็น Windows, Linux และ Mac
- Windows – Windows 10, Windows 11
- Linux – Debian, Ubuntu, Red Hat, Fedora และ Suse)
- Mac – macOS 10.15+
VS Code online
นอกจากโปรแกรม VS Code ที่เราทำการติดตั้งบนเครื่องคอมพิวเตอร์แล้ว VS Code ยังมีแบบออนไลน์mที่เรียกว่า VS Code for web ให้เราสามารถใช้งานได้ทุกที่อีกด้วย โดยให้เราเปิดไปที่ VS Code Online
แนะนำ VS Code Extension
สำหรับ Extension ของ VS Code ที่น่าสนใจ ได้แก่
Github copilot – Your AI pair programmer
Github copilot เป็นเครื่องมือการเขียนโปรแกรมที่ใช้ AI ในการช่วยเขียนโค้ดทำให้เราสามารถทำการเขียนโค้ดได้เร็วและฉลาดขึ้น ปัจจุบันให้เราสามารถทำการทดลองใช้งานฟรีได้ 30 วัน และใช้งานผ่านการสมัครใช้งานของ Github Copiot subscription หากสนใจสมัครราคาจะอยู่ที่ 10 USD ต่อเดือน สำหรับ Copilot Individual และ 19 USD ต่อเดือนสำหรับธุรกิจ และ 39 USD ต่อเดือนสำหรับองค์กร ดุราคา Github Copilot extension https://github.com/features/copilot?utm_source=vscode-completions&utm_medium=readme&utm_campaign=2024q3-em-MSFT-signup
Python
Python extension เป็นส่วนขยายที่ใช้สำหรับภาษา Python มีทุกเวอร์ชั่นที่สนับสนุนอยู่ สามารถใช้งานในสนับสนุนการใช้งาน IntelliSense (Pylance) การตรวจสอบโค้ด Python การจัดรูปแบบและนำทางโค้ด การลินต์ (Linting) การรีแฟคเตอร์ (Refactoring) และอื่นๆ
Prettier Formatter for Visual Studio Code
Prettier Formatter extension นี้เป็นส่วนขยายสำหรับการจัดรูปแบบของโค้ดให้สวยงาม รองรับภาษา JavaScript, TypeScript, Flow, JSX, JSON, CSS, SCSS, Less, HTML, Vue, Angular, YAML และอื่นๆ
Live Preview
Live Preview extension เป็นส่วนขยายที่ใช้กับ HTML code เราสามารถใช้งานพร้อมๆ กับการเขียนโค้ดและดูการเปลี่ยนแปลงของหน้าตาเว็บไซต์ที่เขียนโดย HTML ได้ในทันที่
วิธีใช้ VS Code
โปรแกรม VS Code นี้ ประกอบด้วยส่วนสำคัญ 4 ส่วนด้วยกัน ได้แก่
ส่วน Workspace พื้นที่การทำงาน
เป็นพื้นที่ใหญ่ที่สุดกลางจอ มีไว้เพื่อให้เราสามารถเขียนโค้ดต่างๆ
ส่วน Activity Bar
ส่วน Activity Bar นี้เป็นแถบเมนูด้านซ้ายมือ ประกอบไปด้วย
- Explorer ใช้สำหรับดูชื่อไฟล์ต่างๆ เพื่อใช้ในการเปิดไฟล์
- Search ใช้สำหรับค้นหาโค้ดที่อยู่ภายในไฟล์
- Source Control ใช้สำหรับควบคุม Source code ผ่าน Git และ Github
- Run and Deploy ใช้สำหรับรันโค้ดและใช้งาน
- Marketplace ใช้สำหรับแสดงส่วนขยาย (Extension) สำหรับ VS Code
ส่วน Command Palette
ส่วนนี้จะอยู่ตรงเมนู View > Command Palette เป็นส่วนเรียกคำสั่งการใช้งานต่างๆ ภายใน VS Code ยกตัวอย่างเช่น การเปลี่ยนสีธีมของโปรแกรม (VS Code theme color)
ส่วน Problems /Output Panel / Debug Console / Terminal
ส่วนนี้จะประกอบด้วย 4 ส่วนด้วยกัน ทำหน้าที่ต่างกัน ขึ้นกับภาษาที่เขียน ได้แก่ การแสดงปัญหาของโค้ดที่เขียน การแสดงผลลัพธ์ การตรวจสอบ และเทอร์มินอล
ส่วน Status bar
ส่วน Status bar จะอยู่ที่แถบด้านล่างสุดสีน้ำเงิน จะบอกว่า เราเขียนโค้ดไปแล้วกี่คำ กี่บรรทัด ภาษาที่เขียน และรายละเอียดอื่นๆ
การเปลี่ยนธีมของ VS Code
เราสามารถเปลี่ยนธีมหรือสีหน้าตาของโปรแกรมได้ (VS code change theme) โดยให้ไปที่ Command Palette ทำการพิมพ์คำว่า Color เลือก Preferences: Color Theme แล้วเลือกสีที่เราต้องการใช้งานได้
สรุปส่งท้าย
VS Code เป็นโปรแกรม Code Editor ที่ได้รับความนิยมอย่างมาก เพราะสามารถทำงานได้หลากหลาย และหากเรานำมาใช้งานคู่กับ AI จะทำให้มีประสิทธิภาพในการเขียนโค้ดที่เร็วและถูกต้องกว่าโปรแกรม Code Editor อื่นๆ ผมจึงอยากแนะนำให้มาใช้โปรแกรมนี้กันเยอะๆ และเขียนโค้ดอย่างมีความสุขกันนะครับ สำหรับบทความนี้ก็ขอจบลงเพียงเท่านี้ สวัสดีครับ
