COOL IT IDEAS AND STUFF

See the original english version Click here!

 

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

1. Bracket Pair Colorizer

Bracket Pair Colorizer by CoenraadS

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

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

คุณสามารถ Download Extension นี้ผ่าน VSCode ของคุณเอง คุณจะพบกับ Built-in Marketplace บน Panel ที่อยู่ด้านซ้าย

2. Bookmarks

Bookmarks by Alessandro Fragnani

นี่เป็นหนึ่งใน Extension ที่หลายคนชื่นชอบ มันช่วยให้คุณสามารถ Track Code ที่ต้องการย้อนกลับไปดู หรือแม้แต่ Code ที่คุณเขียน (เมื่อทำงานเป็นทีม)

ทั้งหมดที่ทำก็คือ Bookmark Code บางส่วนที่ต้องการเท่านั้น แต่มันยิ่งมีความหมายมากขึ้น เมื่อคุณทำงานกับ Code หลายหมื่นบรรทัดใน File

3. Path Intellisense

Path Intellisense by Christian Kohler

คุณอาจกำลังทำงานอยู่ใน Project ที่มี File ต่าง ๆ อยู่หลายร้อย Files พร้อมกับ Code นับหมื่น ๆ บรรทัด

และการพยายามจดจำว่า อะไรอยู่ที่ไหน มันเป็นเรื่องที่ทำได้ยากและไม่จำเป็นต้องทำเลย (หากใครที่ทำได้ คุณถือเป็นคนที่น่าทึ่งมาก)

การ Import Dependency Files คุณจำเป็นต้องใส่ Path ด้วย ซึ่ง Path Intellisense จะทำการกรอกข้อมูลนั้นให้คุณโดยอัตโนมัติ

4. Todo Tree

TODO Tree by Gruntfuggly

Todo Tree จะถูกแสดงควบคู่ไปกับ Navigation ที่อยู่ทางด้านซ้ายมือ ดังนั้น คุณจึงสามารถเดาได้อย่างง่ายดายว่า มันเป็น TODO List นั่นเอง

แม้มันอาจไม่ได้เจ๋งเท่ากับ Pair Colorizer หรือ Path Intellisense แต่ถ้าคุณต้องการเห็นหัวข้อใหญ่ ๆ ก่อนจะดูรายละเอียดย่อย Extension นี้ก็ถือว่ามีประโยชน์ต่อการทำงานเช่นกัน

5. JS (ES6) Code Snippets

JS(ES6) Code Snippet by Charalampos Karypidis

ไม่ว่าจะเป็น ES6, ES7, PHP หรือภาษา Programming ใดก็ตาม Snippet Extensions ที่มีประโยชน์เหล่านี้ จะต้องอยู่ใน List ของ Tools ที่คุณต้องใช้อย่างแน่นอนหากคุณต้องการทำงานอย่างมีประสิทธิภาพมากที่สุด

เพียงแค่ใช้อักขระ 2-3 ตัว คุณก็สามารถเขียน Code ทั้ง Block ได้แล้ว เราทุกคนรู้ดีว่า ไม่ว่าจะภาษา Programming ใดก็ตาม จะมี Expressions หรือบรรทัดบางบรรทัดที่เรามักจะพิมพ์ซ้ำ ๆ Extension นี้จะช่วยให้คุณทำงานให้คุณโดยอัตโนมัติ ดังนั้น คุณจึงสามารถ Focus ไปยัง Code ส่วนที่สำคัญได้

6. Git Lens

GITLens by Eric Amodio

ตามคำจำกัดความของ GitLens มันจะช่วยเพิ่มความสามารถของ GIT ภายใน VSCode มันจะช่วยให้เห็นว่าใครเขียน Code หรือ Commit Code ได้อย่างรวดเร็วผ่าน GIT Blame Annotation

บางครั้งอาจมีคนในทีมของคุณ กล่าวโทษคุณหลังจาก Features บางอย่างเกิดปัญหา แต่หากคุณไม่ได้เป็นคนทำ คุณก็สามารถปกป้องตัวเองได้ด้วยการส่งภาพ Screenshot ของ Code Block ที่เป็นสาเหตุของความโกลาหลทั้งหมด พร้อมกับ Developer คนที่ทำให้ Code เหล่านั้นเกิดปัญหา

7. NPM Intellisense

NPM Intellisense by Christian Kohler

หากคุณกำลังใช้ NPM โดยเฉพาะอย่างยิ่งเมื่อต้องทำงานกับ ReactJS และ NodeJS ด้วยแล้ว NPM Intellisense ถือเป็น Extension ที่ช่วยคุณได้อย่างมาก

เมื่อมีการ Import Package นั่นหมายความว่า คุณต้องรู้ Path ของมัน และ Extension นี้จะช่วยแนะนำ Path Code ให้คุณโดยอัตโนมัติ สิ่งที่คุณต้องทำก็แค่เพียงกดปุ่ม Enter แล้ว NPM IntelliSense จะช่วยทำงานแทนคุณ

8. VS Code Icons

VSCode Icons by VSCode Icons Team

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

ไม่น่าเชื่อว่า แม้แต่การเปลี่ยนแปลงเล็ก ๆ น้อย ๆ อย่าง การเพิ่ม Icon ลงใน File ในขณะที่ดู File Structure จะทำให้คุณมี Idea เกี่ยวกับภาษาและ Tools ใน Projects ได้โดยอัตโนมัติ

หากคุณได้เห็น JS Icons เป็นจำนวนมาก แน่นอนว่าคุณจะต้องจัดการกับ JavaScript เป็นจำนวนมาก ในขณะเดียวกัน หากคุณเห็น TS Icon เป็นจำนวนมาก แน่นอนว่าคุณก็ต้องเตรียมตัวสำหรับ TypeScript ให้ดี ๆ เช่นกัน

9. Prettier

Prettier — Code Formatter

Prettier เป็น Code Formatter ที่ได้รับความนิยมมากตัวหนึ่ง มันจะสร้าง Styles ที่สอดคล้องกัน โดยแยกวิเคราะห์ Code ของคุณให้อยู่ใน Format ที่เหมาะสม (โดยค่า Default) ด้วยการลบและเพิ่ม White Spaces เพื่อให้ Code ของคุณเหมาะสมและอ่านง่าย

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

10. Better Comments

Better Comments by Aaron Bond

Developers อาจมีการหลงลืมสิ่งต่าง ๆ ได้ อาจมี Code จำนวนมากเกินกว่าจะจัดการได้ แต่ในความเป็นจริงแล้ว มันยากที่จะจดจำทุกอย่างได้ โดยเฉพาะอย่างยิ่งเมื่อต้องจัดการกับ Project ขนาดใหญ่ที่ต้องอาศัยการทำงานร่วมกันจากหลาย ๆ ทีม

ดังนั้น //Comments จึงมีความสำคัญมาก สิ่งนี้ไม่เพียงจะช่วยเตือนคุณถึงข้อมูลสำคัญ ๆ อย่าง การเขียนอธิบายถึงสิ่งที่ Function นั้นทำ แต่ยังมีประโยชน์ในการเพิ่มบริบทเกี่ยวกับบาง Code Block ที่คุณอาจต้องการบอก Developers คนอื่น ๆ หากคุณต้องดูแลหลาย Projects จงเชื่อเถอะว่า Better Comments จะช่วยชีวิตคุณได้อย่างแน่นอน

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

ที่มา:  https://betterprogramming.pub/

 

 

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

 

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

 

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

• IT & Digital Events in December 2021
• 6 TypeScript Features ที่ช่วยคุณในการเขียน Clean Code
• 6 Productivity Tools ที่ Developer “ต้องมี” ติดเครื่องไว้