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

10 VS Code Extensions ที่ช่วยแก้ปัญหา Technical Debt ของคุณ

19-ม.ค.-22

คัมภีร์เทพ IT

มี Engineering Teams เป็นจำนวนมากที่ติดขัดและไม่สามารถจัดส่ง Software ที่มีคุณภาพได้อย่างรวดเร็วตามกำหนด เนื่องจากปัญหาด้าน Technical Debt เพื่อแก้ปัญหานั้น เราสามารถใช้เครื่องมือที่เหมาะสมในการ Refactor Code อย่างต่อเนื่อง, ปรับปรุงการสื่อสารของ Codebase และจัดการกับ Technical Debt และนี่ก็เป็น 10 VS Code Extensions ที่ช่วยแก้ปัญหา Technical Debt ขอบคุณ

Refactoring and Tech Debt Tools

1. Glean

Glean ได้จัดเตรียม Refactor Tools สำหรับ React Codebase ของคุณ มันจะช่วยให้สามารถ Extract JSX เป็น Component ใหม่, Convert Class Components ไปเป็น Functional Components, Wrap ด้วย Hooks อีกทั้งยัง Wrap JSX ด้วย Conditional, เปลี่ยนชื่อ State Variables และอื่น ๆ

2. Stepsize

Stepsize ถูกสร้างขึ้นสำหรับ Engineering Teams โดยเฉพาะ เพื่อ Track และจัดลำดับความสำคัญของ Technical Debt โดยตรงใน VS Code Editor

Stepsize เป็นเครื่องมือ Track ปัญหาที่เกิดขึ้นเป็นลำดับแรก ๆ สำหรับ Codebase ที่สมบูรณ์ มันช่วยให้ Engineering Teams สามารถ:

  • สร้างและดูปัญหา Code ได้โดยตรงจาก Editor ของคุณ
  • Track และจัดลำดับความสำคัญของการปรับปรุง Code ให้ดีขึ้น อย่าง Technical Debt
  • เพิ่มประเด็นสำคัญให้กับ Sprints ของคุณด้วยการ Integrate กับ Jira

3. JavaScript Assistant

JavaScript Assistant จะช่วยให้คุณเขียน Code ที่ทันสมัย, ​​ชัดเจน และรัดกุมยิ่งขึ้น มันมี Automated Refactoring ให้คุณถึง 48 รายการ, การ Cleanups และการ Actions ทั้งสำหรับ JavaScript และ TypeScript

4. Abracadabra, refactor this!

ด้วย Abracadabra คุณสามารถ Refactor Code ที่มีอยู่ใน VS Code ได้อย่างรวดเร็วและปลอดภัย

VS Code มาพร้อมกับการ Refactor พื้นฐานบางอย่าง ซึ่ง Abracadabra ทำให้ Editor ของคุณเต็มไปด้วย Shortcut เพื่อ Trigger รายการที่มีประโยชน์ที่สุดในเวลาไม่นาน, ช่วยแก้ไขเพื่อแนะนำการ Refactor ตามความเหมาะสม, ตัวเลือกในการปรับแต่ง UX ตามความต้องการของคุณ, การ Refactor ที่ทำงานร่วมกับไฟล์ .js, .jsx, .ts, .tsx และ .vue

TODOs and Comments

5. TODO Highlight

หากคุณต้องการทำเครื่องหมายตามส่วนต่าง ๆ ของ Code ด้วย TODO และ FIXME Tag แต่คุณเองก็ลืมมันบ่อย ๆ หากเป็นเช่นนั้น เชื่อว่า Plugin นี้จะช่วยแก้ปัญหาของคุณได้ มันจะช่วยทำ Highlight พวกคำที่ได้ทำ TODO หรือ FIXME ไว้ใน Code เพื่อให้คุณไม่ลืมว่าต้องการแก้ไขหรือปรับปรุงอะไรบ้าง

6. Todo Tree

Todo Tree Extension จะรวบรวม Tasks ทั้งหมดที่กระจัดกระจายตาม Command ของคุณทั่ว Application ไว้ใน  Tree เดียวซึ่งอยู่ทางด้านซ้ายของ Editor Workspace คุณสามารถค้นหา Comment Tags อย่าง TODO และ FIXME ใน Workspace ของคุณได้อย่างรวดเร็ว และสามารถดูในมุมมองแบบ Tree 

7. Comment Anchors

Comment Anchors ช่วยให้คุณสามารถวาง Anchors ภายใน Comments หรือ Strings เพื่อวาง Bookmarks ไว้ใน Context ของ Code ของคุณ คุณสามารถใช้ Anchor เพื่อ Track TODOs, เขียน Notes, สร้าง Foldable Sections หรือเพื่อสร้าง Navigation อย่างง่าย เพื่อทำให้ง่ายต่อการ Navigate ไฟล์ของคุณได้ง่ายขึ้น

คุณสามารถใช้ Anchors เพื่อดูไฟล์ปัจจุบัน หรือทั่วทั้ง Workspace โดยใช้ Sidebar ที่ใช้งานง่าย

Comment Anchors มี Options สำหรับการกำหนดค่ามากมาย, ช่วยให้คุณปรับแต่ง Extension นี้ให้เข้ากับ Personal Workflow ของคุณ อีกทั้งยังช่วยเพิ่มประสิทธิภาพการทำงาน

8. New Relic CodeStream

New Relic CodeStream เป็น Collaboration Platform ของ Developer ที่ Integrate เข้ากับ Dev Tools ที่จำเป็นไว้ใน VS Code มันช่วยขจัด Context-Switching รวมทั้งช่วยทำให้การสนทนาเกี่ยวกับ Code และการ Review Code ง่ายขึ้น ด้วยการใส่ Collaboration Tools ไว้ใน IDE ของคุณ

  • สร้าง และ Review GitHub และ GitLab Pull Requests
  • รับ Feedback เกี่ยวกับงานที่ยังอยู่ในระหว่างการดำเนินการ ด้วย Pre-PR Code Reviews
  • Code Discussions & Comments

Automation

9. SonarLint

SonarLint จะช่วยให้คุณแก้ไขปัญหาการเขียน Code ก่อนที่จะเกิดปัญหาขึ้น คล้าย ๆ กับ Spell Checker อีกทั้ง SonarLint ยังช่วย Highlight Bugs และช่องโหว่ด้านความปลอดภัยในระหว่างที่คุณเขียน Code, พร้อมคำแนะนำในการแก้ไขที่ชัดเจน เพื่อให้คุณแก้ไขปัญหาได้ก่อนที่ Code จะถูก Commit นอกจากนี้ SonarLint ใน VS Code ยังรองรับการวิเคราะห์ Code ของ JavaScript, TypeScript, Python, Java, HTML และ PHP

10. Code Runner

มันช่วยให้คุณสามารถ Run Code Snippet หรือ Code File สำหรับหลายภาษา เช่น C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go และอื่น ๆ อีกมากมาย

  • Run Code File ของ Text Editor ที่ใช้งานอยู่ในปัจจุบัน
  • Run Code File ผ่าน Context Menu ของ File Explorer
  • Run Code Snippet ที่คุณ Select ใน Text Editor ของคุณ

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

 

 

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

 

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

เพิ่มเพื่อน

 

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

ประเภทบทความ