8 ส่วนขยายของรหัส Visual Studio ที่ทรงพลังสำหรับนักพัฒนาส่วนหน้า

แม้ว่า Microsoft จะเปิดตัว Visual Studio Code รุ่นแรกที่มีความเสถียรตัวแก้ไขรหัสที่ทรงพลังของมันเมื่อไม่กี่เดือนที่ผ่านมาในเดือนมีนาคม 2559 นั้นมีส่วนขยายมากมายที่สามารถใช้ประสบการณ์การเขียนโค้ดในระดับต่อไป นามสกุลรหัส Visual Studio อย่างเป็นทางการ ถูกโฮสต์ใน Visual Studio Code Marketplace ซึ่งหลายแห่งสามารถช่วยเหลือผู้พัฒนาเว็บได้เป็นอย่างดี.

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

วิธีการติดตั้งส่วนขยายของรหัส VS

การติดตั้งส่วนขยายนั้นค่อนข้างตรงไปตรงมาใน Visual Studio Code เท่าที่จะทำได้ ทำมันภายในโปรแกรมแก้ไขรหัส. ใน VS Code Marketplace ทุกส่วนขยายมีหน้าของตัวเองและคุณสามารถค้นหาคำสั่งที่คุณสามารถติดตั้งส่วนขยายที่กำหนดด้วยด้านบนของหน้านี้.

คำสั่งเริ่มต้นด้วยเสมอ การติดตั้งต่อ วาระ หากต้องการติดตั้งส่วนขยายเพียง กด CTRL + P ภายในรหัส VS เพื่อเริ่มแผงด่วนเปิด, คัดลอกวางคำสั่งนี้ ลงไปและในที่สุด รีสตาร์ทเครื่องมือแก้ไขรหัส เพื่อให้ส่วนขยายใหม่ทำงานได้.

8 ส่วนขยายของรหัส Visual Studio ที่มีประสิทธิภาพ

1. ตัวอย่าง HTML

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

   

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

   

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

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

2. HTML CSS Class Completion

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

   ส่วนขยายอัจฉริยะนี้ให้การแก้ไขปัญหานี้ ดึงชื่อของคลาส CSS ทั้งหมด ในพื้นที่ทำงานปัจจุบันและแสดงรายการเกี่ยวกับพวกเขา.

   

   สมมติว่าคุณต้องการสร้างไซต์โดยใช้ Zurb Foundation และคุณต้องการใช้กริดเล็ก ๆ คุณจำไม่ได้ว่ามีการตั้งชื่อชั้นเรียนอย่างไร แต่คุณรู้ว่ามีความหมายชื่อ.

   ด้วย HTML CSS Class Completion คุณเพียงแค่ต้องเริ่มพิมพ์คำ เล็ก, และตัวเลือกที่มีอยู่จะปรากฏบนหน้าจอของคุณในครั้งเดียวดังนั้นคุณสามารถเลือกตัวเลือกที่คุณต้องการได้อย่างง่ายดาย.

   

3. ดูในเบราว์เซอร์

   ดูในเบราว์เซอร์เป็นส่วนขยายที่เรียบง่าย แต่ทรงพลังสำหรับ Visual Studio Code มันสามารถอำนวยความสะดวกในการพัฒนา front-end โดยช่วยให้คุณ ดูผลงานของคุณในเบราว์เซอร์อย่างรวดเร็วขณะเขียนโค้ด. คุณสามารถเปิดไฟล์ HTML ในเบราว์เซอร์เริ่มต้นของคุณโดยตรงจากรหัส VS โดยกดปุ่ม CTRL + F1 แป้นพิมพ์ลัด.

   โปรดทราบว่าดูในเบราว์เซอร์ รองรับ HTML เท่านั้น, ดังนั้นหากคุณต้องการดูเว็บไซต์ของคุณคุณจะต้องเปิดไฟล์ HTML คุณ ไม่สามารถเข้าถึงเบราว์เซอร์โดยตรงจากไฟล์ CSS หรือ JavaScript.

   

4. ดีบักเกอร์สำหรับ Chrome

   ดีบักเกอร์สำหรับ Chrome สร้างโดย Microsoft เองและปัจจุบันเป็นส่วนขยายของรหัส Visual Studio ที่ดาวน์โหลดบ่อยครั้งที่ 4.

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

   

   ส่วนขยายมีคุณสมบัติที่ดีสำหรับการดีบักเกอร์เช่น การตั้งค่าเบรกพอยต์, การดูตัวแปร, การก้าว, debug console ที่มีประโยชน์, และอื่น ๆ อีกมากมาย (ดูรายการคุณสมบัติของรุ่นแรก).

   ในการใช้ส่วนขยายนี้คุณจะต้องเริ่ม Chrome ด้วย เปิดใช้งานการดีบักระยะไกล, และตั้งค่าที่เหมาะสม launch.json ไฟล์. หลังนี้อาจใช้เวลาสักครู่ แต่คุณสามารถค้นหาคำแนะนำโดยละเอียดเกี่ยวกับ GitHub เกี่ยวกับวิธีการทำอย่างถูกต้อง.

5. JSHint

   ส่วนขยาย JSHint ของ Visual Studio Code รวมส่วนต่อท้าย JSHint JavaScript ที่นิยมเข้ากับตัวแก้ไขโค้ดเพื่อให้คุณสามารถ รับทราบเกี่ยวกับข้อผิดพลาดของคุณทันทีที่คุณส่งมอบ. โดยค่าเริ่มต้นส่วนขยาย JSHint ใช้ตัวเลือกเริ่มต้นของ linter ที่คุณสามารถปรับแต่งด้วยความช่วยเหลือของไฟล์การกำหนดค่า.

   

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

   

6. ตัวอย่างโค้ด jQuery

   jQuery Code Snippets สามารถเร่งการพัฒนา front-end ใน Visual Studio Code ได้อย่างมากเนื่องจากช่วยให้คุณเขียน jQuery ได้อย่างรวดเร็วโดยไม่มีข้อผิดพลาดทางไวยากรณ์พื้นฐาน. ตัวอย่างโค้ด jQuery ปัจจุบันมีประมาณ มีตัวอย่าง 130 รายการ คุณสามารถเรียกใช้โดยการพิมพ์ทริกเกอร์ที่ถูกต้อง.

   

   ตัวอย่าง jQuery ทั้งหมด แต่เริ่มต้นด้วย JQ อุปสรรค ข้อยกเว้นหนึ่งคือ func เรียกว่า แทรกฟังก์ชั่นที่ไม่ระบุชื่อเข้าไปในตัวแก้ไข.

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

   

7. ซุ้มไม้ในสวน

   ส่วนขยายของ Bower VS Code สามารถทำให้ขั้นตอนการพัฒนาเว็บไซต์ของคุณง่ายขึ้นโดยการรวมตัวจัดการแพคเกจ Bower เข้ากับ Visual Studio Code.

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

   

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

   คุณสามารถ เข้าถึงคำสั่งที่เกี่ยวข้องกับ Bower ด้วยการเริ่ม Command Palette โดยกด F1, การพิมพ์ “ซุ้มไม้ในสวน” ในแถบป้อนข้อมูลให้คลิกที่ “ซุ้มไม้ในสวน” ตัวเลือกในรายการแบบเลื่อนลงที่ปรากฏขึ้นและเลือกคำสั่ง Bower ที่เหมาะสม.

   

8. ประวัติ Git

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

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

   

   คุณสามารถเข้าถึงคำสั่งที่เกี่ยวข้องกับประวัติ Git หากคุณพิมพ์คำนั้น “Git” เข้าไปใน Command Palette (F1) เลือก “Git” ในรายการแบบหล่นลงและสุดท้ายเลือกคำสั่งที่คุณต้องการ สังเกตได้ว่า คุณต้องเปิดไฟล์ ซึ่งคุณต้องการดูประวัติก่อนที่คุณจะสามารถดำเนินการใด ๆ กับมันได้.