ตั้งค่า VS Code ด้วยส่วนขยายที่แนะนำ

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

ความมหัศจรรย์ที่แท้จริงของ VS Code ไม่ได้อยู่ที่ตัวแก้ไขพื้นฐานเพียงอย่างเดียว แต่ยังอยู่ที่ระบบนิเวศของมันด้วย ส่วนขยายหลายร้อยรายการเพิ่มฟังก์ชันขั้นสูงมากมาย เช่น การเติมข้อความอัตโนมัติ, ตัวตรวจสอบไวยากรณ์, ธีม, เซิร์ฟเวอร์ภายในเครื่อง, การดีบัก, ไอคอน, การผสานรวมกับ Git, AI และอื่นๆ อีกมากมายในคู่มือนี้ คุณจะพบกับชุดส่วนขยายที่แนะนำอย่างครบถ้วน ตั้งแต่ส่วนขยายที่จำเป็นสำหรับทุกภาษา ไปจนถึงส่วนขยายเฉพาะสำหรับ JavaScript, Python, PHP, HTML/CSS, TypeScript และการใช้งานประจำวันกับ Git, Docker หรือ Markdown

VS Code คืออะไร และส่วนเสริมของมันสำคัญอย่างไร?

Visual Studio Code คือ โปรแกรมแก้ไขโค้ดฟรีและใช้งานได้บนหลายแพลตฟอร์ม สร้างโดย Microsoft มีให้ใช้งานสำหรับ Windows, macOS และ Linux และเป็นหนึ่งใน สภาพแวดล้อมการพัฒนาที่ดีที่สุด.

มันมีฟีเจอร์ที่ทรงพลังมากอยู่แล้วตั้งแต่เริ่มต้นใช้งาน: การเน้นไวยากรณ์, IntelliSense, การดีบักแบบบูรณาการ, เทอร์มินัล, การทำงานร่วมกับ Git และการรองรับภาษาโปรแกรมพื้นฐานหลายภาษาแต่จุดเด่นที่แท้จริงอยู่ที่การเริ่มติดตั้งส่วนเสริมเพื่อปรับสภาพแวดล้อมให้เข้ากับวิธีการทำงานของคุณ

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

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

วิธีการติดตั้งและจัดการส่วนขยายใน VS Code

การติดตั้งส่วนขยายใน VS Code นั้นง่ายมาก ทุกอย่างดำเนินการผ่านอินเทอร์เฟซของโปรแกรมแก้ไขเองโดยไม่ต้องดาวน์โหลดไฟล์ด้วยตนเอง

หากต้องการเพิ่มฟีเจอร์ใหม่ ให้เปิดโปรแกรมแก้ไข แล้วไปที่แผงส่วนขยาย (ไอคอนสี่เหลี่ยมในแถบด้านข้างหรือทางลัด) Ctrl+Shift+X / Cmd+Shift+X ใน macOS) จากนั้น ค้นหาโดยใช้ชื่อหรือคำสำคัญ ส่วนเสริมที่คุณสนใจ

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

เพื่อดำเนินการให้เสร็จสมบูรณ์ เพียงคลิกปุ่มติดตั้ง ส่วนขยายส่วนใหญ่จะเปิดใช้งานทันทีบางวิธีจำเป็นต้องรีโหลดหน้าต่างตัวแก้ไข และบางวิธีต้องการการตั้งค่าเพิ่มเติม (ตัวอย่างเช่น วิธีที่ต้องพึ่งพาเครื่องมือภายนอก เช่น ESLint, PHP Debug ด้วย Xdebug เป็นต้น)

ส่วนเสริมทั่วไปที่จำเป็นสำหรับทุกโครงการ

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

สวย

สวย เป็น ตัวจัดรูปแบบโค้ดมาตรฐานโดยพฤตินัย ในโลกของ JavaScript และภาษาโปรแกรมอื่นๆ อีกมากมาย ระบบจะเขียนโค้ดของคุณใหม่โดยอัตโนมัติตามกฎรูปแบบที่กำหนดไว้อย่างชัดเจน

มันสามารถจัดรูปแบบได้ JavaScript, TypeScript, JSX, TSX, JSON, HTML, CSS, SCSS, Less, YAML, GraphQL, Markdown, Vue, Angular และอื่นๆ อีกมากมาย แนวคิดก็คือ การถกเถียงเรื่องการใช้เครื่องหมายอัญประกาศเดี่ยวหรือคู่ เครื่องหมายอัฒภาคหรือไม่ เครื่องหมายวงเล็บปีกกาอยู่ที่ไหน ฯลฯ จะหายไป เพราะ โครงการทั้งหมดดำเนินไปตามแบบแผนเดียวกัน.

คุณสามารถใช้การตั้งค่าเริ่มต้นหรือสร้างกฎของคุณเองโดยใช้ประเภทไฟล์ได้ .prettierrcโดยปกติแล้วจะต้องเปิดใช้งาน การจัดรูปแบบเมื่อบันทึกเพื่อให้ทุกครั้งที่คุณกด Ctrl+S โค้ดจะสะอาดและสม่ำเสมอ

ESLint

ในขณะที่ Prettier เน้นไปที่ด้านโค้ดเป็นหลัก ESLint ให้ความสำคัญกับคุณภาพและแนวปฏิบัติที่ดีเป็นตัวตรวจสอบไวยากรณ์ที่ใช้กันอย่างแพร่หลายที่สุดในโปรเจ็กต์ JavaScript และ TypeScript ในปัจจุบัน

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

คุณสามารถใช้การกำหนดค่าที่นิยมใช้กันอย่างแพร่หลาย เช่น Airbnb, มาตรฐาน หรือคำแนะนำอย่างเป็นทางการจาก ESLintหรือกำหนดกฎเกณฑ์ของคุณเองเพื่อปรับให้เข้ากับโปรเจ็กต์ นอกจากนี้ยังสามารถใช้งานร่วมกับปลั๊กอินสำหรับเฟรมเวิร์กต่างๆ เช่น React, Vue หรือ Node.js ได้อีกด้วย

ความคิดเห็นที่ดีกว่า

ในโครงการขนาดใหญ่ ข้อความแสดงความคิดเห็นมักจะสับสนวุ่นวายและยากต่อการติดตาม Better Comments ช่วยให้คุณจัดหมวดหมู่ความคิดเห็นด้วยภาพได้ โดยใช้สีตามคำนำหน้าที่คุณใช้

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

ตัวตรวจสอบการสะกดรหัส

แม้ว่ามันอาจดูเหมือนเป็นรายละเอียดเล็กน้อยแต่ การสะกดผิดในชื่อตัวแปร ข้อความแสดงความคิดเห็น หรือข้อความในส่วนติดต่อผู้ใช้ดูไม่ดีนักCode Spell Checker ทำหน้าที่ตรวจสอบการสะกดคำในโค้ด

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

เลนส์ผิดพลาด

VS Code แสดงข้อผิดพลาดและคำเตือนอยู่แล้ว แต่บางครั้งเราอาจมองข้ามไป เลนส์แก้ไขข้อผิดพลาดทำให้ไม่สามารถมองข้ามสิ่งเหล่านี้ได้ แสดงข้อมูลการวินิจฉัยโดยตรงถัดจากบรรทัดที่ได้รับผลกระทบและในส่วนขอบของหน้าบรรณาธิการ

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

โค้ดรันเนอร์

ถ้าคุณชอบที่จะลอง โค้ดส่วนเล็กๆ โดยไม่ต้องประกอบเป็นโปรเจกต์ทั้งหมดCode Runner มีประโยชน์มาก ช่วยให้คุณสามารถรันโค้ดจากหลายภาษา (JavaScript, Python, C, C++, Java, PHP และอื่นๆ) ได้โดยตรงจากตัวแก้ไขโค้ด

คุณสามารถเปิดไฟล์ปัจจุบันหรือเฉพาะส่วนที่เลือกไว้ก็ได้ ดูผลลัพธ์บนแผงควบคุมแบบบูรณาการ หรือในเทอร์มินัลของ VS Code เอง และปรับแต่งคำสั่งที่ใช้สำหรับแต่ละภาษาได้

เส้นทาง Intellisense

เมื่อต้องจัดการกับไฟล์ข้อมูลจำนวนมาก การนำเข้า และเส้นทางสัมพัทธ์ การเขียนสิ่งเหล่านี้ด้วยมือเองนั้นเป็นความผิดพลาดอย่างแน่นอน ระบบ Path Intellisense จะเติมเส้นทางไฟล์และโฟลเดอร์โดยอัตโนมัติ ขณะเขียนสตริงที่มีเส้นทาง

ทำงานบน การนำเข้า JavaScript/TypeScript, การอ้างอิง CSS, เส้นทางไฟล์รูปภาพ HTML และโดยทั่วไปแล้วในทุกบริบทที่ VS Code ตรวจพบว่าคุณกำลังพิมพ์เส้นทาง มันช่วยประหยัดเวลาและหลีกเลี่ยงการพิมพ์ผิดที่น่ารำคาญ

vscode-icons, Material Icon Theme และชุดไอคอนอื่นๆ

ไอคอนไม่ใช่แค่เรื่องของความสวยงามเท่านั้น ชุดไอคอนที่ดีจะช่วยให้คุณระบุประเภทไฟล์ได้ทันที เพียงแค่ดูที่หน้าเบราว์เซอร์

ไอคอน VS Code, ธีมไอคอน Material, ไอคอนสวยๆ สำหรับ VSCode หรือธีมเฉพาะต่างๆ เช่น ไอคอนที่เรียบง่ายกว่าของ VSCode เมื่อใช้งานร่วมกับ Angular พวกเขามีไอคอนแบบกำหนดเองสำหรับภาษา เฟรมเวิร์ก และไฟล์การกำหนดค่า (Angular, Docker, env เป็นต้น)

การเลือกอย่างใดอย่างหนึ่งนั้นขึ้นอยู่กับรสนิยม แต่ วิธีการใดๆ เหล่านั้นล้วนช่วยปรับปรุงความอ่านง่ายของโครงสร้างไฟล์ได้อย่างมากโดยเฉพาะในโครงการที่มีหน่วยเดียวหรือโครงการขนาดใหญ่

GitLens

GitLens น่าจะเป็น ส่วนเสริมที่ทรงพลังที่สุดสำหรับการทำงานกับ Git จาก VS Codeมันยกระดับการควบคุมเวอร์ชันไปอีกขั้นด้วยการผสานรวมประวัติการแก้ไขเข้ากับตัวแก้ไขอย่างสมบูรณ์

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

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

แบ่งปันสด

สำหรับการเขียนโปรแกรมแบบคู่ หรือการให้คำปรึกษาทางไกล Live Share เป็นหนึ่งในฟีเจอร์ที่ดีที่สุดที่มีอยู่ฟังก์ชันนี้ช่วยให้คุณสามารถแชร์เซสชัน VS Code ของคุณกับบุคคลอื่นได้แบบเรียลไทม์

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

ส่วนขยายเฉพาะสำหรับ JavaScript และ TypeScript

ระบบนิเวศของ JavaScript และ TypeScript เป็นหนึ่งในระบบนิเวศที่ VS Code ให้ความสำคัญมากที่สุด หากคุณทำงานด้าน frontend, backend ด้วย Node หรือการพัฒนาแบบ full stack ส่วนเสริมเหล่านี้จะช่วยประหยัดเวลาให้คุณได้หลายชั่วโมง.

ข้อมูลโค้ด JavaScript (ES6)

การเขียนโครงสร้างเดิมซ้ำๆ กันเป็นเรื่องน่าเบื่อ โค้ดตัวอย่าง JavaScript (ES6) เพิ่มโค้ดตัวอย่างมากมายสำหรับไวยากรณ์สมัยใหม่ จาก JS และ TS

คุณสามารถสร้างข้อความโดยใช้ตัวย่อสั้นๆ ได้ ฟังก์ชันลูกศร, คลาส, การนำเข้า, console.log, โครงสร้างลูป และอื่นๆ อีกมากมาย เหมาะอย่างยิ่งสำหรับผู้ที่ต้องการจดจำน้อยลงและพิมพ์ได้เร็วขึ้น

npm Intellisense และส่วนขยาย npm

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

ในขณะเดียวกัน ส่วนขยาย npm อย่างเป็นทางการสำหรับ VS Code ก็ผสานรวมเข้ากับระบบของคุณ ไฟล์ package.json สำหรับแสดงรายการและเรียกใช้สคริปต์ เพียงคลิกเดียว คุณก็สามารถดูความสัมพันธ์ของไฟล์และจัดการงานประจำต่างๆ ได้โดยไม่ต้องเปิดเทอร์มินัล

ค่านำเข้า

ขนาดของไฟล์ที่ส่งไปยังฝั่งผู้ใช้งานนั้นมีความสำคัญมาก ต้นทุนการนำเข้าจะคำนวณขนาดโดยประมาณของการนำเข้าแต่ละครั้ง และแสดงผลถัดจากบรรทัดที่เกี่ยวข้อง

ด้วยวิธีนี้ คุณจะรู้ได้ทันทีว่าคุณกำลังนำไลบรารีขนาดใหญ่เข้ามาใช้สำหรับเรื่องเล็กน้อยหรือไม่ และคุณสามารถประเมินการเปลี่ยนแปลงได้ เช่น ใช้การนำเข้าบางส่วน การโหลดแบบเลซี่ หรือทางเลือกที่เบากว่า.

Quokka.js

Quokka.js ทำหน้าที่เป็น สมุดบันทึกแบบโต้ตอบสำหรับ JavaScript และ TypeScript ภายใน VS Code มันจะรันโค้ดขณะที่คุณเขียน และแสดงผลลัพธ์และค่าตัวแปรในคำอธิบายประกอบแบบอินไลน์

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

โค้ดตัวอย่าง ES7 สำหรับ React/Redux/GraphQL/React-Native และโค้ดตัวอย่าง React แบบง่ายๆ

หากคุณทำงานกับระบบนิเวศของ React ส่วนเสริมสองตัวนี้มีค่ามาก ๆ ES7 React/Redux/GraphQL/React-Native snippets นำเสนอโค้ดตัวอย่างสำหรับคอมโพเนนต์, hooks, Redux, GraphQL และ React Nativeครอบคลุมรูปแบบทั่วไปเกือบทั้งหมด

ในทางกลับกัน Simple React Snippets มุ่งเน้นไปที่... ชุดโค้ดตัวอย่างขนาดเล็กกว่าสำหรับ React รุ่นใหม่ (ส่วนประกอบการทำงาน, การนำเข้าพื้นฐาน ฯลฯ) เหมาะอย่างยิ่งหากคุณต้องการอะไรที่ไม่ซับซ้อนแต่ได้ผลลัพธ์ที่เท่าเทียมกัน

JavaScript และ TypeScript เวอร์ชันกลางคืน

ถ้าคุณชอบติดตามความเคลื่อนไหวทางด้านภาษาอยู่เสมอ JavaScript and TypeScript Nightly ช่วยให้คุณเข้าถึงเวอร์ชันทดลองของเซิร์ฟเวอร์ภาษา TypeScript ได้ ที่ใช้ VS Code

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

ส่วนขยาย Python

VS Code เมื่อติดตั้งส่วนเสริมที่เหมาะสม จะกลายเป็น... IDE สำหรับ Python คุณภาพเยี่ยมหากคุณทำงานด้านการพัฒนาแบ็กเอนด์ วิทยาศาสตร์ข้อมูล หรือระบบอัตโนมัติโดยใช้ภาษาโปรแกรมนี้ สิ่งเหล่านี้แทบจะเป็นสิ่งที่จำเป็นอย่างยิ่ง

Python (ส่วนขยายอย่างเป็นทางการ)

ส่วนขยาย Python อย่างเป็นทางการของ Microsoft คือ หลักการสำคัญในการทำงานกับภาษานี้ใน VS Codeหากไม่มีสิ่งนี้ การสนับสนุนก็จะมีข้อจำกัดอย่างมาก

ให้ IntelliSense, การดีบัก, การทดสอบ, การบูรณาการกับสภาพแวดล้อมเสมือน, การจัดรูปแบบโค้ด (Black, autopep8), การตรวจสอบไวยากรณ์ด้วย Pylint หรือ Flake8 และฟังก์ชันสำคัญอื่นๆ อีกมากมาย

ไพลานซ์

ไพลานซ์คือ เซิร์ฟเวอร์ภาษาขั้นสูงสำหรับ Python ซึ่งช่วยเสริมประสิทธิภาพของส่วนขยายอย่างเป็นทางการให้ดียิ่งขึ้นไปอีก โดยให้การวิเคราะห์แบบคงที่ที่รวดเร็ว การเติมข้อความอัตโนมัติที่ดีขึ้น และการตรวจสอบประเภทที่ละเอียดมากยิ่งขึ้น

หากคุณใช้การระบุประเภทข้อมูล หรือต้องการตรวจจับข้อผิดพลาดก่อนรันโค้ด Pylance ช่วยปรับปรุงประสบการณ์การพัฒนาซอฟต์แวร์ได้อย่างมาก ในโครงการขนาดกลางและขนาดใหญ่

ดาวพฤหัสบดี

ส่วนขยาย Jupyter ผสานรวมเข้าด้วยกัน สร้างไฟล์โน้ตบุ๊ก (.ipynb) โดยตรงใน VS Codeคุณสามารถสร้าง เปิด และเรียกใช้เซลล์ได้เหมือนกับใน Jupyter เวอร์ชันคลาสสิก แต่ทำได้จากตัวแก้ไขโค้ด

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

เครื่องมือสร้าง Docstring สำหรับ Python

โดยทั่วไปแล้ว เอกสารประกอบการทำงานภายในของ Python จะอยู่ในรูปแบบของ docstrings เครื่องมือสร้าง Docstring สำหรับ Python จะสร้างโครงร่างของ docstring โดยอัตโนมัติ สำหรับฟังก์ชัน คลาส และเมธอด

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

PHP และส่วนขยายแบ็กเอนด์

PHP ยังคงเป็นภาษาหลักในระบบแบ็กเอนด์ของเว็บ และ VS Code ก็มี ระบบนิเวศส่วนขยายที่พัฒนาเต็มที่แล้ว สำหรับภาษานี้

PHP IntelliSense และ Intelephense

PHP IntelliSense เป็นหนึ่งในส่วนเสริมช่วยเติมข้อความอัตโนมัติ (autocomplete) ตัวแรกๆ ที่จริงจังสำหรับ PHP โดยมีคุณสมบัติต่างๆ ดังนี้ คำแนะนำสำหรับฟังก์ชัน คลาส เมธอด เนมสเปซ และตัวแปรนอกเหนือจากการนำทางพื้นฐานไปยังคำจำกัดความต่างๆ แล้ว

PHP Intelephense ก้าวไปอีกขั้น: การวิเคราะห์ที่รวดเร็วและลึกซึ้ง การปรับโครงสร้างใหม่ การค้นคว้าข้อมูลอ้างอิง การสนับสนุนที่อัปเดตสำหรับ PHP 7 และ 8 และอื่นๆ อีกมากมาย แม้แต่เวอร์ชันฟรีก็ยังทำงานได้ดีกว่าทางเลือกอื่นๆ ส่วนใหญ่

PHP DocBlocker

เพื่อการจัดทำเอกสารที่ดีในโครงการขนาดใหญ่ PHP DocBlocker สร้างความคิดเห็น DocBlock ครบถ้วนสำหรับฟังก์ชัน เมธอด คลาส และคุณสมบัติ

ในการเขียน / ** ในฟังก์ชัน ระบบจะกรอกพารามิเตอร์และประเภทค่าส่งคืนโดยอัตโนมัติ ซึ่งเป็นการกระตุ้นให้เกิดการใช้งานฟังก์ชันอย่างมีประสิทธิภาพมากขึ้น จัดทำเอกสารเกี่ยวกับ API ทั้งภายในและภายนอกองค์กรอย่างถูกต้อง.

แต่ง

Composer เป็นมาตรฐานสำหรับการจัดการการพึ่งพาใน PHP ส่วนขยายที่เกี่ยวข้องจะผสานรวมเข้ากับ VS Code เพื่อ... เรียกใช้คำสั่งทั่วไป (ติดตั้ง, อัปเดต, เรียกใช้) จากจานสี นอกเหนือจากการมีฟังก์ชันเติมคำอัตโนมัติและการไฮไลต์ใน composer.json.

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

ดีบัก PHP

การใช้ var_dump ในการดีบัก PHP นั้นมีข้อดีอยู่บ้าง PHP Debug เพิ่มตัวดีบักเกอร์แบบเต็มรูปแบบโดยใช้ Xdebug เป็นพื้นฐาน ภายใน VS Code

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

ส่วนเสริมสำหรับ HTML, CSS และการพัฒนาส่วนหน้า (frontend)

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

เซิร์ฟเวอร์สด

Live Server ติดตั้ง เซิร์ฟเวอร์สำหรับการพัฒนาในพื้นที่พร้อมระบบรีโหลดอัตโนมัติการคลิก "Go Live" จะเปิดเว็บไซต์ของคุณในเบราว์เซอร์และรีเฟรชหน้าเว็บทุกครั้งที่คุณบันทึกไฟล์

เหมาะสำหรับ HTML ล้วนๆ การสร้างต้นแบบอย่างรวดเร็ว การจัดวางแบบคงที่ และโปรเจ็กต์ส่วนหน้าเว็บที่เรียบง่ายการเห็นการเปลี่ยนแปลงในทันทีนั้นสร้างความแตกต่างอย่างมาก

การสนับสนุน HTML CSS

ส่วนเสริมนี้ช่วยปรับปรุงการทำงานร่วมกันระหว่าง HTML และ CSS ฟังก์ชันนี้มีระบบเติมคำอัตโนมัติอัจฉริยะสำหรับคลาสและ ID ที่กำหนดไว้ในสไตล์ชีตของคุณ เมื่อคุณเขียน HTML และในทางกลับกัน

นอกจากนี้ยังแนะนำคุณสมบัติ CSS (รวมถึง) คำนำหน้าซัพพลายเออร์และใช้งานได้อย่างยอดเยี่ยมเมื่อใช้ร่วมกับ Emmet ซึ่งช่วยเร่งขั้นตอนการจัดวางเลย์เอาต์ได้อย่างมาก

IntelliSense สำหรับชื่อคลาส CSS และ Tailwind CSS IntelliSense

IntelliSense สำหรับชื่อคลาส CSS จะวิเคราะห์ไฟล์ CSS, SCSS หรือ Less ของคุณเพื่อระบุชื่อคลาส เพิ่มฟังก์ชันเติมชื่อคลาสอัตโนมัติใน HTMLวิธีนี้มีประโยชน์อย่างยิ่งเมื่อมีโปรแกรมหรือคลาสที่มีชื่อยาว

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

CSS Peek และ CSS Lint

CSS Peek ช่วยให้คุณ ดูและไปยังคำจำกัดความ CSS ของคลาสหรือ ID ได้อย่างรวดเร็ว จากโค้ด HTML ไม่ว่าจะในหน้าต่างป๊อปอัพหรือโดยการเปิดไฟล์ที่เกี่ยวข้อง

CSS Lint ทำหน้าที่เป็นตัวตรวจสอบความถูกต้องของไฟล์สไตล์ชีต (linter) ข้อผิดพลาดในการทำเครื่องหมายหรือรูปแบบที่มีปัญหา (คุณสมบัติที่ซ้ำซ้อน กฎที่ไม่มีประสิทธิภาพ ฯลฯ) ช่วยให้ CSS มีความสะอาดและดูแลรักษาง่ายขึ้น

เปลี่ยนชื่อแท็กอัตโนมัติและไฮไลต์แท็กที่ตรงกัน

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

ไฮไลต์แท็กที่ตรงกัน คู่เปิด/ปิดของแท็กที่เคอร์เซอร์อยู่วิธีนี้มีประโยชน์มากในเอกสารขนาดใหญ่หรือเอกสารที่มีโครงสร้างซ้อนกันหลายชั้น

การแสดงตัวอย่างภาพ, การปรับแต่งภาพ และการเน้นสี

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

โปรแกรมปรับแต่งภาพช่วยให้ บีบอัดภาพ (แบบสูญเสียคุณภาพหรือไม่สูญเสียคุณภาพ) จากภายในโปรแกรมแก้ไขภาพโดยตรงทำให้สินทรัพย์ของคุณพร้อมสำหรับการผลิตโดยไม่ต้องผ่านเครื่องมือภายนอก

การเน้นสีจะช่วยเน้นให้เห็นถึงสิ่งต่างๆ รหัสสี (เลขฐานสิบหก, RGB, HSL ฯลฯ) พร้อมสีจริงเป็นพื้นหลังหรือเส้นขีดใต้ทำให้การทำงานกับชุดสีที่ซับซ้อนง่ายขึ้นมาก

ส่วนเสริมเพิ่มประสิทธิภาพการทำงาน การออกแบบ และการปรับแต่งเพิ่มเติม

นอกเหนือจากเครื่องมือพัฒนาซอฟต์แวร์โดยเฉพาะแล้ว ยังมีส่วนเสริมอีกมากมายที่ออกแบบมาเพื่อ... เพื่อทำให้ชีวิตประจำวันของคุณสะดวกสบายยิ่งขึ้น และทำให้โปรแกรมแก้ไขข้อความของคุณดูสวยงามยิ่งขึ้น.

ธีมสำหรับ VS Code

ธีมต่างๆ มีผลโดยตรงต่อความสบายตาของคุณ ธีมยอดนิยมและแนะนำบางส่วน ได้แก่: เฉดสีม่วง, ธีมวัสดุ, นกฮูกกลางคืน, ขอบฟ้า, น็อคติส หรือ โมโนไคแห่งดินแดนราบ.

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

นกยูง

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

มันเป็นส่วนเสริมที่เรียบง่ายแต่มีประโยชน์อย่างเหลือเชื่อ ถ้าหาก โดยปกติคุณจะมีพื้นที่ทำงานหลายแห่งเปิดอยู่พร้อมกัน.

อินเดนท์เรนโบว์และวงเล็บเรนโบว์

สีรุ้งที่เว้าเข้าไป คอลัมน์เยื้อง ด้วยโทนสีที่แตกต่างกัน ช่วยให้มองเห็นโครงสร้างของโค้ดได้อย่างง่ายดาย

Rainbow Brackets ก็ทำสิ่งที่คล้ายกันนี้เช่นกัน วงเล็บ, วงเล็บเหลี่ยม และวงเล็บปีกกาการกำหนดสีที่แตกต่างกันให้กับแต่ละระดับการซ้อนกัน ด้วยวิธีนี้ การค้นหาวงเล็บที่หายไปหรือบล็อกที่เว้นวรรคไม่ถูกต้องจึงง่ายขึ้นมาก

แผนผังสิ่งที่ต้องทำ

หากคุณใช้คำแสดงความคิดเห็นเช่น TODO, FIXME หรือ BUG Todo Tree จะสแกนพื้นที่ทำงานของคุณและสร้างแดชบอร์ดที่มีคำอธิบายประกอบทั้งหมดเหล่านี้ จัดเรียงเป็นรูปทรงต้นไม้

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

GitHub Copilot, Tabnine และ ChatGPT/AI

เครื่องมือเติมคำอัตโนมัติที่ใช้ AI ได้เข้ามามีบทบาทอย่างมากแล้ว GitHub Copilot และ Tabnine จะแนะนำบรรทัดหรือบล็อกโค้ดทั้งหมด โดยพิจารณาจากบริบท การทดสอบก่อนหน้านี้ หรือความคิดเห็น

ส่วนเสริมที่ผสานรวม ChatGPT หรือโมเดลที่คล้ายกันใน VS Code ช่วยให้ ขอคำอธิบายโค้ด ปรับปรุงฟังก์ชัน หรือสร้างการทดสอบ โดยไม่ต้องออกจากโปรแกรมแก้ไข เครื่องมือเหล่านี้ต้องการคีย์ API แต่ในฐานะตัวช่วยในการพัฒนา พวกมันมีประสิทธิภาพมากหากใช้งานอย่างรอบคอบ

Markdown All in One และการแสดงตัวอย่าง Markdown ที่ได้รับการปรับปรุง

หากคุณจัดทำเอกสารโครงการหรือเขียนบทความทางเทคนิค Markdown All in One เพิ่มทางลัด การแสดงตัวอย่างที่ดีขึ้น การสร้างดัชนี และฟังก์ชันอำนวยความสะดวกอื่นๆ เพื่อทำงานกับ Markdown

เมื่อรวมกับส่วนขยายแสดงตัวอย่างแบบ GitHub คุณจะได้... ประสบการณ์การเขียนที่ใกล้เคียงกับรูปแบบไฟล์ README หรือบทความของคุณในอนาคต บนเว็บ

Docker, SSH ระยะไกล และ WSL ระยะไกล

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

Remote SSH และ Remote WSL ช่วยให้คุณสามารถ เปิดโฟลเดอร์ระยะไกลหรือสภาพแวดล้อม Linux (WSL) ราวกับว่าเป็นโปรเจ็กต์ในเครื่องของคุณเองสามารถเรียกใช้คำสั่งและแก้ไขข้อผิดพลาดได้ทันที แต่ด้วยความสะดวกสบายของอินเทอร์เฟซ VS Code

เมื่อเลือกและตั้งค่าส่วนเสริมเหล่านี้อย่างเหมาะสมแล้ว Visual Studio Code จะเปลี่ยนจากโปรแกรมแก้ไขข้อความขนาดเล็กที่เรียบง่ายไปเป็นโปรแกรมแก้ไขข้อความขนาดใหญ่ขึ้น สภาพแวดล้อมการพัฒนาแบบกำหนดเอง ที่ออกแบบมาให้เหมาะกับเทคโนโลยี วิธีการทำงาน และโครงการของคุณการหาจุดสมดุลระหว่างการไม่ใช้งานเครื่องมือมากเกินไปและการมีเครื่องมือที่จำเป็นอย่างเพียงพอ คือกุญแจสำคัญในการเพิ่มความเร็ว ความสะดวกสบาย และคุณภาพในการเขียนโปรแกรมในแต่ละวันของคุณ