【แนะนำส่วนขยาย】10 ส่วนขยายยอดนิยมที่จะช่วยเพิ่มประสิทธิภาพการทำงานของคุณใน VSCode

สวัสดีครับ! ผมคือคนหนึ่งที่สร้างเว็บไซต์ขึ้นมาด้วยตัวเองโดยอาศัยความช่วยเหลือจาก AI โดยเริ่มจากความรู้ด้านโปรแกรมมิ่งเป็นศูนย์ ผมก็เคยเป็นมือใหม่เหมือนกับทุกๆ คนครับ

คุณเพิ่งติดตั้ง VSCode (Visual Studio Code) แล้วพูดกับตัวเองว่า "เอาล่ะ! จะเริ่มเขียนโค้ดอย่างจริงจังแล้ว!" แต่แล้วก็ต้องหยุดชะงักเพราะไม่รู้ว่าจะทำอะไรต่อใช่ไหมครับ? หรือกำลังกังวลว่า "อยากเขียนโค้ดให้มีประสิทธิภาพมากขึ้น แต่จะทำยังไงดี?"

ผมเข้าใจความรู้สึกนั้นดีเลยครับ เพราะผมก็เคยเป็นเหมือนกัน การนั่งจ้องหน้าจอสีดำทะมึนแล้วรู้สึกเคว้งคว้าง แต่คุณค่าที่แท้จริงของ VSCode จะเปล่งประกายออกมาเมื่อเราเพิ่ม "ส่วนขยาย (Extensions)" เข้าไป การติดตั้งส่วนขยายเหล่านี้จะช่วยเพิ่มประสิทธิภาพในการพัฒนาของคุณได้อย่างก้าวกระโดด และทำให้การเขียนโค้ดสนุกขึ้นอีกหลายเท่าตัว

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

1. Thai Language Pack for Visual Studio Code - เริ่มต้นอย่างสบายใจด้วยภาษาไทย

ภาพหน้าจอ UI ของ VSCode ที่ถูกเปลี่ยนเป็นภาษาไทย

แนะนำสำหรับคนแบบนี้:

คนที่ไม่คุ้นเคยหรือรู้สึกเกร็งกับเมนูภาษาอังกฤษ
คนที่ต้องการทำความเข้าใจรายการตั้งค่าต่างๆ ด้วยภาษาแม่ของตัวเองอย่างเป็นธรรมชาติ

【จากประสบการณ์】ผมเคยแพ้ภาษาอังกฤษ

อุปสรรคแรกของการเริ่มเขียนโปรแกรมสำหรับผม ไม่ใช่ศัพท์เทคนิค แต่คือการที่ "ทุกอย่างเป็นภาษาอังกฤษ" ครับ ถึงจะพอเข้าใจคำว่า File, Edit, Selection... แต่พอจะตั้งค่าที่ซับซ้อนขึ้นมา สมองก็หยุดทำงานทันที ผมกลัวไปหมดว่า "ถ้าคลิกผิดที่ขึ้นมาจะทำยังไง" จนไม่กล้าแตะอะไรเลย ส่วนขยายตัวนี้คือผู้มีพระคุณที่ช่วยขจัดความกังวลของผมไปเป็นอันดับแรก แค่เมนูเปลี่ยนเป็นภาษาไทย อุปสรรคทางใจก็ลดลงฮวบฮาบ จนทำให้ผมรู้สึกว่า "เราอาจจะเป็นเพื่อนกับ VSCode ก็ได้นะ"

วิธีใช้งานเบื้องต้น

คลิกที่ไอคอนสี่เหลี่ยม (มุมมองส่วนขยาย) ทางด้านซ้ายของ VSCode
ในช่องค้นหา ให้พิมพ์คำว่า "Thai Language Pack"
คลิกที่ปุ่ม "Install" ของส่วนขยายที่ปรากฏขึ้นมาอันแรกสุด
หลังจากการติดตั้ง คลิกที่ปุ่ม "Change Language and Restart" ที่ปรากฏขึ้นมาทางด้านขวาล่างเพื่อรีสตาร์ท VSCode

เพียงเท่านี้ UI ของ VSCode ทั้งหมดก็จะเปลี่ยนเป็นภาษาไทย ง่ายใช่ไหมล่ะครับ? มาเริ่มต้นจากตรงนี้เพื่อทำความคุ้นเคยกับ VSCode กันเถอะ

2. Live Server - สัมผัสประสบการณ์สุดประทับใจที่โค้ดของคุณทำงานได้ทันที

แนะนำสำหรับคนแบบนี้:

คนที่รู้สึกว่าการรีโหลดเบราว์เซอร์ด้วยตนเองทุกครั้งที่แก้ไข HTML หรือ CSS เป็นเรื่องน่ารำคาญ
คนที่ต้องการเห็นการเปลี่ยนแปลงหน้าตาของโค้dที่เขียนแบบเรียลไทม์

【จากประสบการณ์】ปลดแอกจากวันวานที่ต้องรัวปุ่ม F5

ตอนที่เริ่มเรียน HTML ใหม่ๆ ทุกครั้งที่ผมเปลี่ยนหัวข้อแค่หนึ่งจุด ผมจะต้องกด Ctrl+S เพื่อบันทึกไฟล์ สลับไปที่เบราว์เซอร์แล้วกด F5 เพื่อรีเฟรช วนลูปไปเรื่อยๆ งานง่ายๆ แต่น่าเบื่อแบบนี้มันน่ารำคาญจริงๆ... ตอนที่ผมไปร้องไห้กับ AI ว่า "ไม่มีวิธีที่ง่ายกว่านี้เหรอ?" สิ่งแรกที่ AI แนะนำก็คือ Live Server ตัวนี้แหละครับ ตอนที่ได้เห็นเบราว์เซอร์ข้างๆ อัปเดตตัวเองทันทีที่ผมบันทึกโค้ด ผมถึงกับอุทานออกมาว่า "นี่มันเวทมนตร์ชัดๆ!" ประสบการณ์ "โค้ดรันได้ทันที" นี่แหละที่ช่วยกระตุ้นแรงจูงใจในการเรียนเขียนโปรแกรมของผมแบบสุดๆ

【คัดลอกไปลองใช้】มาลองสัมผัสเวทมนตร์กัน

ก่อนอื่น ให้สร้างไฟล์ใหม่ใน VSCode แล้วบันทึกเป็นชื่อ index.html จากนั้นคัดลอกโค้ดข้างล่างนี้ไปวางได้เลย

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <title>ทดสอบ Live Server</title>
    <style>
        body {
            display: grid;
            place-content: center;
            height: 100vh;
            margin: 0;
            font-family: sans-serif;
            background-color: #2d2d2d;
            color: #ffffff;
        }
        h1 {
            color: #669df6;
            font-size: 3rem;
        }
    </style>
</head>
<body>
    <h1>สวัสดีชาวโลก!</h1>
</body>
</html>

หลังจากวางโค้ดแล้ว ให้คลิกขวาบน editor แล้วเลือก "Open with Live Server" หรือคลิกที่ปุ่ม "Go Live" ที่มุมขวาล่างของหน้าจอ เบราว์เซอร์จะเปิดขึ้นมาอัตโนมัติพร้อมกับแสดงข้อความว่า "สวัสดีชาวโลก!"

จากนั้น กลับไปที่ VSCode แล้วลองแก้ไขข้อความในแท็ก <h1> เป็น "Live Server สุดยอดไปเลย!" แล้วบันทึกไฟล์ (Ctrl+S) ดูสิครับ หน้าจอในเบราว์เซอร์จะเปลี่ยนไปทันทีโดยที่คุณไม่ต้องสลับหน้าจอเลย นี่แหละคือพลังของ Live Server!

ข้อควรระวัง

Live Server จะทำงานเมื่อเปิดไฟล์ HTML อยู่ และไม่สามารถรันโปรแกรมฝั่งเซิร์ฟเวอร์อย่าง PHP ได้นะครับ

3. Prettier - Code formatter - โค้ดสวยงามไม่ว่าใครจะเขียน

แนะนำสำหรับคนแบบนี้:

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

【จากประสบการณ์】ผมเคยเหนื่อยหน่ายกับ "หน้าตา" ของโค้ด

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

【คัดลอกไปลองใช้】ความฟินที่โค้ดสวยขึ้นในพริบตา

ก่อนอื่น ให้ติดตั้ง Prettier จากนั้นเปิดการตั้งค่าของ VSCode (Ctrl + ,) แล้วพิมพ์ "Format On Save" ในช่องค้นหาและติ๊กถูกที่ช่องนั้นครับ แค่นี้โค้ดก็จะถูกจัดรูปแบบอัตโนมัติทุกครั้งที่บันทึกไฟล์

มาลองกันเลย สร้างไฟล์ใหม่ชื่อ script.js แล้วลองคัดลอกโค้ดที่จงใจเขียนให้เละๆ ข้างล่างนี้ไปวางดูครับ

function  hello( name  ) {
console.log('สวัสดี, '   + name + '!')
        }
hello( "สมชาย" )

ในสภาพนี้ ลองบันทึกไฟล์ (Ctrl+S) ดูครับ โค้ดจะถูกจัดให้สวยงามเหมือนโค้ดข้างล่างนี้ในทันที

function hello(name) {
  console.log("สวัสดี, " + name + "!");
}
hello("สมชาย");

Prettier จะจัดการเรื่องกฎหยุมหยิมต่างๆ ให้ทั้งหมด ไม่ว่าจะเป็นการเยื้อง, การเว้นวรรค, หรือการใส่เซมิโคลอน คุณไม่ต้องกังวลเรื่องหน้าตาของโค้ดอีกต่อไป

4. Auto Rename Tag - บอกลาการลืมแก้แท็กปิด

แนะนำสำหรับคนแบบนี้:

คนที่เคยแก้แท็กเปิดของ HTML แล้วลืมแก้แท็กปิดจนหน้าเว็บพัง
คนที่อยากลดเวลาในการแก้ไขงานเล็กๆ น้อยๆ

【จากประสบการณ์】การเดินทางตามหาแท็กปิด

พอโครงสร้างเว็บไซต์เริ่มซับซ้อนขึ้น การตามหาแท็กปิดที่อยู่ต่ำลงไปอีกหลายสิบบรรทัดมันลำบากมากครับ "แท็กปิดของ <div> นี้มันอยู่ไหนกันนะ...?" ผมต้องเลื่อนหน้าจอขึ้นลงเพื่อตามหา แล้วพอเจอ ก็ดันเป็นแท็กของตัวอื่น... ตอนที่พยายามจะเปลี่ยน <h2> เป็น <h3> แล้วแก้แค่แท็กเปิด แต่ลืมแก้แท็กปิดจน layout พัง ตอนนั้นอยากจะร้องไห้จริงๆ Auto Rename Tag คือคู่หูที่ดีที่สุดที่จะช่วยป้องกันความผิดพลาดเล็กๆ น้อยๆ แต่ร้ายแรงแบบนี้

【คัดลอกไปลองใช้】เปลี่ยนชื่อเป็นคู่โดยอัตโนมัติ

ส่วนขยายนี้แค่ติดตั้งก็ใช้งานได้เลย ไม่ต้องตั้งค่าอะไรเป็นพิเศษ เปิดไฟล์อย่าง index.html แล้วลองใช้โค้ดข้างล่างนี้ดูครับ

<div>
    <p>ที่นี่มีเนื้อหาอยู่มากมาย</p>
    <p>ที่นี่มีเนื้อหาอยู่มากมาย</p>
    <p>ที่นี่มีเนื้อหาอยู่มากมาย</p>
</div>

หลังจากวางโค้ดแล้ว ลองเอาเคอร์เซอร์ไปวางที่แท็กเปิด <div> แล้วแก้คำว่า "div" เป็น "section" ดูครับ คุณจะเห็นว่าแท็กปิด </div> ที่อยู่ห่างออกไปก็เปลี่ยนเป็น </section> โดยอัตโนมัติ การทำงานอัตโนมัติเล็กๆ น้อยๆ แบบนี้ช่วยลดความเครียดในการพัฒนาไปได้เยอะเลยครับ

5. HTML CSS Support - ป้องกันการพิมพ์ชื่อคลาส CSS ผิด

แนะนำสำหรับคนแบบนี้:

คนที่จำชื่อคลาสที่สร้างไว้ในไฟล์ CSS ไม่ได้ หรือพิมพ์ผิด (Typo) ตอนจะใช้ในไฟล์ HTML
คนที่อยากลดเวลาในการสลับไปมาระหว่างไฟล์ CSS กับ HTML

【จากประสบการณ์】"เอ๊ะ ทำไม CSS ไม่ทำงาน..." ต้นเหตุมักจะเป็นการพิมพ์ผิดเสมอ

อุตส่าห์สร้างชื่อคลาสยาวๆ เท่ๆ อย่าง .main-contents-wrapper ใน style.css ไว้ แต่พอจะเอาไปใช้ใน index.html ความจำก็เลือนลางในทันที "เอ๊ะ contents หรือ content นะ? แล้วขีดกลางอยู่ตรงไหน?" สุดท้ายก็ต้องสลับไปดูไฟล์ CSS อยู่ดี ผมเบื่อหน่ายกับงานที่ต้องทำซ้ำซ้อนแบบนี้มาก 90% ของสาเหตุที่ CSS ไม่ทำงานก็คือการพิมพ์ชื่อคลาสผิดนี่แหละ HTML CSS Support จะช่วยแนะนำชื่อคลาสจากไฟล์ CSS ขึ้นมาให้ตอนที่เราเริ่มพิมพ์ในฝั่ง HTML ทำให้เราไม่ต้องจำชื่อคลาสหรือสลับไปดูอีกต่อไป

【คัดลอกไปลองใช้】การเติมชื่อคลาสที่แม่นยำ

ก่อนอื่น ให้สร้างไฟล์ 2 ไฟล์ในโฟลเดอร์โปรเจกต์ของคุณ คือ index.html และ style.css

ในไฟล์ style.css ให้คัดลอกโค้ดข้างล่างนี้ไปวาง

.container {
    width: 80%;
    margin: 0 auto;
}

.title-text {
    color: #669df6;
    font-size: 24px;
    border-bottom: 2px solid #5f6368;
}

.description-paragraph {
    line-height: 1.6;
}

จากนั้น ในไฟล์ index.html ให้วางโค้ดข้างล่างนี้ ณ จุดนี้ แท็ก div จะยังไม่มี attribute class

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <title>ทดสอบการรองรับ CSS</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="">
        <h1 class="">หัวข้อทดสอบ</h1>
        <p class="">นี่คือย่อหน้าสำหรับทดสอบ</p>
    </div>
</body>
</html>

มาลองกันเลยครับ วางเคอร์เซอร์ไว้ระหว่างเครื่องหมายคำพูดของ <div class=""> แล้วกด Ctrl + Space (หรือลองพิมพ์ตัวอักษรอย่าง c หรือ t) คุณจะเห็นตัวเลือกอย่าง .container, .title-text, .description-paragraph แสดงขึ้นมา แค่นี้คุณก็จะไม่พิมพ์ชื่อคลาสผิดอีกต่อไป

6. Path Intellisense - ปลดแอกจากฝันร้ายในการระบุ Path ของไฟล์

แนะนำสำหรับคนแบบนี้:

คนที่มักจะระบุ Path ของไฟล์รูปภาพ, CSS, หรือ JavaScript ผิดบ่อยๆ
คนที่ไม่ถนัดการคำนวณ Path แบบสัมพัทธ์ (Relative Path) อย่าง ../

【จากประสบการณ์】นรกของรูปภาพที่ไม่แสดงผล

"เอาล่ะ มาวางรูปภาพในเว็บกัน!" ผมคิด แล้วก็เขียน <img src=""> หลังจากนั้นนรกก็บังเกิด การเขียน path ใน src เนี่ย มันเป็น "./images/hero.png" หรือ "../images/hero.png" หรือว่า "/images/hero.png" กันแน่... ผมต้องลองซ้ำไปซ้ำมาแล้วก็เช็คในเบราว์เซอร์ เห็นเครื่องหมาย "×" แสดงแทนรูปภาพแล้วก็ได้แต่ถอนหายใจ วนไปแบบนี้เรื่อยๆ ส่วนขยายตัวนี้จะช่วยคาดเดาและเติมชื่อโฟลเดอร์หรือไฟล์ให้เราอย่างชาญฉลาดเมื่อเราเริ่มพิมพ์ในเครื่องหมายคำพูด ทำให้เวลาที่เสียไปกับการแก้ path ผิดๆ กลายเป็นศูนย์

【คัดลอกไปลองใช้】การพิมพ์ Path ที่ไม่ต้องลังเล

ส่วนขยายนี้ก็เช่นกัน แค่ติดตั้งก็ทำงานได้เลย ลองสร้างโครงสร้างโฟลเดอร์แบบนี้ในโปรเจกต์ของคุณดูครับ

my-project/
├── index.html
├── css/
│   └── style.css
└── images/
    └── logo.png

เปิดไฟล์ index.html แล้ววางโค้ดข้างล่างนี้ลงไป

<!DOCTYPE html>
<html lang="th">
<head>
    <title>ทดสอบ Path</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <img src="" alt="ภาพโลโก้">
</body>
</html>

ก่อนอื่น ลองวางเคอร์เซอร์ใน href="" ของแท็ก <link> แล้วพิมพ์ "c" ดูครับ คุณจะเห็นตัวเลือก "css/" แสดงขึ้นมาทันที เมื่อเลือกแล้วพิมพ์ / ต่อ คราวนี้ "style.css" ก็จะถูกเติมให้

จากนั้น ใน src="" ของแท็ก <img> ก็เช่นเดียวกัน ถ้าคุณพิมพ์ "i" มันก็จะเติม "images/" ให้ ทำให้คุณสามารถพิมพ์ path ที่ถูกต้องได้อย่างง่ายดาย

7. indent-rainbow - ทำให้โครงสร้างโค้ดที่ซ้อนกันมองเห็นเป็นสีรุ้ง

แนะนำสำหรับคนแบบนี้:

คนที่เจอปัญหา div ซ้อนกันลึกเกินไปจนดูโครงสร้างโค้ดไม่ออก
คนที่ต้องการหาจุดที่เยื้องผิดตำแหน่งได้อย่างรวดเร็วด้วยสายตา

【จากประสบการณ์】หลงทางในการเยื้องโค้ด

เวลาเขียน HTML หรือ CSS โค้ดมักจะมีการซ้อนกัน (nest) ลึกลงไปเรื่อยๆ โดยเฉพาะตอนที่ไม่รู้ว่าจะวางแท็กปิดไว้ที่ไหน การเยื้องโค้ดคือสิ่งเดียวที่พึ่งพาได้ แต่ถ้าทุกอย่างเป็นสีเดียวกันหมด มันก็จะแยกได้ยากมากว่าบล็อกไหนอยู่ตรงไหน indent-rainbow จะช่วยใส่สีให้กับการเยื้องตามความลึก ทำให้มองเห็นโครงสร้างของโค้ดได้ในพริบตา การที่เราสามารถรับรู้ได้ด้วยสายตาว่า "อ้อ เส้นสีม่วงนี้คือขอบเขตของบล็อกนี้นะ" ทำให้สังเกตเห็นข้อผิดพลาดของแท็กปิดหรือการเยื้องที่ผิดเพี้ยนไปได้อย่างรวดเร็ว

【คัดลอกไปลองใช้】การเยื้องโค้ดหลากสีสัน

ส่วนขยายนี้แค่ติดตั้งก็ใช้งานได้เลย ลองคัดลอกโค้ด HTML ที่มีโครงสร้างซับซ้อนข้างล่างนี้ไปวางใน VSCode ดูครับ คุณจะเห็นว่ามุมมองก่อนและหลังติดตั้ง indent-rainbow นั้นแตกต่างกันอย่างสิ้นเชิง

<div class="container">
    <header>
        <nav>
            <ul>
                <li><a href="#">หน้าแรก</a></li>
                <li><a href="#">ข้อมูลสินค้า</a>
                    <ul>
                        <li><a href="#">สินค้า A</a></li>
                        <li><a href="#">สินค้า B</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <p>เนื้อหา</p>
        </section>
    </main>
</div>

หลังจากติดตั้งแล้ว ส่วนที่เยื้องใน editor ของคุณจะมีสีต่างๆ เช่น แดง, เหลือง, น้ำเงิน, ม่วง ทำให้คุณเข้าใจได้ทันทีว่าบล็อกไหนถึงไหนอยู่ในระดับเดียวกัน

8. vscode-icons - แยกแยะประเภทไฟล์ได้ในพริบตา

แนะนำสำหรับคนแบบนี้:

คนที่ไม่สามารถบอกได้ทันทีว่าไฟล์นั้นเป็นไฟล์อะไรจากแค่ชื่อไฟล์
คนที่อยากทำให้ Explorer (รายการไฟล์) ดูง่ายและสนุกขึ้น

【จากประสบการณ์】ความเครียดเล็กๆ ในการหาไฟล์

เมื่อโปรเจกต์ใหญ่ขึ้น รายการไฟล์ก็จะเต็มไปด้วยข้อความที่มีชื่อคล้ายๆ กัน เช่น index.html, style.css, script.js, package.json, README.md... การต้องไล่สายตาหาชื่อไฟล์ทุกครั้งว่า "ไฟล์ JavaScript อันนั้นอยู่ไหนนะ?" เป็นความเครียดเล็กๆ น้อยๆ พอได้ติดตั้งส่วนขยายนี้ ไอคอนสีสันสดใสและเข้าใจง่ายก็ปรากฏขึ้นข้างๆ ชื่อไฟล์ ด้วยไอคอนเฉพาะอย่าง <> สำหรับ HTML, # สำหรับ CSS, JS สำหรับ JS ทำให้สามารถรับรู้ประเภทของไฟล์ได้ทันทีด้วย "สี" และ "รูปร่าง" ซึ่งช่วยลดเวลาในการหาไฟล์ลงได้อย่างมาก

วิธีใช้งานเบื้องต้น

ติดตั้งส่วนขยาย
หลังจากการติดตั้ง หากมีไดอะล็อกปรากฏขึ้นมา ให้เลือก "VSCode Icons" เพื่อเปิดใช้งานธีมไอคอนไฟล์
หากไม่มีไดอะล็อกขึ้นมา ให้เปิด Command Palette ด้วย Ctrl + Shift + P แล้วพิมพ์ "File Icon Theme" และเลือก VSCode Icons

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

9. Code Spell Checker - กำจัดข้อผิดพลาดในการสะกดคำที่น่าอาย

แนะนำสำหรับคนแบบนี้:

คนที่ไม่มั่นใจในการสะกดคำศัพท์ภาษาอังกฤษในชื่อตัวแปร, ชื่อฟังก์ชัน, หรือในคอมเมนต์
คนที่ต้องการป้องกันบั๊กที่ "หาเจอยากและน่าอาย" อย่าง "การสะกดผิด" ไว้ล่วงหน้า

【จากประสบการณ์】สาเหตุที่โค้ดไม่ทำงานคือ...การสะกดผิดอย่างไม่น่าเชื่อ

ผมไม่เก่งภาษาอังกฤษ เลยมักจะสะกดชื่อตัวแปรผิดบ่อยๆ ครับ ตัวอย่างเช่น ผมเคยเขียนคำว่า "message" ที่แปลว่า "ข้อความ" เป็น "mesage" แล้วก็ไม่รู้ตัว นั่งงมอยู่เป็นชั่วโมงว่า "ทำไมมันไม่ทำงานวะ..." ส่วนขยายนี้จะเหมือนใน Word คือจะขีดเส้นใต้หยักๆ สีฟ้าใต้คำที่สะกดผิดเพื่อบอกเรา ความทุกข์ทรมานหนึ่งชั่วโมงนั้นจะหมดไปในพริบตาถ้าผมติดตั้งส่วนขยายนี้ตั้งแต่แรก โดยเฉพาะโค้ดที่ต้องให้คนอื่นดูหรือพัฒนาร่วมกับทีม การสะกดผิดนั้นส่งผลต่อความน่าเชื่อถือ จึงเรียกได้ว่าเป็นส่วนขยายที่จำเป็นอย่างยิ่ง

【คัดลอกไปลองใช้】ค้นหาข้อผิดพลาดได้ทันที

แค่ติดตั้ง การตรวจสอบการสะกดคำภาษาอังกฤษก็จะเปิดใช้งานทันที ลองเปิดไฟล์ JavaScript (เช่น script.js) แล้วคัดลอกโค้ดข้างล่างนี้ไปวางดูครับ

// นี่คือฟังก์ชันสำหรับแสดงข้อความ (functoin to display a mesage)
function showMesage(text) {
    const defaultMessage = "Hellow World!"; // "Hellow" เป็นการพิมพ์ผิด (typo)
    console.log(text || defaultMessage);
}

// กำลังเรียกใช้ฟังก์ชัน (Caling the functoin)
showMesage("Correct spelling is important.");

เมื่อวางโค้ดลงไป คุณจะเห็นเส้นใต้หยักๆ สีฟ้าปรากฏขึ้นทันทีใต้คำที่สะกดผิด เช่น functoin, mesage, Hellow, Caling เมื่อเอาเคอร์เซอร์ไปวางบนเส้นหยัก มันก็จะแสดงคำที่สะกดถูกต้องขึ้นมาให้ด้วย แค่นี้ก็บอกลาความผิดพลาดที่น่าอายได้แล้วครับ

10. GitLens — Git supercharged - ส่องดู "อดีต" ของโค้ด

แนะนำสำหรับคนแบบนี้:

คนที่เคยสงสัยว่า "โค้ดนี้ ใครเขียนไว้เมื่อไหร่ เพื่ออะไรกันนะ?"
คนที่ใช้ Git อยู่ หรือกำลังจะเริ่มใช้
คนที่ต้องการอ้างอิงโค้ดเก่าของตัวเองเพื่อสร้างฟังก์ชันใหม่

【จากประสบการณ์】ไทม์แมชชีนที่ช่วยตัวเราในอนาคต

หลังจากเพิ่มฟังก์ชันเข้าไปในเว็บไซต์ได้หนึ่งฟังก์ชัน พอกลับมาดูอีกทีในอีกหนึ่งเดือนต่อมา ผมมักจะจำไม่ได้เลยว่า "ทำไมเราถึงเขียนโค้ดแบบนี้ไปนะ...?" ซึ่งถ้าไปไล่ดูประวัติการ commit ใน Git ก็จะรู้ แต่การ操作ผ่าน terminal มันค่อนข้างยุ่งยาก พอติดตั้ง GitLens เข้าไป แค่วางเคอร์เซอร์บนบรรทัดโค้ดใน VSCode มันก็จะแสดงข้อมูลจางๆ ขึ้นมาว่า "ใคร, เมื่อไหร่, commit ด้วยข้อความอะไร" มันเหมือนไทม์แมชชีนเลยครับ "อ๋อ, ตัวเราเมื่อเดือนที่แล้ว เพิ่มบรรทัดนี้เข้ามาด้วยเหตุผลนี้นี่เอง" ทำให้เรานึกออกได้ในทันที ไม่ว่าจะตอนหาสาเหตุของบั๊ก หรือตอนที่จะลบโค้ดเก่าทิ้งอย่างสบายใจ มันคือเพื่อนแท้ที่ทรงพลังที่จะคอยช่วยเหลือตัวเราในอนาคตในทุกๆ สถานการณ์

วิธีใช้งานเบื้องต้น

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

เมื่อเปิดโปรเจกต์ที่จัดการด้วย Git ใน VSCode แล้ว GitLens ก็จะเปิดใช้งานโดยอัตโนมัติ

ลองวางเคอร์เซอร์บนบรรทัดโค้ดใดก็ได้ ข้อมูลการ commit ที่แก้ไขบรรทัดนั้นล่าสุด (ผู้สร้าง, วันที่, ข้อความ commit) จะแสดงขึ้นมาจางๆ ที่ท้ายบรรทัด
เมื่อคลิกที่ข้อมูล commit นั้น คุณจะสามารถตรวจสอบรายละเอียดการเปลี่ยนแปลงได้
ที่แถบด้านข้างก็จะมีไอคอนของ GitLens เพิ่มเข้ามา ทำให้คุณสามารถดูประวัติของ repository หรือเปรียบเทียบ branch ต่างๆ ผ่าน GUI ได้อย่างเป็นธรรมชาติ

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

สรุป: ส่วนขยายคือคู่หูที่แข็งแกร่งที่สุด

ในครั้งนี้ ผมได้แนะนำส่วนขยาย 10 ตัวที่ผมใช้มาตั้งแต่สมัยยังเป็นมือใหม่ในการเขียนโปรแกรมและตอนนี้ก็ขาดไม่ได้แล้ว

Thai Language Pack: เริ่มต้นด้วยการเปลี่ยนเป็นภาษาไทย
Live Server: ทำให้การพัฒนาสนุกขึ้นด้วยการอัปเดตแบบเรียลไทม์
Prettier: จัดรูปแบบโค้ดให้สวยงามโดยอัตโนมัติ
Auto Rename Tag: ป้องกันการลืมแก้ไขแท็ก
HTML CSS Support: พิมพ์ชื่อคลาส CSS ได้อย่างง่ายดาย
Path Intellisense: พิมพ์ Path ของไฟล์ได้โดยไม่ผิดพลาด
indent-rainbow: ทำให้โครงสร้างของโค้ดมองเห็นได้ง่าย
vscode-icons: แยกแยะประเภทไฟล์ได้ในพริบตา
Code Spell Checker: กำจัดข้อผิดพลาดในการสะกดคำที่น่าอาย
GitLens: เชื่อมต่ออดีตและอนาคตของโค้ด

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

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

ไปยังขั้นตอนต่อไป

เมนู VSCode ของคุณยังเป็นภาษาอังกฤษอยู่หรือเปล่าครับ? หากคุณต้องการทราบรายละเอียดเพิ่มเติมเกี่ยวกับการเปลี่ยนเป็นภาษาไทยที่ผมแนะนำไปเป็นอันดับแรกในบทความนี้ โปรดอ่านบทความนี้เพิ่มเติมได้เลยครับ ในนั้นได้รวบรวมวิธีการตั้งค่าและเคล็ดลับที่มีประโยชน์เกี่ยวกับการเปลี่ยนภาษาไว้แล้ว

→ 【เปลี่ยน VSCode เป็นภาษาไทย】วิธีเปลี่ยนเมนูและ UI เป็นภาษาไทยพร้อมการตั้งค่าที่แนะนำ