สร้าง VS Code เพิ่มสีสันการเขียนโค้ดให้ไม่เหงาใจ Feat. ChatGPT

สวัสดีครับ เนื่องจากผมเพิ่งเปลี่ยนมาใช้ VS Code อย่างเต็มตัว (ก่อนหน้านี้ใช้ IDE ตัวอื่นเป็นหลัก) แล้วประสบปัญหาใหญ่ที่แก้ไม่ตกคือเขียนโค้ดเพลินจนลืมเวลา เลยนั่งคิดว่าจะแก้ปัญหายังไงดี นาฬิกาที่ใช้อยู่ก็ดันกลับดาวไปแล้ว (พูดง่ายๆ คือพัง) จึงนึกถึงตัว Extension ของ VS Code ขึ้นมา แต่เมื่อไม่เจอซักตัวที่โดนใจ ไหนๆ เราก็เขียนเองซะเลย

ทีนี้จะเริ่มยังไงดีล่ะ ไม่เคยเขียนมาก่อนด้วย ภาษาที่ใช้พัฒนา Extension ดันเป็น Typescript ที่ห่างหายกันนานตั้งแต่สมัยมหาลัย แถมไม่ได้มีเวลามากถึงขนาดนั่งอ่านเอกสารทั้งหมดอีก

งั้นโปรเจคอันนี้ผมขอให้ ChatGPT AI ที่เขาว่ากันว่าเก่งนักเก่งหนาช่วยแล้วกัน

Disclaimer: เนื่องจาก ChatGPT หลุดบ่อยมาก เลยไม่ได้แคปผลลัพธ์มาให้ดูกันนะครับ นอกจากการตั้งค่าโปรเจคและการนำ Extension ขึ้นร้านค้าแล้ว ผมใช้ ChatGPT ทั้งหมด ไม่ได้มีการค้นหาด้วยกูเกิลหรือเปิดเอกสารใดๆ เลย

ผลลัพธ์

เริ่มจับเวลา

หมดเวลา

Extension ตัวนี้ได้ถูกปล่อยให้ใช้กันที่ fun-extension — Visual Studio Marketplace เป็นที่เรียบร้อย

fun-extension - Visual Studio Marketplace

หรือสามารถตรวจสอบ Source Code ได้ที่นี่เลย

GitHub - Bohatman/fun-extension

Fun Fact: ทำไมชื่อของ Extension ตัวนี้ถึงเป็น fun-extension → ตอนแรกจะทำขำๆ เพื่อทดสอบก่อนเขียนจริง แต่ดันเพลิน รู้ตัวอีกทีก็กลับตัวไม่ทันแล้ว 😂

Step 1: ตั้งค่าโปรเจค

ลง Library สำหรับการพัฒนา

npm install -g yo generator-code

สร้างโฟลเดอร์สำหรับพัฒนา Extension

mkdir fun-extension yo code

ตั้งค่าโปรเจค

ทดลองรันด้วยการเปิดผ่าน VS Code และกด F5 จะมีอีกหน้าจอขึ้นมา ให้กด F1 แล้วพิมพ์ Command “Hello World” จะปรากฏกล่องข้อความขึ้นมุมขวาล่างดังรูป

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

Step 2: เริ่ม Implement กันเถอะ

เราเริ่มจากการหาว่าแถบด้านล่างของ VS Code เนี่ยเรียกว่าอะไร เพื่อที่เราจะได้เริ่มงานได้ถูกจุด

ถาม ChatGPT แล้วได้ความมาว่ามันคือ Status Bar งั้นถามต่อเลยว่าจะแก้ยังไงล่ะ

จากตัวอย่างจะเห็นได้ว่า ChatGPT เหมือนอ่านใจเราออกว่ากำลังทำตัวจับเวลา เลยยกตัวอย่างที่โชว์วันเวลาให้เรา ไหนลองเอาไปรันสิ

ทำไมเวลาไม่เห็นขึ้นแบบที่เราคิดไว้หว่า หรือ ChatGPT จะหลอกเรา ไหนขอลองเช็คจาก Log

แปลกๆ แฮะ เพราะในโค้ดเรามีการ Log เอาไว้แบบนี้

console.log(‘Congratulations, your extension “fun-extension” is now active!’);

แล้วทำไมถึงไม่มีการ Log นะ ไหนลองถาม ChatGPT อีกซักหน่อย

ข้อแรกน้องบอกว่าให้เช็ค activationEvents แล้ว activationEvents อยู่ตรงไหนล่ะ

ผมขอสรุปตรงนี้เลย activationEvents คือตัวกำหนดว่า Activate Function จะถูกเรียกตอนไหนนั่นเอง ซึ่ง Default จะถูกเรียกเมื่อเราใช้ Command “Hello word” น้อง ChatGPT แนะนำว่าให้ใช้ onStartup แต่ก็ไม่เวิร์ค จนเปลี่ยนเป็น “*” ถึงทำงานได้ตามที่คาดหวัง (หลังจากที่พัฒนาเสร็จแล้ว ลองไปค้นหาเพิ่มเติมด้วยลูกพี่กูเกิล ปรากฏว่า onStartup เลิกใช้ไปแล้ว ให้ไปใช้ onStartupFinished แทน)

Step 3: เริ่มทำตัวจับเวลา

(หลังจากนี้จะไม่มีภาพ ChatGPT ให้ดูนะครับ เนื่องจากน้อง Session หลุดแบบไม่พัก) พอได้โครงสำหรับการเขียนโค้ดมาแล้ว เราจะเริ่มสร้างตัวแสดงผลเวลานับถอยหลัง

iconBar = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 99); 
timerBar = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 100); 
timerBar.text = "เริ่มจับเวลา"; 
timerBar.command = "fun-extension.enterTime"; timerBar.show();

โดยให้แสดงผลด้านขวาและมี Priority 100 (ถ้าเลขน้อยจะอยู่ทางขวา) ต่อมาผมต้องการให้เมื่อกดคำว่า “เริ่มจับเวลา” ให้มีกล่องให้กรอกจำนวนนาทีที่ต้องการ

vscode.commands.registerCommand('fun-extension.enterTime', () => {
    vscode.window.showInputBox({
        prompt: "ตั้งเวลา",
        placeHolder: 'ใส่จำนวนนาที',
        value: "10",
        validateInput: (minutesStr) => {
            let minutes = Number(minutesStr);
            if(isNaN(minutes)){
                return '❌❌❌ กรอกได้แค่ตัวเลขน้า ❌❌❌';
            }
            return undefined;
        }
    }).then(minutesStr => {
        let minutes = Number(minutesStr);
        setTimer(minutes, "👨‍💻");
    });
});

โดยจะให้ขึ้นกรอกตัวเลข หากไม่ใช่ตัวเลข จะขึ้นข้อความเตือน ❌❌❌ กรอกได้แค่ตัวเลขน้า ❌❌❌

และเมื่อกรอกตัวเลข ตัวนับเวลาจะเริ่มทำงาน…

var intervalId: NodeJS.Timeout; 
var timeoutId: NodeJS.Timeout;
var lastInput: number;
let configBreakTime = vscode.workspace.getConfiguration("fun").get("breaktime");
var breaktime:number = configBreakTime === undefined ? 1 :  Number(configBreakTime);
function setTimer(timerMinutes: number, icon: string){
 if(!(intervalId === undefined)){
  clearInterval(intervalId);
  clearTimeout(timeoutId);
 }
 iconBar.text = icon;
 iconBar.show();
 lastInput = timerMinutes;
 let count = timerMinutes * 60;
 intervalId = setInterval(()=>{
  count = count - 1;
  let minutes = Math.floor(count / 60);
  let seconds = count % 60;
  timerBar.text = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
  timerBar.show();
 }, 1000);
 timeoutId = setTimeout(()=>{
  iconBar.hide();
  timerBar.text = "หมดเวลาแล้ว";
  timerBar.show();
  clearInterval(intervalId);
  if(icon === "👨‍💻"){
   vscode.window.showInformationMessage("พักหน่อยไหม หรือจะทำงานต่อเลย", {
    modal: true
   }, `อยากพักแล้ว (${breaktime} นาที)`, `ไม่เอาจะทำงานต่อกำลังมัน (${lastInput} นาที)`).then((result) => {
    if(result === undefined){
     vscode.window.showInformationMessage("ไปแล้วหรอ กลับมาใช้งานได้อีกทุกเมื่อเลยนะ");
    }else if(result === `อยากพักแล้ว (${breaktime} นาที)`){
     setTimer(breaktime, "🧘‍♂️");
    }else if(result === `ไม่เอาจะทำงานต่อกำลังมัน (${lastInput} นาที)`) {
     setTimer(lastInput, "👨‍💻");
    }
   });
  }else{
   vscode.window.showInformationMessage("พร้อมทำงานหรือยัง หรืออยากพักต่ออีกนิด", {
    modal: true
   }, "พร้อมทำงานแล้ว", `ยังไม่หายเหนื่อยเลย (${breaktime} นาที)`).then((result) => {
    if(result === undefined){
     vscode.window.showInformationMessage("ไปแล้วหรอ กลับมาใช้งานได้อีกทุกเมื่อเลยนะ");
    }else if(result === "พร้อมทำงานแล้ว"){
     vscode.commands.executeCommand("fun-extension.enterTime");
    }else if(result === `ยังไม่หายเหนื่อยเลย (${breaktime} นาที)`) {
     setTimer(breaktime, "🧘‍♂️");
    }
   });
  }
 }, timerMinutes * 60 * 1000);
}

โดยโค้ดด้านบนจะแบ่งการทำงานออกเป็นสองส่วน

1. ตัวจับเวลา โดยหากมีการกดซ้ำจะทำการเคลียร์ตัวจับเวลาเดิมก่อนจะเริ่มจับเวลาใหม่
2. เมื่อจับเวลาครบแล้ว จะมี Dialog Box ขึ้นมาให้กดว่าจะจับเวลาต่อไหมหรืออยากพัก ซึ่งเวลาในการพักสามารถตั้งค่าได้ที่ Extension

สรุป

เนื่องจากผมไม่อยากให้บทความยืดยาวมากจนเกินไป ผมขอข้ามส่วนอธิบายโค้ดหลายๆ ส่วนออก แต่หากท่านใดสนใจ สามารถนำ Source Code ไปแก้ไขเพื่อศึกษาได้ตามสะดวกครับ

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

Reference

Your First Extension

ChatGPT: Optimizing Language Models for Dialogue

สำหรับใครที่สนใจเรื่องราวดีๆ หรืออยากเรียนรู้เกี่ยวกับ Product ใหม่ๆ จากชาว KBTG สามารถติดตามรายละเอียดกันได้ที่เว็บไซต์ www.kbtg.tech