8 VS Code Extensions to help you write better code

03-Jul-20

คัมภีร์เทพ IT

See the original english version Click here!

 

Visual Studio Code หรือ VS Code ถือเป็น Code Editor ที่ถูกใช้งานมากที่สุดจาก Developers จากทั่วโลกกว่า 35.9% โดยในทุก ๆ เดือน Open-Source Community จะทำการเพิ่ม Extensions เข้าไปใน Marketplace และนี่ก็เป็น 8 VS Code Extensions ที่จะช่วยให้คุณเขียน Code ได้ดีขึ้น

1. Bracket Pair Colorizer

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

นี่คือ Extension ที่จะช่วยคุณแก้ปัญหาในเรื่องนี้ โดย User สามารถกำหนด Characters ที่จะ Match และสีที่ต้องการจะใช้ สำหรับ Extension สุดเจ๋งตัวนี้ ได้ถูก Download ไปใช้งานแล้วกว่า 2.2 ล้านครั้ง ซึ่งมันได้รับการพัฒนาโดย CoenraadS และที่สำคัญ ดูเหมือนมันจะกลายเป็น Extension ที่ “Must-Have” สำหรับทุกคนที่เขียน Code ไปซะแล้ว

ใน Version 2 ได้ถูก Release พร้อมกับ ความเร็วและความแม่นยำ ที่สูงขึ้น

2. Beautify

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

คุณสามารถ Customize การตั้งค่าได้เองเกือบจะทั้งหมด เช่นขนาดของการเยื้อง, การขึ้นบรรทัดใหม่ เป็นต้น อีกทั้งยังสามารถกำหนดการตั้งค่าในภาษาที่ต้องการได้อีกด้วย มันได้รับการพัฒนาโดย HookyQR และถูก Download ไปใช้งานแล้วกว่า 4 ล้านครั้ง เพียงแค่คุณติดตั้งมันบน VS Code ของคุณและจัดระเบียบ Code ของคุณด้วย Keyboard Shortcut อย่างง่าย

3. Code Spell Checker

สิ่งนี้อาจฟังดูเป็นเรื่องธรรมดา ๆ แต่การตรวจสอบการสะกด (Spell Checking) เป็นสิ่งที่เรามักจะมองข้ามในขณะที่เขียน Code

แน่นอนว่าพวกเราแทบทุกคนต่างรู้ว่าสิ่งที่เราเขียนสะกดอย่างไร แต่อย่าลืมว่า Coders แต่ละคนก็ล้วนมี Style ที่แตกต่างกัน ดังนั้น มันจึงยากที่จะตรวจสอบคำแต่ละคำทั้งหมดได้ โดยเฉพาะอย่างยิ่งเมื่อคุณใช้มาตรฐานการตั้งชื่อตัวแปร เช่น camelCase หรือ snake_case ทำให้ Spell Checker ที่ Default มาให้ในเบื้องต้น อาจไม่สามารถตรวจจับข้อผิดพลาดของคุณได้ทั้งหมดและตลอดเวลา และคงไม่มีอะไรน่าอายไปกว่าการต้องมานั่งค้นหาคำที่สะกดผิดในขั้นตอนการ Review Code หรือแม้กระทั่งเมื่อคุณส่ง Code ไปยังลูกค้าแล้ว ดังนั้น การตรวจสอบแก้ไขให้เสร็จเสียตั้งแต่แรก คงจะดีกว่าการต้องมาขอโทษลูกค้าภายหลัง สำหรับ Extension นี้ถูก Download ไปใช้งานแล้วกว่า 1 ล้านครั้ง

4. TypeLens

TypeLens เป็น Extension ที่ยอดเยี่ยมซึ่งจะช่วยให้คุณสามารถตรวจสอบได้ว่ามีการอ้างอิง (References) ของ Function ใน Project เป็นจำนวนเท่าไร และแสดงการใช้งานโดยที่คุณไม่ต้องไปที่ File ใด ๆ ที่กำลังถูกใช้อยู่

ในตัวอย่างด้านล่าง คุณจะเห็นว่าอยู่ด้านบนของ test() ซึ่งได้ถูก Highlight ว่ามันถูกใช้งานอยู่ 2 แห่ง และเมื่อคุณคลิกที่มัน มันจะแสดงตำแหน่งที่ถูกใช้ซึ่งจะแสดงให้เห็นแยกออกมาชัดเจน ปัจจุบันสามารถใช้งานได้กับ TypeScript, JavaScript, SCSS และ Less Files

5. Material Icon Theme

ถึงแม้ตอนนี้มันอาจจะไม่เป็น Extension ที่  แต่มันก็เป็น VS Code Extension ที่เจ๋งที่สุดตัวหนึ่ง ด้วยจำนวนการ Download ถึง 3.2 ล้านครั้ง

มันมี Icon สำหรับ Files และ Folders ตาม Material Design Themes ล่าสุดของคุณ ถึงแม้มันอาจไม่ได้ช่วยเพิ่ม Value ใด ๆ มากมายให้กับ Code ของคุณ แต่มันก็ช่วยให้คุณสามารถระบุ Files และเพิ่มความสามารถในการปรับแต่งให้กับ Editor ของคุณได้

6. npm Intellisense

หากคุณเป็น JS Developer เหมือนกับ Developers อีกหลายคนในโลกนี้ เชื่อว่าคุณคงจะใช้งาน npm แทบจะทุกวัน และจะมีอะไรดีไปกว่า Extension ที่ช่วยบอกคำแนะนำและช่วยใส่ชื่อ npm module ของคุณให้โดยอัตโนมัติเมื่อคุณพยายาม Import มัน

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

7. GitLens

GitLens ก็คือ “Git supercharged” สำหรับ VS Code ตามที่ Creator ของมันชอบกล่าวถึง มันได้ Integrate ความสามารถของ Git เกือบจะทั้งหมด เช่น Pull, Push, Revert รวมทั้งอื่น ๆ ลงใน Interface ที่ใช้งานง่ายและมี Feature ที่มีประโยชน์มากมาย เช่น current-line blame, changes (diff) hover, repositories view เป็นต้น

ด้วยจำนวนการ Download กว่า 4 ล้านครั้ง ทำให้มันเป็นหนึ่งใน Git Integrations ที่ดีที่สุดสำหรับ VS Code

Current-line blame

Changes (diff) hover

Repositories view

8. Code::Stats

Code::Stats เป็น Status-Tracking Tool ที่ Programmers สามารถใช้งานได้แบบฟรี ๆ เพื่อ Tract ปริมาณของ Code ที่คุณเขียน มันให้การวิเคราะห์ที่เรียบง่ายและครอบคลุม Code ทั้งหมดที่คุณเขียนบน Machine ของคุณทั้งหมด

ที่มา:  https://medium.com/

 

 

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

 

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

เพิ่มเพื่อน

 

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