บทความ IT เจ๋งๆ

Visual Studio Code ได้รับความนิยมอย่างรวดเร็วในหมู่ Developer โดยได้อันดับสูงสุดในแง่ Development Environment โดยรวมจาก Developer Survey ปี 2019 ของ Stack Overflow หนึ่งในสาเหตุที่ได้รับของความนิยมคือเรื่อง Customizability และนี่ก็คือ 15 VSCode Extensions ที่ Web Developer ควรนำไปใช้งานในปี 2021 ซึ่งจะช่วยในเรื่อง Productivity ของคุณ

1. Git Lens

เมื่อคุณทำงานร่วมกับเพื่อนร่วมทีมใน Project การใช้ Extension นี้จะช่วยให้คุณได้ทราบว่า ใครเป็นคน Commit หรือเปลี่ยนแปลง Code และทำเมื่อไหร่ในทุกบรรทัดของ Code ได้อย่างรวดเร็ว

บางครั้งเพื่อนร่วมทีมของคุณอาจ Commit Code ที่อาจไปกระทบกับ Features อื่น ๆ ของ Project 
คุณสามารถดูรายละเอียดเพิ่มเติมได้ที่นี่

ที่มา: Visual Studio Marketplace

2. Wallaby.js

Wallaby.js เป็น Test Runner อัจฉริยะ สำหรับ JavaScript ที่ใช้ในการ Run Test ของคุณได้อย่างต่อเนื่อง มันจะรายงานภสพรวมของ Code และผลลัพธ์อื่น ๆ โดยตรงไปยัง Code Editor ของคุณทันทีที่คุณเปลี่ยนแปลง/แก้ไข Code ของคุณ (แม้จะยังไม่มีการ Save File ก็ตาม)

Extension นี้ จะช่วยปรับปรุงประสิทธิผลในการ Develop ของคุณ  

คุณสามารถดูรายละเอียดเพิ่มเติมได้ที่นี่

 

ที่มา: Visual Studio Marketplace

3. TypeScript Hero

TypeScript ขึ้นชื่อว่าเป็น Superset ของ JavaScript ที่มี Optional Typing และ Compile Code ที่เขียนด้วย TypeScript ให้เป็น JavaScript อีกที Extension นี้มีประโยชน์มาก เพราะมันจะช่วย Sort และ Organize สิ่งที่คุณ Import มาใช้งานและแก้ไข Errors ของ Code ด้วย Feature ที่เรียกว่า "Light bulb"

คุณสามารถดูรายละเอียดเพิ่มเติมได้ที่นี่

ที่มา: Visual Studio Marketplace

4. Prettier Code Formatter

Prettier เป็นตัวช่วยในการจัด Format Code ซึ่งทำให้ชีวิตของ Developer ง่ายขึ้นเมื่อพวกเขาต้องจัด Format ของ Code คุณสามารถ Configure ค่าให้เป็น “Format on Save” คือจัด Format ทักครั้งเมื่อมีการ Save

เมื่อคุณมี Extension นี้แล้ว คุณจะไม่ต้องกังวลกับการจัด Format ของ Code เพราะมันจะทำให้คุณเองอัตโนมัติ 

คุณสามารถดูรายละเอียดเพิ่มเติมได้ที่นี่

 

ที่มา: Visual Studio Marketplace

5. Path Intellisense

หากคุณทำงานกับ JavaScript Libraries อย่าง React หรือ Angular และคุณกำลังทำงานกับ Project ขนาดใหญ่ คุณจะรู้ว่าการค้นหา Path ที่แน่นอนของ Component นั้น เป็นเรื่องที่ไม่น่าสนุกเท่าไรนักเมื่อคุณต้องทำการ Import โดย Extension นี้จะช่วยคุณในการทำ Auto-Complete Path ในการ Import ของคุณ

นอกจากนี้มันยังช่วยคุณในการทำ Auto-Complete ของ File References ใน HTML File ของคุณ

คุณสามารถดูรายละเอียดเพิ่มเติมได้ที่นี่

ที่มา: Visual Studio Marketplace

6. Debugger for Chrome

เราทุกคนรู้ดีว่าบางครั้งการ Debug เป็นเรื่องน่ารำคาญใจแค่ไหน ดังนั้น Extension นี้จึงถูกใช้เพื่อช่วยคุณในการ Debug JavaScript Code ของคุณ มันถูกพัฒนาโดย Microsoft เราสามารถ Set ค่าของ Breakpoint, Step ในการ Debug Code, Debug Scripts ที่เพิ่มเข้ามา รวมทั้งอื่น ๆ

สมมติว่า เรามี Function ที่เราไม่แน่ใจว่ามันกำลัง Execute อยู่หรือไม่ Extension นี้สามารถช่วยได้โดยการหยุดตัว Debugger ไว้ชั่วคราวเมื่อมีการ Execute

คุณสามารถดูรายละเอียดเพิ่มเติมได้ที่นี่

ที่มา: Visual Studio Marketplace

7. Bracket Pair Colorizer

Extension นี้จะช่วยให้คุณสามารถจับคู่ของวงเล็บได้ด้วยการใช้สี เมื่อคุณอยู่ใน Session ของการ Debug และทำงานกับ Codebase ขนาดใหญ่ Extension ถือเป็นตัวช่วยอย่างดีของคุณ อีกทั้ง User ก็สามารถกำหนดตัว Characters ที่จะใช้ในการจับคู่และสีที่ต้องการจะใช้ 

คุณสามารถดูรายละเอียดเพิ่มเติมได้ที่นี่

ที่มา: Visual Studio Marketplace

8. JavaScript (ES6) Code Snippets

หากคุณเป็น JavaScript Developer สิ่งนี้สามารถช่วยคุณประหยัดเวลาในการทำงานได้มาก เมื่อคุณต้องการสร้าง Project ใหม่อย่างรวดเร็วสิ่งนี้สามารถช่วยได้ แทนที่คุณจะพิมพ์ Code ทั้งหมด แต่จะมี Predefined Snippets จำนวนมากสำหรับ JavaScript Functions ที่มักใช้งานกันบ่อย ๆ

สิ่งนี้มีการรองรับ TypeScript, React, Vue และ HTML นอกจากนี้ยังมี Extension ที่คล้ายคลึงกันหากคุณต้องทำงานกับ React (ES7 React / Redux / GraphQL / React-Native snippets)

นี่คือ Link สำหรับ Extensions ทั้งสอง: JS snippets, React Snippets

ที่มา: Visual Studio Marketplace

9. Live Share

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

คุณยังสามารถ Share Terminal Instances, Localhost Web Apps, Voice Calls และอื่น ๆ อีกมากมาย โดยผู้สร้าง Extension นี้ขึ้นมาก็คือ Microsoft 

คุณสามารถดูรายละเอียดเพิ่มเติมได้ที่นี่

ที่มา: Visual Studio Marketplace

10. ESLint

เนื่องจาก JavaScript เป็นภาษาที่มีความยืดหยุ่นสูง ดังนั้น ความผิดพลาดบางอย่างเพียงเล็กน้อย ก็อาจทำให้เกิดปัญหาใหญ่ได้ ดังนั้นในขณะที่ทำงานบน Codebase ขนาดใหญ่ เราจำเป็นต้องมี Linter และ Formatter ซึ่ง Extension นี้จะเข้ามาช่วยคุณในการทำสิ่งนี้ได้ โดยมันสามารถจัด Format Code ของคุณให้โดยอัตโนมัติ และสามารถค้นหา Bugs ใน Code ของคุณได้เช่นกัน

การใช้ ESLint Rules จะทำให้คุณเข้าใกล้ในการ Set Standard ที่ดีสำหรับ Codebase ของคุณมากขึ้นไปอีกขั้น

คุณสามารถดูรายละเอียดเพิ่มเติมได้ที่นี่

 

ที่มา: Visual Studio Marketplace

11. Paste JSON as Code

ในฐานะของ Developer คุณมักจะต้องจัดการกับ APIs อย่างที่เราทราบกันดีว่า Data Structure ส่วนใหญ่ที่ใช้ใน APIs ก็คือ JSON ดังนั้นเพื่อที่จะหลีกเลี่ยง TypeErrors บางอย่างที่อาจทำให้ Application ของเรามีปัญหา เราจึงใช้ Classes หรือ Interfaces อีกทั้ง Extension นี้สามารถสร้าง Class ด้วย JSON Data ได้อีกด้วย

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

คุณสามารถดูรายละเอียดเพิ่มเติมได้ที่นี่

 

ที่มา: Visual Studio Marketplace

12. Peacock

เมื่อคุณต้องทำงานในหลาย ๆ Workspaces เจ้า Extension นี้จะช่วยให้คุณระบุได้ว่า Workspaces ใดที่คุณเปลี่ยนไปใช้หรือทำงานอยู่

คุณสามารถดูรายละเอียดเพิ่มเติมได้ที่นี่

ที่มา: Visual Studio Marketplace

13. Better Comments

Extension นี้จะช่วยให้คุณสร้าง Comments ที่คนอ่านเข้าใจมากขึ้นภายใน Code ของคุณ คุณสามารถใช้สีต่าง ๆ กับ Comments ประเภทต่าง ๆ ซึ่งอาจเป็น TODOs, Highlights, Alerts และ Comment ประเภทอื่น ๆ 

ขอแนะนำให้เขียน Clean Code และ Code ที่คนอ่านแล้วเข้าใจได้ง่าย

คุณสามารถดูรายละเอียดเพิ่มเติมได้ที่นี่

ที่มา: Visual Studio Marketplace

14. Search node_modules

ขณะที่เรากำลังสร้าง Component Libraries และกำลังใช้ Component ใน Applications ต่าง ๆ นั้น แน่นอนว่าเราได้ทำการเปลี่ยนแปลงบางอย่างใน Node Modules อย่างแน่นอน และ Extension นี้จะช่วยให้คุณสามารถ Navigate File ภายใน Node Modules Directory ของ Project ของคุณได้อย่างรวดเร็ว

คุณสามารถดูรายละเอียดเพิ่มเติมได้ที่นี่

ที่มา: Visual Studio Marketplace

15. Rest Client

ในฐานะของ Developer โดยทั่วไปมักจะใช้ Postman อยู่เป็นประจำเพื่อตรวจสอบ Response จาก API โดย Extension นี้จะช่วยให้คุณสร้าง HTTP Request และดู Response ใน VSCode ได้โดยตรง แทนที่จะดูสลับไป-มาระหว่าง 2 Applications ซึ่ง Extension นี้จะช่วยทำหน้าที่เหล่านั้นให้คุณ

คุณสามารถดูรายละเอียดเพิ่มเติมได้ที่นี่

ที่มา: Visual Studio Marketplace

ที่มา:  https://levelup.gitconnected.com/

 

 

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

 

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

 

บทความล่าสุด

• 5 IDEs มีประสิทธิภาพสูง ที่ไม่ค่อยถูกพูดถึงมากนัก
• 20 Python Packages ที่คุณควรลองใช้งานดู
• IT & Digital Events in February 2021