【การใช้เทอร์มินัล】วิธีใช้และปรับแต่งเทอร์มินัลในตัวของ VSCode

สวัสดีครับ! ผมเป็นนักสร้างเว็บที่ดูแลเว็บไซต์ "buyonjapan.com" และ "copicode.com" ครับ

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

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

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

บทที่ 1: ไม่ต้องกลัวอีกต่อไป! การพบกันครั้งแรกกับเทอร์มินัลในตัวของ VSCode

ก่อนอื่น มาทำความรู้จักกับสิ่งที่น่ากลัว (?) อย่างเทอร์มินัลกันก่อนเลยครับ ไม่ต้องกังวล แค่เปิดดูก็ไม่มีอะไรเกิดขึ้น!

3 วิธีในการเปิดเทอร์มินัล

มี 3 วิธีหลักๆ ในการเปิดเทอร์มินัลใน VSCode ลองเลือกวิธีที่เหมาะกับคุณดูนะครับ

1. เปิดจากแถบเมนู: คลิกที่ เทอร์มินัล > เทอร์มินัลใหม่ จากเมนูด้านบน
2. เปิดด้วยคีย์ลัด: วิธีนี้เจ๋งและมีประสิทธิภาพที่สุด! ควรจำไว้นะครับ
   • ใช้ได้ทั้ง Windows/Mac: Ctrl + @ (หรือ Ctrl + Shift + `)
3. เปิดจากแถบสถานะด้านล่าง: หากคุณเปิดแผงปัญหาอยู่ จะมีแท็บ "เทอร์มินัล" อยู่ในรายการ ให้คลิกที่แท็บนั้น

ถ้า "หน้าจอสีดำ" ปรากฏขึ้นที่ครึ่งล่างของหน้าจอ ก็ถือว่าสำเร็จแล้วครับ!

(รูปภาพนี้เป็นเวอร์ชันที่ปรับแต่งแล้ว แต่ในตอนแรกจะดูเรียบง่ายกว่านี้ครับ)

พรอมต์คืออะไร? - จุดเริ่มต้นของการสื่อสารกับเทอร์มินัล

เมื่อคุณเปิดเทอร์มินัล จะมีข้อความปรากฏขึ้นมา เช่น C:\Users\YourName\Project> หรือ YourName@MacBook-Air Project % และมีเคอร์เซอร์กะพริบอยู่ข้างๆ สิ่งนี้เรียกว่า พรอมต์ (Prompt)

นี่คือข้อความจากเทอร์มินัลที่บอกว่า "ตอนนี้คุณอยู่ที่ตำแหน่งนี้ (ไดเรกทอรีปัจจุบัน) กรุณาป้อนคำสั่งต่อไป" จากตรงนี้ เราจะส่ง "คำสั่ง (Command)" ต่างๆ ไปยังเทอร์มินัลเพื่อให้คอมพิวเตอร์ทำงานให้เรา

บทที่ 2: จำแค่นี้ก็พอ! รวมคำสั่งที่จำเป็นสำหรับนักสร้างเว็บ

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

1. ตรวจสอบตำแหน่งปัจจุบัน `pwd`

pwd ย่อมาจาก "Print Working Directory" เป็นคำสั่งที่ใช้ถามคอมพิวเตอร์ว่า "ตอนนี้ฉันอยู่ที่โฟลเดอร์ไหน?" เหมือนกับการตรวจสอบตำแหน่งปัจจุบันเมื่อเราหลงทางนั่นเองครับ

pwd

2. ดูเนื้อหาในโฟลเดอร์ `ls`

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

ls

※ใน Command Prompt ของ Windows จะใช้คำสั่ง dir ซึ่งทำหน้าที่เดียวกัน แต่ถ้าใช้ Git Bash ที่จะกล่าวถึงต่อไป คุณจะสามารถใช้ ls บน Windows ได้เช่นกัน ทำให้สะดวกและใช้งานได้เหมือนกับผู้ใช้ Mac

3. ย้ายโฟลเดอร์ `cd`

cd ย่อมาจาก "Change Directory" เป็นหนึ่งในคำสั่งที่สำคัญที่สุดในการย้ายไปยังโฟลเดอร์ที่ต้องการทำงาน ใช้ในสถานการณ์เช่น "ย้ายไปยังโฟลเดอร์โปรเจกต์เพื่อเริ่มทำงาน"

ตัวอย่างเช่น หากต้องการย้ายไปยังโฟลเดอร์ชื่อ contact-form ให้พิมพ์ดังนี้

cd contact-form

หากต้องการกลับไปยังโฟลเดอร์ระดับบน ให้ใช้ ..

cd ..

4. สร้างโฟลเดอร์ `mkdir`

mkdir ย่อมาจาก "Make Directory" ใช้สร้างโฟลเดอร์ (ไดเรกทอรี) ใหม่ ตัวอย่างเช่น ใช้สร้างโฟลเดอร์ images สำหรับเก็บรูปภาพ หรือโฟลเดอร์ css สำหรับเก็บไฟล์ CSS

mkdir images

5. ติดตั้งฟังก์ชัน JavaScript `npm install`

ในการสร้างเว็บสมัยใหม่ เป็นเรื่องปกติที่จะดาวน์โหลดและใช้ฟังก์ชัน (แพ็กเกจ) ที่มีประโยชน์จากอินเทอร์เน็ต ระบบที่ใช้ในตอนนั้นคือ npm และ npm install คือคำสั่งที่ใช้ร้องขอว่า "ขอฟังก์ชัน (แพ็กเกจ) นี้หน่อย!"

ตัวอย่างเช่น หากต้องการติดตั้งไลบรารีชื่อดัง "Swiper" ที่สามารถสร้างสไลเดอร์ได้ ให้พิมพ์ดังนี้

npm install swiper

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

บทที่ 3: [คัดลอกและวางได้เลย] ไม่ต้องกลัวอีกต่อไป! มาปรับแต่งเทอร์มินัลในแบบของคุณกันเถอะ

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

ในส่วนนี้ ผมจะแนะนำวิธีการปรับแต่งที่ทำได้จริงโดยไม่ต้องใช้เครื่องมือที่ซับซ้อนใดๆ เพียงแค่แก้ไขไฟล์การตั้งค่าของ VSCode ที่ชื่อ settings.json เท่านั้น

ขั้นตอนที่ 1: เปิดไฟล์การตั้งค่า `settings.json`

ก่อนอื่น มาเปิดไฟล์การตั้งค่าของ VSCode ที่ชื่อ settings.json กันก่อนครับ

1. กดคีย์ลัด Ctrl + Shift + P (สำหรับ Mac คือ Command + Shift + P) เพื่อเปิด Command Palette
2. ในช่องค้นหา ให้พิมพ์ "settings json"
3. เลือก "Preferences: Open User Settings (JSON) (การตั้งค่าพื้นฐาน: เปิดการตั้งค่า (JSON))" ที่ปรากฏขึ้นมา

เพียงเท่านี้ ไฟล์ settings.json ที่เก็บการตั้งค่าทั้งหมดของ VSCode ของคุณก็จะเปิดขึ้นมา คุณสามารถเปลี่ยนการตั้งค่าเทอร์มินัลได้โดยการเพิ่มโค้ดลงในไฟล์นี้

ขั้นตอนที่ 2: [แนะนำสำหรับผู้ใช้ Windows] เปลี่ยนเชลล์เป็น Git Bash

ผู้ใช้ Mac สามารถข้ามขั้นตอนนี้ไปได้เลย เพราะ zsh ที่เป็นค่าเริ่มต้นนั้นมีประสิทธิภาพสูงอยู่แล้ว สำหรับผู้ใช้ Windows ผมขอแนะนำอย่างยิ่งให้เปลี่ยนโปรแกรมที่เทอร์มินัลใช้ (เชลล์) จาก PowerShell หรือ Command Prompt ที่เป็นค่าเริ่มต้นเป็น Git Bash

ทำไมต้อง Git Bash?

• คุณสามารถใช้คำสั่งที่ใช้ใน Mac และ Linux (เช่น ls, pwd) ได้โดยตรง ทำให้ง่ายต่อการคัดลอกและวางคำสั่งจากบทความทางเทคนิคและสื่อการสอนบนเว็บ
• มันมาพร้อมกับการติดตั้ง Git (เครื่องมือจัดการเวอร์ชัน) โดยอัตโนมัติ ทำให้การติดตั้งง่าย

หากคุณยังไม่มี Git for Windows บนพีซีของคุณ โปรดดาวน์โหลดและติดตั้งจากเว็บไซต์ทางการ "git-scm.com" หลังจากติดตั้งเสร็จแล้ว ให้เพิ่มโค้ดต่อไปนี้ลงในไฟล์ settings.json ที่คุณเพิ่งเปิด (หากมีโค้ดอยู่แล้วใน {} ให้เพิ่มโดยคั่นด้วยเครื่องหมายจุลภาค ,)

{
    // การตั้งค่าเพื่อใช้ Git Bash เป็นเทอร์มินัลเริ่มต้น
    "terminal.integrated.defaultProfile.windows": "Git Bash"
}

รีสตาร์ท VSCode หรือเปิดเทอร์มินัลใหม่ แล้ว Git Bash ก็จะเริ่มทำงาน

ขั้นตอนที่ 3: [คัดลอกและวางเพื่อเสร็จสิ้น] การปรับแต่งเพื่อเพิ่มความสวยงามและการใช้งานอย่างมาก

รอมานานแล้ว! ในที่สุดก็ถึงเวลาปรับแต่งหน้าตาของเทอร์มินัลกันแล้ว คัดลอกและวางโค้ดทั้งหมดด้านล่างลงในไฟล์ settings.json ของคุณได้เลยครับ ผมได้ใส่ความคิดเห็นอธิบายความหมายของแต่ละบรรทัดไว้แล้ว เพื่อให้คุณสามารถทำความเข้าใจ ลบส่วนที่ไม่จำเป็น หรือเปลี่ยนค่าต่างๆ เพื่อสร้างเทอร์มินัลในแบบของคุณเองได้

เกี่ยวกับฟอนต์ที่แนะนำ: การตั้งค่าต่อไปนี้จะระบุฟอนต์สำหรับการเขียนโปรแกรมชื่อ Fira Code ฟอนต์นี้จะแสดงการรวมกันของสัญลักษณ์บางอย่าง เช่น => หรือ != เป็นสัญลักษณ์ที่อ่านง่ายเพียงตัวเดียว (ligature) ซึ่งช่วยเพิ่มความสามารถในการอ่านโค้ด ขอแนะนำให้ค้นหา "Fira Code font" และติดตั้งฟอนต์ลงในพีซีของคุณล่วงหน้า

{
    // --- การตั้งค่าเทอร์มินัลเริ่มต้นที่นี่ ---

    // ระบุตระกูลฟอนต์ที่จะใช้ในเทอร์มินัล แนะนำ 'Fira Code'
    // หากระบุหลายฟอนต์ จะใช้ฟอนต์ถัดไปหากไม่มีฟอนต์แรก
    "terminal.integrated.fontFamily": "'Fira Code', Menlo, Monaco, 'Courier New', monospace",

    // ระบุขนาดฟอนต์ของเทอร์มินัล ปรับขนาดได้ตามต้องการ
    "terminal.integrated.fontSize": 14,

    // เปิดใช้งานการเชื่อมต่อฟอนต์ (ligatures) สัญลักษณ์เช่น => หรือ != จะเปลี่ยนเป็นสัญลักษณ์ที่อ่านง่ายขึ้น
    "terminal.integrated.fontLigatures": true,

    // ระบุความสูงของบรรทัดในเทอร์มินัล ประมาณ 1.5 จะอ่านง่าย
    "terminal.integrated.lineHeight": 1.5,

    // ระบุสไตล์ของเคอร์เซอร์ 'line' คือเส้น, 'block' คือบล็อก, 'underline' คือขีดเส้นใต้
    "terminal.integrated.cursorStyle": "line",

    // ทำให้เคอร์เซอร์กะพริบ
    "terminal.integrated.cursorBlinking": true,

    // การทำงานเมื่อคลิกขวาในเทอร์มินัล 'copyPaste' จะสะดวกสำหรับการคัดลอกและวาง
    "terminal.integrated.rightClickBehavior": "copyPaste",

    // ปิดใช้งานเสียงเตือนของเทอร์มินัล
    "terminal.integrated.enableBell": false,

    // การตั้งค่าสีโดยละเอียดของเทอร์มินัลที่เชื่อมโยงกับสีของหน้าต่าง VSCode
    "workbench.colorCustomizations": {
        // สีพื้นหลังของเทอร์มินัล
        "terminal.background": "#1E1E1E",
        // สีตัวอักษรของเทอร์มินัล ( передний план)
        "terminal.foreground": "#D4D4D4",
        // สีดำของเทอร์มินัล
        "terminal.ansiBlack": "#000000",
        // สีแดงของเทอร์มินัล
        "terminal.ansiRed": "#CD3131",
        // สีเขียวของเทอร์มินัล
        "terminal.ansiGreen": "#0DBC79",
        // สีเหลืองของเทอร์มินัล
        "terminal.ansiYellow": "#E5E510",
        // สีน้ำเงินของเทอร์มินัล
        "terminal.ansiBlue": "#2472C8",
        // สีม่วงแดงของเทอร์มินัล
        "terminal.ansiMagenta": "#BC3FBC",
        // สีฟ้าของเทอร์มินัล
        "terminal.ansiCyan": "#11A8CD",
        // สีขาวของเทอร์มินัล
        "terminal.ansiWhite": "#E5E5E5",
        // สีดำสว่าง (สีเทา) ของเทอร์มินัล
        "terminal.ansiBrightBlack": "#666666",
        // สีแดงสว่างของเทอร์มินัล
        "terminal.ansiBrightRed": "#F14C4C",
        // สีเขียวสว่างของเทอร์มินัล
        "terminal.ansiBrightGreen": "#23D18B",
        // สีเหลืองสว่างของเทอร์มินัล
        "terminal.ansiBrightYellow": "#F5F543",
        // สีน้ำเงินสว่างของเทอร์มินัล
        "terminal.ansiBrightBlue": "#3B8EEA",
        // สีม่วงแดงสว่างของเทอร์มินัล
        "terminal.ansiBrightMagenta": "#D670D6",
        // สีฟ้าสว่างของเทอร์มินัล
        "terminal.ansiBrightCyan": "#29B8DB",
        // สีขาวสว่างของเทอร์มินัล
        "terminal.ansiBrightWhite": "#E5E5E5"
    }

    // --- การตั้งค่าเทอร์มินัลสิ้นสุดที่นี่ ---
}

ทันทีที่คุณวางการตั้งค่านี้แล้วบันทึก (Ctrl + S) หน้าตาของเทอร์มินัลของคุณควรจะเปลี่ยนไป หากไม่เปลี่ยนแปลง ให้ลองปิดเทอร์มินัล (คลิกที่ไอคอนถังขยะ) แล้วเปิดใหม่

บทที่ 4: ที่ที่ผมติด! การแก้ไขปัญหาสำหรับมือใหม่

เมื่อคุณเริ่มใช้เทอร์มินัล คุณจะต้องเจอกับข้อผิดพลาดอย่างแน่นอน แต่ไม่ต้องกังวล คุณไม่ได้เป็นคนเดียว ในส่วนนี้ ผมจะแบ่งปันข้อผิดพลาดทั่วไปที่ผมเคยเจอและใช้เวลาหลายชั่วโมง (บางครั้ง cả วัน!) ในการแก้ไข พร้อมกับวิธีแก้ปัญหา

กรณีที่ 1: "'npm' is not recognized as an internal or external command..."

ข้อผิดพลาดนี้อาจเป็นอุปสรรคแรกและใหญ่ที่สุดสำหรับมือใหม่ในการสร้างเว็บ เมื่อพยายามรัน npm install แล้วเจอข้อความเย็นชาแบบนี้... ผมเองก็เกือบจะถอดใจไปแล้วเหมือนกัน

สาเหตุ: PATH ไม่ได้ถูกตั้งค่า

99% ของสาเหตุของข้อผิดพลาดนี้คือ "PATH (พาธ) ไม่ได้ถูกตั้งค่า" พูดง่ายๆ ก็คือ PATH คือ "สมุดที่อยู่สำหรับคอมพิวเตอร์ในการค้นหาคำสั่ง"

คำสั่ง npm โดยปกติจะถูกติดตั้งพร้อมกับสภาพแวดล้อมการเขียนโปรแกรม Node.js ในโฟลเดอร์เฉพาะของพีซี (เช่น C:\Program Files\nodejs\) เมื่อคุณพิมพ์ npm ในเทอร์มินัล คอมพิวเตอร์จะดูที่ "สมุดที่อยู่ (PATH)" นี้เพื่อค้นหาว่าคำสั่ง npm อยู่ที่ไหน อย่างไรก็ตาม หากด้วยเหตุผลบางอย่างที่ตั้งของ npm ไม่ได้ถูกลงทะเบียนไว้ในสมุดที่อยู่นี้ คอมพิวเตอร์ก็จะส่งข้อความผิดพลาดกลับมาว่า "ไม่พบคำสั่งนั้น!"

วิธีแก้ไข (สำหรับ Windows)

1. ก่อนอื่น ให้ตรวจสอบว่า Node.js ได้รับการติดตั้งอย่างถูกต้องหรือไม่ ให้ติดตั้งเวอร์ชัน LTS (แนะนำ) จากเว็บไซต์ทางการ "nodejs.org" หากมีช่องทำเครื่องหมายเช่น "Add to PATH" ระหว่างการติดตั้ง ให้แน่ใจว่าได้ทำเครื่องหมายไว้
2. ในแถบค้นหาของ Windows ให้ค้นหา "Edit the system environment variables (แก้ไขตัวแปรสภาพแวดล้อมของระบบ)" แล้วเปิดขึ้นมา
3. คลิกปุ่ม "Environment Variables... (ตัวแปรสภาพแวดล้อม...)"
4. ในส่วน "System variables (ตัวแปรของระบบ)" ให้ค้นหาตัวแปรชื่อ Path เลือก แล้วคลิก "Edit... (แก้ไข...)"
5. ในรายการที่เปิดขึ้นมา ให้ตรวจสอบว่ามีพาธไปยังโฟลเดอร์ที่คุณติดตั้ง Node.js เช่น C:\Program Files\nodejs\ หรือไม่ หากไม่มี ให้กดปุ่ม "New (สร้าง)" เพื่อเพิ่มพาธนี้
6. ปิดหน้าต่างทั้งหมดโดยคลิก "OK (ตกลง)" แล้วรีสตาร์ทพีซีของคุณ (หรืออย่างน้อยก็รีสตาร์ท VSCode ทั้งหมด)

แนวคิดเรื่อง "การตั้งค่า PATH" อาจจะเข้าใจยากในตอนแรก ผมเองก็เคยถาม AI ว่า "ช่วยอธิบายเรื่อง PATH ให้เหมือนกับที่อธิบายให้เด็ก ป.5 ฟังหน่อย" หลายครั้งจนในที่สุดก็ได้ภาพของ "สมุดที่อยู่" นี้มา เมื่อคุณเข้าใจแล้ว คุณจะสามารถนำความรู้นี้ไปใช้กับการติดตั้งเครื่องมืออื่นๆ ในอนาคตได้ ดังนั้นมาพยายามผ่านมันไปให้ได้กันเถอะ!

สรุป: เทอร์มินัลไม่น่ากลัว แต่เป็นคู่หูที่แข็งแกร่งที่สุด!

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

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

ขอให้คุณใช้เทอร์มินัลที่คุณปรับแต่งในวันนี้ให้เป็น "คู่หูที่แข็งแกร่งที่สุด" ในการสร้างเว็บของคุณต่อไปนะครับ!