บทความ IT เจ๋งๆ

20 VS Code Extensions, Themes, Icons, Shortcuts ที่ช่วยเพิ่ม Productivity ของคุณ

24-ก.ค.-24

คัมภีร์เทพ IT

เชื่อว่า Developer หลายคน มักจะใช้เวลากับ Code Editor ในการทำงาน ดังนั้น คุณต้องตรวจสอบให้แน่ใจว่า มันถูกตั้งค่าไว้อย่างถูกต้อง เพื่อให้มีประสิทธิภาพมากที่สุดเท่าที่จะเป็นไปได้ และนี่ก็เป็น 20 VS Code Extensions, Themes, Icons, Shortcuts ที่ช่วยเพิ่ม Productivity ของคุณ นอกจากนี้ยังรวมถึงการตั้งค่าอีกด้วย

Download VS Code ได้จากที่ไหน

หากคุณยังไม่ได้ติดตั้ง VS Code ให้ไปที่ code.visualstudio.com และ Download Version ที่เสถียรมาใช้ และเมื่อคุณติดตั้งแล้ว สิ่งต่าง ๆ ดูจะค่อนข้างเป็นพื้นฐาน งั้นเรามาเปลี่ยนสิ่งนั้นกัน

มาพบกับเพื่อนใหม่ที่ดีที่สุดของคุณ: Navigation Bar

เรามาทำความคุ้นเคยกับ Navigation Bar ด้านซ้ายมือกัน:

  • File Explorer: Tab นี้ใช้สำหรับเรียกดู Project Files ของคุณ
  • Search: ที่นี่ คุณจะสามารถค้นหาบรรทัดของ Code ที่ต้องการภายใน Project ได้
  • Source Control: ใช้สำหรับ Source Control และช่วยให้คุณสามารถ Stage, Commit และ Track การเปลี่ยนแปลงของ Code ได้
  • Debugger: ที่นี่ คุณสามารถตั้งค่า Breakpoints, ตรวจสอบ Variables และแก้ไข Code ของคุณทั้งหมดได้อย่างรวดเร็ว
  • Extensions: นี่คือความมหัศจรรย์ที่จะเกิดขึ้นกับการทำงานของคุณ

แนะนำ 20 VS Code Extensions ที่ช่วยเพิ่ม Productivity ในการทำงาน

หากคุณกดที่ Extensions Tab คุณจะสามารถค้นหา Extensions ตามชื่อของพวกมันได้ จากนั้นก็กด Install อย่าลืม Enable ในภายหลังด้วยหากจำเป็น งั้นเรามาดู VS Code Extensions เหล่านั้นกัน:

  • Auto Close Tag: ไม่ต้องวุ่นวายกับการปิด HTML Tags อีกต่อไป เพราะมันจะช่วยทำให้คุณ
  • Auto Import: มันจะช่วยเรื่องการ Import TypeScript (หรือ JavaScript) Modules ที่ไม่ยุ่งยาก พร้อมทั้งช่วยตรวจหาสิ่งที่คุณต้องการและดำเนินการส่วนที่เหลือ
  • Auto Rename Tag: เปลี่ยนชื่อ HTML Tags แล้วคู่ของมันจะ Update ตามให้ในทันที
  • Code Spell Checker: มันเปรียบเหมือนเป็นตำรวจที่คอยตรวจจับ Grammar สำหรับ Code ของคุณ โดยมันจะตรวจจับชื่อ Variables ที่พิมพ์ผิดให้
  • DotEnv: เพิ่มสีและความมีชีวิตชีวาให้กับ Environment Variable Files ของคุณ
  • Docker: นี่เป็นการเพิ่ม Tab สำหรับ Container Work ที่ง่ายมากหากคุณต้องทำงานกับ Docker
  • ESLint: ตรวจจับปัญหาใน Code ได้ทันที เช่น การจัด Format หรือ Bugs ที่อาจเกิดขึ้น
  • Figma: Embed และดู Figma Design Files ภายใน VS Code
  • GitHub Copilot (และ Copilot Chat): คำแนะนำที่ขับเคลื่อนโดย AI ในขณะที่คุณกำลังพิมพ์และ Chat Window ในลักษณะเดียวกับ ChatGPT ภายใน Editor ของคุณ
  • GraphQL: มี Extensions หลายอย่างที่ทำให้การทำงานกับ GraphQL ง่ายขึ้น
  • Import Cost: ดูขนาดของ Packages ที่ถูก Import เข้ามา รวมทั้งช่วยตรวจจับการขยายขนาดที่อาจเกิดขึ้น
  • Indenticator: ช่วยให้ติดตามว่า คุณกำลังอยู่ที่ตำแหน่งไหนใน Code ที่ซ้อนกัน ได้ง่ายขึ้น
  • Live Server: เปิด Local Server ด้วย Auto-Reload ซึ่งเหมาะสำหรับการดูตัวอย่างการเปลี่ยนแปลง
  • Live Share: คุณสามารถเขียน Program ไปพร้อมกับคนอื่น ๆ ได้อย่างราบรื่นภายใน Editor เดียวกันได้แบบ Real-Time
  • Markdown Preview Enhanced: ดูตัวอย่าง Markdown Files ของคุณได้ทันทีในขณะที่คุณกำลัง Edit
  • Notes: เก็บ Scratchpad ที่มีประโยชน์ไว้สำหรับ Project Notes, Setup Instructions เป็นต้น

มาทำให้มันสวยขึ้นกันเถอะ: Themes และ Icons

มาแก้ไขรูปลักษณ์เริ่มต้นของ VS Code กันดีกว่า คุณต้องมี Extensions ทั้งสองนี้:

หลังการติดตั้ง ให้กด Cmd + Shift + P (Ctrl + Shift + P บน Windows) ค้นหา “Theme” และเปิด “Preferences: Color Theme” ที่นี่คุณจะเห็น Themes ที่มีอยู่ทั้งหมด สิ่งที่ขึ้นต้นด้วย Material Theme จะเป็นสิ่งที่เราติดตั้งผ่าน Extensions

แนะนำ Themes ที่น่าสนใจ

  1. Material Theme High Contrast
  2. Material Theme Darker High Contrast
  3. Material Theme Palenight High Contrast

เคล็ดลับ: ค้นหา “Accent Color” ใน Settings เพื่อเลือกสีสำหรับการเน้น Files ที่ใช้งานอยู่ (จากตัวอย่างนี้คือ Bright Teal)

Shortcuts ที่มีประโยชน์ในการทำงาน

ใช้ทางลัดไม่กี่อย่างให้เชี่ยวชาญ แล้วคุณจะเขียนโค้ดด้วยความเร็ววาร์ปได้ ตรวจสอบรายชื่ออย่างเป็นทางการสำหรับระบบปฏิบัติการของคุณ (Windows / macOS) แต่นี่คือสิ่งที่ฉันใช้แบบ NON-STOP:

Navigation:

Cmd + B: สลับตัว File Explorer

Cmd + P: ค้นหา File ตามชื่อ

Cmd + Shift + P: เข้าถึงการ Setting ต่าง ๆ ได้อย่างรวดเร็ว

Ctrl + `: สลับการ เปิด/ปิด Terminal

Editing:

Cmd +/-: Zoom เข้า/ออก

Cmd + Shift + F: ค้นหาคำหรือวลีทั่วทั้ง Project

Cmd + W: ปิด Active File

Cmd + Shift + T: เปิด File ที่เพิ่งปิด

Cmd + D: เลือกคำปัจจุบัน ที่ปรากฏถัดไปในส่วนอื่น ๆ เพื่อการแก้ไขหลายรายการได้พร้อม ๆ กัน

Option + Up/Down: ย้ายบรรทัดปัจจุบันขึ้น/ลง

Option + Shift + Up/Down: ทำการ Duplicate บรรทัดปัจจุบัน

Cmd + X: ตัดบรรทัดปัจจุบัน

Cmd + Left/Right: ไปที่จุดเริ่มต้น/สิ้นสุดของบรรทัด

Option + Left/Right: ไปหนึ่งคำซ้าย/ขวา

Finder/Explorer Integration:

คลิกขวาที่ Folder: เลือก “Find in folder” เพื่อค้นหาภายใน Directory ที่ต้องการเท่านั้น

คลิกขวาที่ File: เลือก “Reveal in Finder” (หรือระบบปฏิบัติการที่เทียบเท่ากัน) เพื่อให้ทราบตำแหน่งของ File

ที่มา: https://levelup.gitconnected.com/

 

 

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

 

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

เพิ่มเพื่อน

 

บทความล่าสุด

ประเภทบทความ