คู่มือการใช้งาน VS Code: เคล็ดลับและเครื่องมือที่จำเป็นสำหรับนักพัฒนาที่มีประสิทธิภาพ\n\nVisual Studio Code (VS Code) เป็นโปรแกรมแก้ไขโค้ดแบบฟรี, โอเพนซอร์ส, และข้ามแพลตฟอร์ม ซึ่งเป็นที่นิยมในหมู่นักพัฒนาเป็นอย่างมาก มันมีฟังก์ชันที่ทรงพลัง, ระบบนิเวศของส่วนขยายที่หลากหลาย, และอินเทอร์เฟซที่ใช้งานง่าย บทความนี้จะรวบรวมเคล็ดลับและเครื่องมือแนะนำสำหรับ VS Code โดยอิงจากการสนทนาล่าสุดบน X/Twitter เพื่อช่วยให้คุณเพิ่มประสิทธิภาพในการพัฒนา\n\n## เสน่ห์ของ VS Code คืออะไร?\n\nจากการสนทนาบน X/Twitter เราจะเห็นความกระตือรือร้นของนักพัฒนาที่มีต่อ VS Code @@freeCodeCamp ได้กล่าวถึงความแพร่หลายและความฟรีของ VS Code หลายครั้ง โดยเน้นย้ำถึงฟังก์ชันที่หลากหลายที่มันมีให้ @@chomado ได้แชร์โปรแกรมแก้ไขที่เธอชื่นชอบ และแนะนำส่วนขยายสำหรับวิศวกรฟรอนท์เอนด์\n\nสรุปแล้ว ข้อดีหลักของ VS Code ได้แก่:\n\n* ฟรีและโอเพนซอร์ส: ทุกคนสามารถใช้งานได้ฟรี และมีส่วนร่วมในการพัฒนาของชุมชนได้\n* ข้ามแพลตฟอร์ม: รองรับระบบปฏิบัติการต่างๆ เช่น Windows, macOS, Linux เป็นต้น\n* น้ำหนักเบา: เริ่มต้นได้อย่างรวดเร็ว และใช้ทรัพยากรน้อย\n* ระบบนิเวศของส่วนขยายที่ทรงพลัง: สามารถเพิ่มฟังก์ชันของ VS Code ได้โดยการติดตั้งส่วนขยาย เพื่อตอบสนองความต้องการในการพัฒนาที่หลากหลาย\n* เครื่องมือแก้ไขข้อผิดพลาดในตัว: รองรับการแก้ไขข้อผิดพลาดของภาษาโปรแกรมต่างๆ ช่วยให้นักพัฒนาสามารถระบุและแก้ไขปัญหาได้อย่างรวดเร็ว\n* การรวม Git: ช่วยให้นักพัฒนาสามารถควบคุมเวอร์ชันได้อย่างสะดวก\n* คำแนะนำอัจฉริยะ: มีฟังก์ชันเติมโค้ดอัตโนมัติ, ตรวจสอบไวยากรณ์ ฯลฯ เพื่อเพิ่มประสิทธิภาพในการเขียนโค้ด\n\n## เคล็ดลับการใช้งาน VS Code: เพิ่มประสิทธิภาพในการพัฒนาของคุณ\n\n1. เชี่ยวชาญคีย์ลัด: VS Code มีคีย์ลัดมากมาย การเชี่ยวชาญคีย์ลัดเหล่านี้สามารถเพิ่มประสิทธิภาพในการพัฒนาได้อย่างมาก นี่คือคีย์ลัดที่ใช้บ่อยบางส่วน:\n\n * Ctrl+Shift+P (Windows/Linux) / Cmd+Shift+P (macOS): เปิดแผงคำสั่ง นี่เป็นหนึ่งในฟังก์ชันหลักของ VS Code คุณสามารถดำเนินการต่างๆ ผ่านแผงคำสั่งได้\n * Ctrl+P (Windows/Linux) / Cmd+P (macOS): เปิดไฟล์อย่างรวดเร็ว\n * Ctrl+Shift+O (Windows/Linux) / Cmd+Shift+O (macOS): ไปยังสัญลักษณ์ (ฟังก์ชัน, คลาส ฯลฯ) อย่างรวดเร็ว\n * Ctrl+Shift+F (Windows/Linux) / Cmd+Shift+F (macOS): ค้นหาทั่วโลก\n * Ctrl+D (Windows/Linux) / Cmd+D (macOS): เลือกรายการที่ตรงกันถัดไป สามารถแก้ไขข้อความเดียวกันหลายรายการพร้อมกันได้\n * Alt+Shift+Down/Up (Windows/Linux) / Option+Shift+Down/Up (macOS): คัดลอกบรรทัดปัจจุบันไปยังบรรทัดถัดไป/บรรทัดก่อนหน้า\n * Ctrl+/ (Windows/Linux) / Cmd+/ (macOS): ใส่/ลบความคิดเห็นในบรรทัดปัจจุบันหรือบล็อกโค้ดที่เลือก\n * Alt+Up/Down (Windows/Linux) / Option+Up/Down (macOS): เลื่อนบรรทัดปัจจุบันหรือบล็อกโค้ดที่เลือกขึ้น/ลง\n * Ctrl+K Ctrl+S: เปิดอินเทอร์เฟซการตั้งค่าแป้นพิมพ์ลัด คุณสามารถดูและปรับแต่งแป้นพิมพ์ลัดได้\n\n2. ใช้ประโยชน์จากแผงคำสั่ง: เปิดแผงคำสั่งโดยใช้ Ctrl+Shift+P / Cmd+Shift+P คุณสามารถดำเนินการต่างๆ ได้ เช่น:\n\n * Settings: เปิดอินเทอร์เฟซการตั้งค่า\n * Extensions: Install Extension: ติดตั้งส่วนขยาย\n * Git: Commit: ส่งการเปลี่ยนแปลง Git\n * Format Document: จัดรูปแบบเอกสารปัจจุบัน\n * Go to Symbol in Workspace: ไปยังสัญลักษณ์ในพื้นที่ทำงานอย่างรวดเร็ว

3. การตั้งค่าแบบกำหนดเอง: VS Code อนุญาตให้ผู้ใช้ปรับแต่งการตั้งค่าต่างๆ ได้ รวมถึงธีม, ฟอนต์, รูปแบบการเยื้อง ฯลฯ สามารถเปิดหน้าต่างการตั้งค่าได้โดยไปที่ File -> Preferences -> Settings หรือแก้ไขไฟล์ settings.json โดยตรง

   • ธีม: เลือกธีมที่คุณชอบเพื่อเพิ่มความสะดวกสบายในการเขียนโค้ด
   • ฟอนต์: เลือกฟอนต์ที่เหมาะสมเพื่อเพิ่มความสามารถในการอ่านโค้ด ขอแนะนำให้ใช้ฟอนต์ที่มีความกว้างคงที่ เช่น Fira Code, JetBrains Mono เป็นต้น
   • รูปแบบการเยื้อง: ตั้งค่ารูปแบบการเยื้องตามข้อกำหนดของโปรเจ็กต์ สามารถใช้ช่องว่างหรือปุ่ม Tab ได้
   • บันทึกอัตโนมัติ: เปิดใช้งานฟังก์ชันบันทึกอัตโนมัติเพื่อหลีกเลี่ยงการสูญเสียโค้ดเนื่องจากการลืมบันทึก

4. การใช้ Code Snippets (ส่วนย่อยของโค้ด): Code Snippets สามารถช่วยให้คุณแทรกบล็อกโค้ดที่ใช้บ่อยได้อย่างรวดเร็ว VS Code มี Code Snippets ที่ใช้บ่อยอยู่แล้ว และคุณยังสามารถกำหนด Code Snippets เองได้

   • เปิด Command Palette (แผงคำสั่ง) โดยพิมพ์ Preferences: Configure User Snippets เลือกภาษาที่คุณต้องการแก้ไข จากนั้นคุณสามารถแก้ไข Code Snippets ได้
   • ตัวอย่างเช่น คุณสามารถสร้าง Code Snippet clog สำหรับ JavaScript เพื่อแทรก console.log() ได้อย่างรวดเร็ว:

   "Print to console": {
       "prefix": "clog",
       "body": [
           "console.log('$1');",
           "$2"
       ],
       "description": "Log output to console"
   }
   

5. การใช้การแก้ไขด้วยหลายเคอร์เซอร์: กดปุ่ม Alt (Windows/Linux) / Option (macOS) ค้างไว้ แล้วคลิกเมาส์ คุณสามารถสร้างเคอร์เซอร์ในหลายตำแหน่งและแก้ไขโค้ดหลายบรรทัดพร้อมกันได้ นอกจากนี้ คุณยังสามารถใช้ Ctrl+D / Cmd+D เพื่อเลือกรายการที่ตรงกันถัดไปสำหรับการแก้ไขด้วยหลายเคอร์เซอร์

6. การแบ่งหน้าต่างแก้ไข: คุณสามารถแบ่งหน้าต่างแก้ไขออกเป็นหลายหน้าต่างเพื่อดูและแก้ไขไฟล์หลายไฟล์พร้อมกันได้ คุณสามารถใช้คำสั่ง View -> Editor Layout -> Split Editor เพื่อแบ่งหน้าต่างแก้ไข

7. การพัฒนาจากระยะไกล: VS Code มีส่วนขยาย Remote Development ที่ช่วยให้คุณแก้ไขโค้ดบนเซิร์ฟเวอร์ระยะไกลได้จากเครื่องของคุณเอง สิ่งนี้มีประโยชน์อย่างยิ่งสำหรับการพัฒนาแอปพลิเคชันฝั่งเซิร์ฟเวอร์

8. การใช้ VS Code ในเบราว์เซอร์: ดังที่ @@Prathkum ได้กล่าวไว้ คุณสามารถใช้ VS Code ได้โดยตรงในเบราว์เซอร์โดยไปที่ vscode.dev ซึ่งสะดวกและรวดเร็ว สิ่งนี้มีประโยชน์สำหรับการแก้ไขชั่วคราวหรือการทำงานบนอุปกรณ์ที่ไม่ได้ติดตั้ง VS Code งานของ @@CompuIves ได้พัฒนาสิ่งนี้ไปอีกขั้น โดยเขาสามารถรัน VS Code ได้โดยตรงในเบราว์เซอร์และเชื่อมต่อกับ API ของ CodeSandbox

คำแนะนำเครื่องมือ VS Code: สร้าง IDE ส่วนตัวของคุณ

จุดแข็งของ VS Code คือระบบนิเวศของส่วนขยายที่หลากหลาย ต่อไปนี้คือคำแนะนำส่วนขยายที่ใช้บ่อย:

• Prettier: เครื่องมือจัดรูปแบบโค้ดที่สามารถจัดรูปแบบโค้ดโดยอัตโนมัติและรักษารูปแบบโค้ดให้สอดคล้องกัน

  ext install esbenp.prettier-vscode
  

• ESLint: เครื่องมือตรวจสอบโค้ด JavaScript ที่สามารถตรวจสอบข้อผิดพลาดและปัญหาที่อาจเกิดขึ้นในโค้ด

  ext install dbaeumer.vscode-eslint
  ```*   **EditorConfig for VS Code:** เครื่องมือสำหรับรักษาความสอดคล้องของรูปแบบโค้ดระหว่างเอดิเตอร์ต่างๆ
  
  ```shell
  ext install EditorConfig.EditorConfig
  

• Live Server: เริ่มต้นเซิร์ฟเวอร์โลคัลอย่างรวดเร็ว เพื่อความสะดวกในการดีบักโค้ดส่วนหน้า @@ThreatSynop กล่าวถึงช่องโหว่ด้านความปลอดภัยของ Live Server และเตือนนักพัฒนาให้ระมัดระวังเรื่องความปลอดภัยเมื่อใช้ส่วนขยาย

  ext install ritwickdey.LiveServer
  

• Code Runner: รองรับการรันภาษาโปรแกรมต่างๆ เพื่อความสะดวกในการทดสอบส่วนย่อยของโค้ดอย่างรวดเร็ว ในทำนองเดียวกัน @@ThreatSynop ยังชี้ให้เห็นถึงช่องโหว่ด้านความปลอดภัยของ Code Runner อีกด้วย

  ext install formulahendry.code-runner
  

• GitLens: ส่วนขยายที่ปรับปรุงฟังก์ชัน Git สามารถดูประวัติการส่งโค้ด ข้อมูลผู้เขียน ฯลฯ

  ext install eamodio.gitlens
  

• Bracket Pair Colorizer: กำหนดสีให้กับวงเล็บที่จับคู่กัน เพื่อความสะดวกในการดูโครงสร้างโค้ด

  ext install CoenraadS.bracket-pair-colorizer-2
  

• IntelliCode: (ให้บริการโดย Microsoft) การเติมโค้ดด้วย AI ช่วยให้คำแนะนำโค้ดที่ชาญฉลาดยิ่งขึ้นตามบริบท

  ext install visualstudioexptteam.vscodeintellicode
  

• VS Code Copilot: (ให้บริการโดย GitHub, มีค่าใช้จ่าย) ผู้ช่วยโค้ด AI สามารถสร้างส่วนย่อยของโค้ด ฟังก์ชัน หรือแม้แต่ไฟล์ทั้งหมดตามโค้ดของคุณ @@aadhilkh กล่าวถึงความคุ้มค่าของการใช้ VS Code Copilot

• Markdown Preview Enhanced: ปลั๊กอินแสดงตัวอย่าง Markdown ที่ดีกว่า @@ThreatSynop ยังชี้ให้เห็นว่าปลั๊กอินนี้มีปัญหาด้านความปลอดภัยที่ต้องระวัง

  ext install shd101wyy.markdown-preview-enhanced
  

• Remote Development 扩展包: รวมถึงส่วนขยาย SSH, Containers, WSL ฯลฯ เพื่อความสะดวกในการพัฒนาจากระยะไกล (Remote Development Extension Pack: Includes SSH, Containers, WSL, etc. extensions for convenient remote development.)

เกี่ยวกับการรวม LLM และ VS Code (About the integration of LLM and VS Code)

มีการพูดคุยเกี่ยวกับการรวม LLM และ VS Code บน X/Twitter ด้วย @@akshay_pachaar แบ่งปันวิธีการฝึก LLM ใน VS Code @@MacopeninSUTABA กล่าวถึงการรวม AI coding agent "Claude Code" ของ Anthropic เข้ากับ VS Code สิ่งเหล่านี้บ่งชี้ว่า AI จะมีบทบาทสำคัญมากขึ้นในการพัฒนาในอนาคต

คำแนะนำด้านความปลอดภัย (Security Tips)

ดังที่ @@ThreatSynop กล่าวถึง ส่วนขยาย VS Code บางตัวมีช่องโหว่ด้านความปลอดภัย ซึ่งอาจนำไปสู่การโจรกรรมไฟล์และการรันโค้ดจากระยะไกล ดังนั้นเมื่อใช้ส่วนขยาย ควรใส่ใจกับสิ่งต่อไปนี้:

• เลือกส่วนขยายที่เป็นทางการหรือมีชื่อเสียงที่ดี
• อัปเดตส่วนขยายเป็นประจำ
• อ่านคำอธิบายสิทธิ์ของส่วนขยายอย่างละเอียด
• ติดตั้งเครื่องมือตรวจสอบโค้ด เช่น ESLint ซึ่งสามารถช่วยคุณค้นหาปัญหาที่อาจเกิดขึ้นในโค้ดได้
• ติดตามประกาศด้านความปลอดภัยของ VS Code และส่วนขยาย และแก้ไขช่องโหว่ให้ทันเวลา## สรุป

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