[สภาพแวดล้อมการพัฒนา HTML/CSS/JS] การตั้งค่าและส่วนขยาย VSCode สำหรับการเริ่มต้นสร้างเว็บ

ขั้นตอนที่ 1: เตรียม VSCode กันเถอะ! [การติดตั้งและเปลี่ยนเป็นภาษาไทย]

ก่อนอื่น เรามาติดตั้ง VSCode คู่หูในการสร้างเว็บของคุณบนคอมพิวเตอร์กันก่อน เปรียบเสมือนการมี "มีด" สำหรับทำอาหาร มันง่ายมาก มาทำให้เสร็จอย่างรวดเร็วกันเถอะ

1. ดาวน์โหลดและติดตั้ง VSCode

ขั้นแรก ให้ดาวน์โหลดตัวติดตั้งจากเว็บไซต์อย่างเป็นทางการของ VSCode

เว็บไซต์อย่างเป็นทางการของ Visual Studio Code

เมื่อเข้าไปที่เว็บไซต์ คุณจะเห็นปุ่มดาวน์โหลดขนาดใหญ่สำหรับระบบปฏิบัติการของคุณ (Windows, Mac ฯลฯ) คลิกเพื่อดาวน์โหลด จากนั้นทำตามคำแนะนำบนหน้าจอเพื่อติดตั้งให้เสร็จสมบูรณ์ ไม่มีการตั้งค่าที่ซับซ้อนเป็นพิเศษ โดยทั่วไปแค่คลิก "ถัดไป" หรือ "ยอมรับ" ก็เพียงพอแล้ว

2. เปลี่ยนจากภาษาอังกฤษเป็นภาษาไทย [ส่วนขยายภาษา]

หลังจากติดตั้ง VSCode เมนูต่างๆ จะเป็นภาษาอังกฤษทั้งหมด หากคุณถนัดภาษาอังกฤษก็สามารถใช้ต่อไปได้ แต่การใช้ภาษาแม่ย่อมสบายใจกว่า ผมเองก็พยายามใช้ภาษาอังกฤษในตอนแรก แต่ก็ยอมแพ้อย่างรวดเร็ว (ฮ่าๆ)

ในบทความนี้ เราจะใช้ Japanese Language Pack เป็นตัวอย่าง มาใช้ "ส่วนขยาย" ซึ่งเป็นไอเท็มที่จะเพิ่มพลังให้ VSCode เพื่อเปลี่ยนการแสดงผลเป็นภาษาญี่ปุ่นกัน

1. คลิกที่ไอคอนสี่เหลี่ยมด้านซ้ายของ VSCode (Activity Bar)
2. ในช่องค้นหาที่ปรากฏขึ้น ให้พิมพ์ "Japanese Language Pack"
3. คลิกที่ปุ่ม "Install" ของ "Japanese Language Pack for Visual Studio Code" ที่ปรากฏขึ้นมาด้านบนสุด
4. หลังจากการติดตั้ง หากมีข้อความแจ้งให้รีสตาร์ทปรากฏขึ้นที่มุมขวาล่าง ให้คลิก "Restart"

เมื่อ VSCode รีสตาร์ท เมนูต่างๆ ควรจะเปลี่ยนเป็นภาษาญี่ปุ่นแล้ว เท่านี้การเตรียมการเบื้องต้นก็เสร็จเรียบร้อย!

ขั้นตอนที่ 2: ร่ายเวทมนตร์กันเถอะ! [ส่วนขยายที่จำเป็นและคัดสรรมาอย่างดี]

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

🥇 อันดับ 1: Live Server - เวทมนตร์ที่ทำให้โค้ดของคุณแสดงผลทันที

อันนี้ต้องติดตั้งเลยครับ "Live Server" คือสิ่งแรกที่จะสอนให้คุณรู้จักความสนุกของการสร้างเว็บ

โดยปกติ หลังจากแก้ไขไฟล์ HTML หรือ CSS คุณจะต้องกลับไปที่เบราว์เซอร์แล้วกดปุ่มรีโหลด (เช่น F5) เพื่อดูการเปลี่ยนแปลง แต่ด้วย Live Server ทันทีที่คุณบันทึกโค้ด การแสดงผลในเบราว์เซอร์จะอัปเดตโดยอัตโนมัติ

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

วิธีการติดตั้งก็เหมือนกับการเปลี่ยนภาษาครับ ค้นหา "Live Server" จากไอคอนส่วนขยายด้านซ้ายแล้วติดตั้งได้เลย

🥈 อันดับ 2: Prettier - พ่อบ้านที่จัดระเบียบโค้ดของคุณให้สวยงามโดยอัตโนมัติ

เมื่อคุณเริ่มเขียนโค้ด การเยื้อง (indentation) อาจจะเละเทะ หรือการใช้ช่องว่างอาจไม่สม่ำเสมอ "Prettier" คือสิ่งที่จัดรูปแบบโค้ดที่รกรุงรังให้สวยงามในทันทีทุกครั้งที่คุณบันทึก

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

ค้นหา "Prettier - Code formatter" แล้วติดตั้งกันเลย

[สำคัญ] การตั้งค่าเพื่อเปิดใช้งาน Prettier

Prettier จะไม่ทำงานเพียงแค่ติดตั้ง เราต้องเพิ่มการตั้งค่าง่ายๆ เพื่อให้มันจัดรูปแบบอัตโนมัติเมื่อบันทึก

1. คลิกที่ไอคอนรูปเฟืองที่มุมล่างซ้ายแล้วเลือก "Settings" (หรือกด Ctrl + ,)
2. คลิกที่ไอคอนไฟล์ที่มุมบนขวา (Open Settings (JSON))
3. ในไฟล์ settings.json ที่เปิดขึ้นมา ให้เพิ่ม 2 บรรทัดต่อไปนี้ (หากมีข้อความอยู่แล้ว ให้เพิ่มเข้าไปในวงเล็บปีกกา {} โดยคั่นด้วยจุลภาค)

"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
            

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

รอมานานแล้ว! ในที่สุดเราก็จะมาสร้างเว็บเพจกันจริงๆ แล้ว เราจะใช้ 3 ภาษาที่นี่คือ HTML, CSS และ JavaScript แต่ตอนนี้ยังไม่จำเป็นต้องเข้าใจความหมายของแต่ละภาษาอย่างสมบูรณ์ เป้าหมายคือเพื่อให้ได้ความรู้สึกว่า "ถ้าเขียนแบบนี้ จะเกิดอะไรขึ้น" โปรดทำตามขั้นตอนต่อไปนี้

1. สร้างโฟลเดอร์ทำงานและไฟล์ 3 ไฟล์

ก่อนอื่น ให้สร้างโฟลเดอร์ใหม่สำหรับโปรเจกต์นี้ในที่ที่คุณต้องการบนคอมพิวเตอร์ (เช่น บนเดสก์ท็อป) ชื่อโฟลเดอร์เช่น "my-first-website" จะเข้าใจง่าย

จากนั้น เปิด VSCode แล้วเลือก "Open Folder..." จากเมนู "File" แล้วเปิดโฟลเดอร์ที่คุณเพิ่งสร้าง

เมื่อเปิดโฟลเดอร์แล้ว ให้สร้างไฟล์ใหม่ 3 ไฟล์ใน explorer ของ VSCode ด้านซ้าย:

1. index.html (ไฟล์สำหรับเขียนโครงสร้างของเว็บเพจ)
2. style.css (ไฟล์สำหรับตกแต่งหน้าตาของเว็บเพจ)
3. script.js (ไฟล์สำหรับเพิ่มการเคลื่อนไหวให้กับเว็บเพจ)

2. เขียน HTML (index.html)

เปิดไฟล์ index.html แล้วคัดลอกและวางโค้ดต่อไปนี้ลงไปเลย

เทคนิคลัด: จริงๆ แล้ว ถ้าคุณพิมพ์ ! (เครื่องหมายตกใจ) ตัวเดียวในไฟล์ index.html แล้วกดปุ่ม Tab โครงสร้างพื้นฐานจะถูกสร้างขึ้นมาในทันที นี่คือฟีเจอร์มาตรฐานของ VSCode ที่เรียกว่า "Emmet" ซึ่งสะดวกมากถ้าจำได้

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>เว็บไซต์แรกของฉัน</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <h1>สวัสดี ยินดีต้อนรับสู่โลกของ VSCode!</h1>
    <p id="message">ข้อความจะแสดงที่นี่</p>
    <button id="changeTextBtn">คลิกเลย!</button>

    <script src="script.js"></script>
</body>
</html>

อธิบายง่ายๆ คือ <h1> คือหัวข้อหลัก, <p> คือย่อหน้า, และ <button> คือปุ่ม และ <link rel="stylesheet" href="style.css"> ใช้สำหรับโหลดไฟล์ CSS ส่วน <script src="script.js"></script> ใช้สำหรับโหลดไฟล์ JavaScript

จุดที่อาจติดขัด: หากคุณพิมพ์ชื่อไฟล์ใน href="style.css" หรือ src="script.js" ผิด จะทำให้ CSS หรือ JS ไม่ถูกโหลดอย่างถูกต้อง ซึ่งเป็นสาเหตุให้หน้าตาเว็บเพี้ยนหรือไม่มีการเคลื่อนไหว ผมเองก็เคยทำผิดพลาดแบบนี้หลายครั้ง... โปรดตรวจสอบชื่อไฟล์ให้ถูกต้องนะครับ

3. เขียน CSS (style.css)

ต่อไป เปิดไฟล์ style.css แล้วคัดลอกและวางโค้ดด้านล่างนี้ นี่คือโค้ดสำหรับตกแต่งหน้าตาของ HTML ที่เราเพิ่งสร้าง

body {
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    text-align: center;
}

h1 {
    font-size: 2.5rem;
}

p {
    font-size: 1.2rem;
    margin: 1rem 0;
}

button {
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 5px;
}

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

4. เขียน JavaScript (script.js)

สุดท้าย เปิดไฟล์ script.js แล้วคัดลอกและวางโค้ดต่อไปนี้ นี่คือโค้ดวิเศษที่จะทำให้เว็บเพจของเรา "เคลื่อนไหว" ได้

// ดึงองค์ประกอบ HTML
const messageElement = document.getElementById('message');
const changeTextBtn = document.getElementById('changeTextBtn');

// การประมวลผลเมื่อคลิกปุ่ม
changeTextBtn.addEventListener('click', function() {
  messageElement.textContent = 'สุดยอด! JavaScript ทำงานแล้ว!';
});

ในส่วนนี้ เรากำลังเขียนคำสั่งว่า "เมื่อปุ่มที่มี ID changeTextBtn ถูกคลิก ให้เปลี่ยนข้อความในแท็ก p ที่มี ID message"

ขั้นตอนที่ 4: ถึงช่วงเวลาที่น่าประทับใจ! มาสัมผัสประสบการณ์ "เว็บที่ทำงานได้" ด้วย Live Server

เอาล่ะ ทุกอย่างพร้อมแล้ว! ในที่สุดเราก็จะมาแสดงเว็บเพจที่เราเพิ่งสร้างในเบราว์เซอร์กัน

ในขณะที่เปิดไฟล์ index.html ใน VSCode ให้คลิกที่ปุ่ม "Go Live" ที่มุมขวาล่าง

เบราว์เซอร์จะเปิดขึ้นมาโดยอัตโนมัติและแสดงหน้าที่คุณสร้างขึ้น!

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

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

จุดที่อาจติดขัด: "กด 'Go Live' แล้วหน้าเว็บไม่ขึ้น", "CSS ไม่ทำงาน", "กดปุ่มแล้วไม่มีอะไรเกิดขึ้น"... ในฐานะมือใหม่ คุณจะต้องเจอกับข้อผิดพลาดบางอย่างแน่นอน เมื่อเกิดเหตุการณ์เช่นนี้ ให้ลองตรวจสอบจุดต่อไปนี้ก่อน

• เส้นทางไปยังไฟล์ CSS/JS ที่เขียนในไฟล์ HTML (href หรือ src) ถูกต้องหรือไม่?
• ชื่อไฟล์ผิดหรือเปล่า? (เช่น styles.css แทนที่จะเป็น style.css)
• คุณคัดลอกและวางโค้ดถูกต้องหรือไม่?

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

สรุป: อาชีพการสร้างเว็บของคุณเริ่มต้นที่นี่

お疲れ様でした！この記事の手順通りに進めて、あなただけのWebページを動かすことができたでしょうか？

今回行ったことは、

1. เตรียมเครื่องมือสร้างเว็บอเนกประสงค์ "VSCode"
2. เสริมความแข็งแกร่งให้สภาพแวดล้อมการพัฒนาด้วยส่วนขยายอย่าง Live Server
3. เขียน HTML, CSS และ JavaScript เพื่อสร้างเว็บเพจที่ทำงานได้จริง

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

หน้าเว็บเล็กๆ ที่คุณสร้างในวันนี้ สามารถเติบโตเป็นเว็บไซต์เหมือนที่ผมสร้างได้โดยการเรียนรู้ HTML และ CSS เพิ่มเติม และเพิ่มฟังก์ชันต่างๆ ด้วย JavaScript อาชีพการสร้างเว็บของคุณได้เริ่มต้นขึ้นแล้วที่นี่ เดี๋ยวนี้

มาเรียนรู้ไปพร้อมกันต่อไปเถอะ!