16 ส่วนขยายโค้ด VS อันดับต้น ๆ สำหรับนักพัฒนาเว็บ

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

1. Sublime Text Keymap และตัวนำเข้าการตั้งค่า

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

2. ตัวอย่างโค้ด JavaScript (ES6)

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

3. วงเล็บคู่ Colorizer 2

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

4. ESLint

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

5. ผู้จัดการโครงการ

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

6. ดูตัวอย่างเบราว์เซอร์

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

7. สวยขึ้น

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

8. gitlink

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

9. ความคิดเห็นที่ดีขึ้น

การแสดงความคิดเห็นโค้ดของคุณเป็นหนึ่งในนิสัยที่สำคัญที่สุดที่นักพัฒนาซอฟต์แวร์สามารถมีได้ ยิ่งไปกว่านั้น การแสดงความคิดเห็นโค้ดของคุณให้ ดี เป็นทักษะที่ควรได้รับการสอนในห้องเรียนวิทยาการคอมพิวเตอร์ทุกแห่งและการฝึกเขียนโค้ดใน bootcamp ที่กล่าวว่า Better Comments เป็นหนึ่งใน VS Code Extensions ที่ทุกคนต้องการ เพราะถ้าคุณเชื่อในชื่อ คุณจะ แสดงความคิดเห็นได้ดีขึ้น ในโค้ดของคุณ ด้วยปุ่มลัดที่ช่วยให้คุณแยกความแตกต่างระหว่างคำถาม คำอุทาน รหัสแสดงความเห็น ข้อความค้นหา การแจ้งเตือน ไฮไลต์ และสิ่งที่ต้องทำ ส่วนขยายนี้ไม่เพียงแต่ทำให้ชีวิตของคุณง่ายขึ้น แต่ยังทำให้ชีวิตในทีมของคุณง่ายขึ้นด้วย และนักพัฒนาที่ติดตามคุณในโครงการ เราไม่สามารถแนะนำสิ่งนี้ได้เพียงพอ

10. ไอคอนรหัส VS

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

11. แท็กปิดอัตโนมัติ

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

12. ระบายสี

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

13. โพลาโค้ด

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

14. GitLens

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

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

คุณเคยต้องการเปิดเซิร์ฟเวอร์ dev ในพื้นที่จากภายใน IDE ของคุณและทำงานแบบเรียลไทม์หรือไม่? ไม่ว่าคุณจะตอบคำถามนั้นอย่างไร คุณก็อยากให้ Live Server ได้ลองสักครั้ง เพราะนั่นคือสิ่งที่คุณสามารถทำได้อย่างแม่นยำ แม้ว่าอาจไม่ได้ขจัดความต้องการผลิตภัณฑ์อย่าง Local by Flywheel และ MAMP ออกไปโดยสิ้นเชิง แต่ก็ลดความจำเป็นลงได้ในหลายสถานการณ์

16. เสริมสวย

Beautify ใช้ js-beautify ยอดนิยมเพื่อให้ JavaScript ของคุณดูดีและเป็นระเบียบ ไม่ต้องกังวลกับเส้นขาดและการเว้นวรรคและการเยื้องแปลก ๆ เพียงคลิกปุ่ม โค้ดทั้งหมดของคุณจะพร้อมสำหรับระยะใกล้ (อาจใช้ Polacode จากด้านบน)

บทสรุป

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

ส่วนขยาย VS Code ที่คุณใช้งานคืออะไร? แจ้งให้เราทราบในความคิดเห็น!

ภาพเด่นของบทความโดย SVIATLANA SHEINA / shutterstock.com