9 VSCode Extensions สำหรับชาวเว็บเดฟ

สำหรับ Web Developer ที่ใช้ VSCode เป็นเครื่องมือเขียนโค้ดหลักแล้ว Extensions หรือส่วนเสริมถือเป็นส่วนประกอบสำคัญทั้งช่วยย่นเวลาเขียนโค้ดหรือทำให้งานเสร็จเร็วขึ้นได้

เรามาทำความรู้จักกับ Extensions เจ๋ง ๆ ใน VSCode ที่สายเว็บไม่มีไม่ได้แล้วกันครับ

Paste JSON as Code

เคยไหมมี Response จาก API ในรูปแบบ JSON แต่อยากเอามาใช้ Generate ชนิดข้อมูลในภาษาปลายทางที่อยากเขียน เช่นเอา JSON มาแปลงเป็นชนิดข้อมูลใน TypeScript

นี่คือ JSON จาก API

{
  "todos": [
    {
      "userId": 1,
      "id": 1,
      "title": "delectus aut autem",
      "completed": false
    },
    {
      "userId": 1,
      "id": 2,
      "title": "quis ut nam facilis et officia qui",
      "completed": false
    },
    {
      "userId": 1,
      "id": 3,
      "title": "fugiat veniam minus",
      "completed": false
    },
    {
      "userId": 1,
      "id": 4,
      "title": "et porro tempora",
      "completed": true
    }
  ]
}

อยากแปลงเป็นชนิดข้อมูลใน TypeScript แบบนี้

export interface Todos {
    todos: Todo[];
}

export interface Todo {
    userId:    number;
    id:        number;
    title:     string;
    completed: boolean;
}

ลองใช้ Paste JSON as Code ดูซิ Extension นี้คล้าย ๆ quicktype.io นะ สามารถ Generate ชนิดข้อมูลได้จาก JSON ทันทีเลยละ

Paste JSON as Code สนับสนุนการแปลงได้สารพัดภาษา เช่น TypeScript, Python, Go, Ruby, C#, Java, Swift, Rust, Kotlin, C++, Flow, Objective-C, JavaScript, Elm, และ JSON Schema.

Polacode

บางครั้งเราก็อยากแชร์โค้ดของเราในรูปแบบไฟล์ เช่น เอารูปภาพไปแปะใน Power Point หรือเอาไว้สรุปโค้ดตอน Meeting Polacode เนี่ยแหละ Extension ที่จะช่วยแปลงโค้ดของคุณเป็นรูปภาพพร้อมเอาไปใช้ได้ทันที

Quokka.js

อยากเขียนโค้ด JavaScript / TypeScript แล้วเห็นผลลัพธ์ทันทีบน VSCode โดยไม่ต้องออกคำสั่ง Run ให้เสียเวลาไหม? Quokka.js ช่วยคุณได้ ผลลัพธ์ของตัวแปรจะวางให้เห็นอยู่ข้าง ๆ เลยละ

Settings Sync

แบบว่ามีคอมหลายเครื่องไง อาจจะเครื่องที่บ้าน เครื่องที่ทำงาน เครื่องเมีย แต่ก็อยากให้ VSCode ของทุกเครื่องมีทั้ง Settings, Extensions, Snippets และอื่น ๆ เหมือน ๆ กัน จะได้ทำงานได้สะดวกและต่อเนื่อง ถ้าสิ่งนี้คือปัญหาของคุณ ลอง Settings Sync ดูไหมครับ

Better Comments

Comments ที่ดีต้องจัดประเภทได้ว่าอันไหนคือ Todo, Alert, Deprecated และอื่น ๆ และแน่นอนว่าต้องมีสีสันสะดุดตาให้เข้าใจง่าย ดูปั๊บรู้ปุ๊บว่าคืออะไร นี่ละคือความสามารถของ Extension ที่ชื่อว่า Better Comments

Code Runner

บางครั้งก็มีโมเม้นต์ที่อยากจะทดลอง Run แค่บางส่วนของโค้ดที่สนใจ ลองดู Code Runner หน่อยไหม มันทำได้นะ

Project Manager

หากเรามีหลายโปรเจคใน VSCode อยากกรุ๊ปรวมกันด้วย Tag เพื่อให้เรียกใช้งาน/ดู/จัดการ โปรเจคได้ง่าย ๆ ต้องลอง Project Manager

CSS Peek

อยากแค่เอาเมาส์วางเหนือ ID/class ใน HTML แล้วเห็นก้อน CSS เลยไหมละ ลองใช้ CSS Peek ดูครับ

Auto Rename Tag

เวลาแก้ไข Tag ของ HTML อยากให้แก้เพียง tag เปิดหรือปิด แล้วแก้พร้อมกันไปทั้งคู่ได้ ต้องลอง Auto Rename Tag

เรียนรู้การใช้งานภาษา Go

เรียนภาษา Go พร้อมสร้าง RESTful API ด้วย Go สุดคุ้มกับ 43+ บทเรียน พร้อมใบ Certificate ไม่จำกัดเวลาเรียน โปรโมชั่นพิเศษ เพียง 990.- บาท (ราคาปกติ 2,950 บาท) ลงทะเบียน 👉 https://www.codesass.com/courses/golang

ภาษา Go (Golang) เป็นหนึ่งในภาษายอดนิยมในปัจจุบัน มีรูปแบบ Syntax ที่เรียบง่ายสั้นกระชับ Go มีการทำงานที่ไว และเป็นภาษาที่อาศัยการ Compile ผลลัพธ์ออกมาเป็น Executable File (เช่นไฟล์ .exe) โดย Go นั้นใช้เวลา Compile โปรแกรมที่สั้นมาก ๆ เมื่อเทียบกับภาษาอื่น เช่น C/C++ เป็นต้น แถม Go ยังเป็นภาษาที่เขียนการทำงานแบบ Concurrency ได้ง่าย ข้อดีทั้งหมดนี้ Go จึงเหมาะกับการสร้างโปรแกรมทั้งแบบ CLI, Backend API, โปรแกรมบน Cloud ดังจะเห็นได้จากหลาย ๆ โปรเจคที่พัฒนาด้วย Go เช่น Docker, Kubernetes เป็นต้น

🏆 ปัจจุบันบริษัท Tech หลายแห่งในไทยรับสมัครสายงานที่เกี่ยวกับ Go ค่าตัวแพงระดับ 35K - 120K++ จบคอร์สนี้ผู้เรียนสามารถต่อยอดทำงานในสายอาชีพ Go Developer ได้เลย

คอร์สนี้สอนการใช้งานภาษา Go (Golang) ตั้งแต่เริ่มต้น พร้อมสร้าง Backend แบบ RESTful API และสร้าง Real World โปรเจคไปกับระบบขายสินค้า

👏 สิ่งที่ผู้เรียนจะได้รับจากคอร์สนี้

เข้าใจการเขียนโปรแกรมด้วย Go ด้วยเนื้อหาที่สั้น กระชับ ไม่หนักหัว
เข้าใจหลักการของ RESTful API และการใช้ Go + Gin Framework เพื่อสร้าง API
เรียนรู้การใช้ GORM เพื่อต่อฐานข้อมูลคือ MySQL
เข้าใจการทำงานกับฟอร์มผ่านภาษา Go
เรียนรู้การเชื่อมต่อกับ UI กับ API

♨️ พิเศษสุด !!

เราเชื่อว่าการเรียนต้องได้ทำจริง คอร์สของเรามี Workshop ระบบร้านขายของออนไลน์
ไม่จำกัดเวลาเข้าเรียน เรียนได้ทุกเมื่อที่ต้องการ
มีแบบทดสอบท้ายคอร์สเพื่อประเมินตนเอง
คอร์สนี้มีใบ Certificate แจกไว้อัพโปรไฟล์
ถาม-ตอบ ได้ในบทเรียนเมื่อไม่เข้าใจเนื้อหา

อัพสกิล Go สุดคุ้มในราคา 990 บาท (จากราคาปกติ 2,950 บาท) เนื้อหาจัดเต็มไม่จำกัดเวลาเรียน ลงทะเบียนที่ https://www.codesass.com/courses/golang ขอให้สนุกกับการเรียนรู้ Go ไปด้วยกันครับ 😁