บทความ IT เจ๋งๆ
Top 10 VSCode Extensions สำหรับ Web Developer
22-ม.ค.-21
คัมภีร์เทพ IT
VSCode หรือ Visual Studio Code เป็น Editor ที่ได้รับความนิยมอย่างมากในการพัฒนา Web ของปี 2020 หนึ่งใน Features ที่ได้รับความนิยมมากที่สุดของ VSCode ก็คือ Extensions ในทุก ๆ เดือน ผู้คนจากทั่วโลกจะสร้าง Open-Source Extensions เพื่อช่วยในการใช้งาน VSCode ให้ดีขึ้น และ Harsh Patel ผู้เขียนบทความนี้จะมาแนะนำ Top 10 VSCode Extensions สำหรับ Web Developer
การติดตั้ง VSCode และ VSCode Extensions
ในการใช้ Extensions ของ VSCode คุณจะต้อง Download มันก่อน ซึ่งคุณสามารถ Download ได้ที่นี่
ในการติดตั้ง Extensions ให้คลิกที่ Icon ของ Extension (ดังที่แสดงด้านล่าง) แล้วพิมพ์ใน Extension เมื่อคุณพบ Extension ที่ต้องการแล้ว ให้คลิก Install เพื่อติดตั้ง Extension ไปยัง VSCode
Better Comments เป็น Extension ที่จะช่วยปรับปรุง Code ของคุณให้ดีขึ้นด้วยการแสดงความคิดเห็นโดยการ Alerts, Information, TODOs, Questions และ อื่น ๆ นี่เป็น Extension ที่โดยรวมแล้วดูยอดเยี่ยมมาก ซึ่งมันจะช่วยทำให้ Code ของคุณอ่านง่ายขึ้นและมีการจัดเรียงลำดับความคิดเห็นที่เข้าใจง่ายมาให้เป็นอย่างดี
2. Error Lens
Error Lens เป็น Extension ที่แสดงข้อผิดพลาดของคุณบนส่วนของ Code ที่คุณกำลังทำงานอยู่ (ดูตัวอย่างด้านบน) Extension นี้จะช่วยคุณได้อย่างมากเมื่อคุณกำลังมองหาจุดบกพร่องเล็ก ๆ ที่ทำให้ Application ของคุณเกิดปัญหาทั้งหมด นอกจากนี้ Extension นี้สามารถปรับแต่งได้หลายอย่าง ซึ่งช่วยให้คุณสามารถเปลี่ยนแปลงสิ่งต่าง ๆ ได้ เช่น สี, แบบตัวอักษร, ขนาดตัวอักษร และอื่น ๆ อีกมากมาย
3. Import Cost
ตามชื่อของมัน Extension นี้จะแสดง Size ของแทบจะทุก Module/Package ที่คุณ Import เข้ามาใช้งาน มันเป็นสิ่งสำคัญมากที่จะทราบว่า คุณกำลังเพิ่มประสิทธิภาพการ Imports และ Dependencies อยู่หรือไม่ เพื่อให้คุณมั่นใจได้ว่า User ของคุณจะได้รับประสบการณ์ที่รวดเร็วและมีประสิทธิภาพมากที่สุด
Extension นี้จะแสดงสีของวงเล็บที่คู่กัน Extension นี้จะช่วยให้คุณประหยัดเวลาในการค้นหาคู่วงเล็บปิดที่ถูกต้อง นี่เป็นสิ่งที่ควรมีหากคุณใช้ภาษา Programming ที่ใช้งานวงเล็บ
5. Material Theme & Material Icon Theme
Extension นี้จะทำให้คุณมี Icon ที่น่าทึ่งสำหรับ Files และ Theme ที่ยอดเยี่ยม สำหรับ Theme ใน Material Theme ที่อยากแนะนำก็คือ คือ Palenight Theme (ซึ่งมี Themes ให้เลือกมากมาย) ซึ่งทั้ง 2 Extensions นี้มักเป็นที่ชื่นชอบเมื่อพูดถึง Design/Themes ใน VSCode
Extension นี้จะช่วยให้คุณพิมพ์บางอย่าง เช่น div.container และแสดง <div class="container"></div> กลับมา Extension นี้จะช่วยให้คุณเขียน HTML ได้อย่างรวดเร็ว เหตุผลหลักที่หลายคนชอบ Extension นี้มากก็คือ มันรองรับ JSX หากคุณเป็น React Developer แน่นอนว่าสิ่งนี้จะช่วยให้คุณทำงานอย่างมี Productive มากขึ้น
7. Live Server
นี่เป็นวิธีที่ง่ายที่สุดในการเปิดใช้งาน Server ในไม่กี่วินาที เพียงแค่คลิกปุ่มเดียว Site ของคุณก็พร้อมใช้งานภายใน Computer ของคุณ ประโยชน์ของการใช้สิ่งนี้ก็คือ แทนที่จะวาง index.html File บน Google ซึ่งคือทุกครั้งที่คุณ Save File ของคุณ คุณจะเห็นการเปลี่ยนแปลงทั้งหมดที่ถูก Implement ในทันที (ไม่จำเป็นต้อง Reload)
8. GitLens
Extension นี้เป็น Extension ที่ดีที่สุดสำหรับ Git และ GitHub มันจะช่วยให้รู้ว่า มีใครบ้างที่มีส่วนร่วมในการทำงานใน Code แต่ละบรรทัด, Navigate และ Explore Git Repositories ได้อย่างราบรื่น รวมทั้ง Features อื่น ๆ อีกมากมาย นี่เป็นสิ่งที่คุณต้องมี หากคุณทำงานกับ Git และ GitHub
Auto Rename Tag Extension ที่ช่วยเปลี่ยน Tag (ทั้งเปิดและปิด) เมื่อมีการเปลี่ยนแปลง Tag (ตัวอย่างด้านบน) การที่หลายคนชอบ Extension นี้ก็เพราะ มันรองรับ JSX ที่สำคัญคือ Extension นี้เป็นสิ่งที่จะช่วยเพิ่มประสิทธิภาพการทำงานของคุณอย่างเห็นได้ชัด
10. Prettier
แน่นอนว่านี่เป็น VSCode Extension สำหรับการพัฒนา Web สำหรับ Prettier แล้ว มันเป็นตัวช่วยอย่างดีในการจัด Format และเพิ่มประสิทธิภาพการทำงาน Prettier จะช่วยจัด Format File ของคุณได้ดีขึ้นในการบันทึกเมื่อคุณ Configure ในการ Setting ค่าของคุณ แทนที่คุณจะใช้เวลาหลายชั่วโมงต่อวันในการทำให้ Code ของคุณ Clean ขึ้นขอแนะนำให้คุณใช้ Prettier ซะ Extension นี้ถือเป็น Extension หนึ่งที่ได้รับความนิยมมากที่สุดโดยมีการ Download ไปใช้งานมากกว่า 10 ล้านครั้ง นี่คือเหตุผลที่ Prettier เป็น VSCode Extension ที่ Developer หลายคนชอบสำหรับการพัฒนา Web
ที่มา: https://medium.com/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด