Visual Studio Code ตอนที่ 2 : Extension และ Theme

จากบทความที่แล้ว Visual Studio Code ตอนที่ 1 : การใช้งาน เราได้พูดถึงการติดตั้ง และหน้าตาของตัวโปรแกรมคร่าวๆ ไปแล้ว มาถึงในบทความนี้ เราจะมาใช้งาน Extension และ Theme เพื่อมาเสริมความสามารถและหน้าตาของเจ้า VSCODE กัน โดยเรามาเริ่มกันที่การเพิ่ม Extension กันนะครับ

ก่อนจะไปรู้การเพิ่ม Extension เรามารู้กันก่อนว่า Extension คืออะไร แล้วมีความสามารถอะไรกัน

Extension คืออะไร 

Extension คือตัวเสริมที่เอามาใช้เพิ่มเติมในตัวโปรแกรม VSCODE เพื่อให้ VSCODE อำนวยความสะดวกกับเรามากขึ้น ตาม Extension ที่เราโหลดมาเสริม ถ้าคนที่เคยใช้ Text Editor แบบ Sublime Text กันมาแล้ว ตัวเสริมของ Sublime Text จะใช้ชื่อเรียกว่า Package ซึ่งมีหน้าที่การทำงานที่เหมือนกัน แต่แตกต่างกันแค่ชื่อเรียก

เราก็รู้กันคร่าวและนะครับว่ามันคืออะไร แต่อาจจะยังไม่เห็นภาพ งั้นผมจะสาธิตการเพิ่ม Extension ว่าทำยังไงและดียังไงกันนะครับ

การติดตั้ง Extension

สำหรับการติดตั้ง Extension นะครับ อย่างแรกก็เปิดโปรแกรม VSCODE ( Visual Studio Code ) ขึ้นมาก่อน

โดยการติดตั้ง สามารถเข้าได้หลายแบบนะครับ โดยการไปที่ View > Extension  หรือกดปุ่มคีย์ลัด Ctrl + Shift + X 

หรือจะเข้าอีกทางนึงก็ทางด้านซ้ายมือของโปรแกรมจะมีไอค่อนรูป สี่เหลี่ยม เราก็ทำการคลิกเข้าไปได้เลยแบบในรูปนี้

ไม่ว่าเราจะเข้าแบบไหน เมื่อเข้าเสร็จแล้วก็จะมีหน้า Extension แสดงขึ้นมาด้านซ้ายมือแบบนี้

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

พอเราเลือก Extension ที่เราต้องการแล้ว เราก็ทำการ กด ติดตั้งมันได้เลยครับ โดยการคลิกที่ Install 

เมื่อทำการติดตั้งเสร็จแล้วให้เราทำการกด Reload เพื่อให้โปรแกรมทำงานใหม่อีกรอบนึงครับ

โดยการใช้งาน Extension ที่เราต้องการเราสามารถดูได้ในรายละเอียดของแต่ละ Extension ได้เลย

ก็เป็นอันเสร็จสิ้นกับการติดตั้ง Extension มาช่วยการใช้งานเราครับ โดยผมจะแนะนำ Extension ก็มีดังนี้

1. HTML Snippets

ความสามารถของมันก็คือ เมื่อเราต้องการพิมพ์ Tag HTML เราไม่จำเป็นต้องเขียนทั้งหมด อย่างเช่น เราจะพิมพ์ ลิงค์ url เราก็แค่ทำการ พิมพ์ a ละกดปุ่ม Tab บนคีย์บอร์ด มันก็จะเขียน Tag a ทั้งหมดมาให้เราเลยอัตโนมัติ 

2. Path Intellisense

ความสามารถของตัวนี้ก็คือมันจะแสดงข้อมูลของโฟลเดอร์ที่อยู่ภายในโปรเจคของเราเมื่อเราทำการพิมพ์ Tag ต่างๆ ที่ต้องมีการดึงไฟล์จากโปรเคมาใช้งาน 

3. CSS Peek

ความสามารถของตัวนี้ก็คือ เมื่อเรากำหนด Class เอาไว้เราสามารถคลิกที่ชื่อ Class เพื่อเข้าสู่ไฟล์ CSS ได้เลย

4.Sublime Text Keymap

สำหรับคนที่มาจาก Sublime Text และคุ้นเคยกับ Key Shortcut ก็สามารถเพิ่ม Extension ตัวนี้ลงไปได้เลย

ทั้งหมดนี่ก็คือ Extension คร่าวๆ ที่ผมนำมาแนะนำนะครับ ส่วน Extension ก็มีอีกเยอะแยะมากมายที่นำมาช่วยอำนวยความสะดวกกับการเขียนโปรแกรมของเรา ก็สามารถค้นหาและลงเพิ่มเติมกันเองได้เลยครับ ว่าจะเขียนในส่วนของ Theme ด้วย แต่บทความน่าจะยาว งั้นผมขอยกไปในหัวข้อต่อไปละกันนะครับผม

Visual Studio Code ตอนที่ 1 : การใช้งาน

Visual Studio Code คืออะไร

หรือเรียกสั้นๆว่า Vscode คือโปรแกรม Text Editor อีกโปรแกรมหนึ่ง ที่มีความสามารถ ไม่แพ้โปรแกรม Text Editor ตัวอื่นๆ ไม่ว่าจะเป็น Sublime Text Editplus Atom หรือ Text Editor ตัวอื่นๆ  ที่สำคัญเป็น OpenSource ใช้ฟรีๆ กันด้วย  สามารถเพิ่ม Extension ลงไปในโปรแกรมได้หลากหลายและมากมาย โดย Vscode ( ขอเรียกสั้นๆนะครับ) ตัวนี้เนี้ย รองรับการเขียนได้หลากหลายภาษามากมาย

การใช้งาน Visual Studio Code

การใช้งานก็ไม่ยากครับ เพียงแค่เข้าไปที่เว็บ https://code.visualstudio.com  เมื่อเข้าไปที่เว็บไซต์ก็จะเจอหน้าจอแบบรูปภาพเลยครับ

เมื่อเข้ามาเสร็จแล้วให้คลิกที่ Download (ปุ่มเขียวๆ) สำหรับ Platform อื่นๆ ก็เลือกโหลดได้เลยนะครับ

หลังจาก Download มาในเครื่องเรียบร้อยก็ทำการลงโปรแกรมได้เลย ( ขอข้ามขั้นตอนการลงโปรแกรมไปเลยนะครับ )

เมื่อลงเสร็จแล้ว ก็ทำการเข้าที่โปรแกรมได้เลย

สำหรับคนที่เพิ่งลง ก็อาจจะมีหน้าต่างขึ้นมาแตกต่างจากในรูปนะครับ ( เพราะผมใช้มาก่อนแล้ว )


โดยตัวโปรแกรมก็มีลักษณะคล้ายๆ Text Editor จำพวก Atom Sublime Text ความสามารถก็ไม่ต่างกันครับ แต่ผมรู้สึกว่า VSCODE ใช้งานได้ดีกว่า Sublime Text นะ ส่วน Atom ผมยังไม่เคยลอง

Extension

โดย VSCODE สามารถเพิ่ม Extension ได้เยอะแยะมาก ถ้าให้เปรียบเทียบกับ Sublime Text ก็คือ Package นั่นแหละ 

Theme

และก็สามารถเปลี่ยน Theme รูปแบบ สีสรรค์ของหน้าจอการทำงานได้ตามใจเราด้วย

Icon File

รวมทั้งเปลี่ยนรูปไอค่อนหน้า File Explorer ของเราได้หลากหลายอีกตังหาก


ส่วนเจ้าตัว VSCODE หรือ Visual Studio Code ก็ยังมีความสามารถอีกหลายหลายที่ยังไม่ได้กล่าวถึง สำหรับใครที่เบื่อๆ Text Editor ตัวที่ใช้อยู่ หรือกำลังอยากจะเปลี่ยนพอดี ก็แนะนำตัวนี้เลยครับ รับรองไม่ผิดหวัง  ส่วนบทความต่อไป จะมาแนะนำ Extension ที่น่าใช้ พร้อม Theme ต่างๆ กันครับ 

Visual Studio Code ตอนที่ 2 : Extension และ Theme <<<