Visual Studio Code (VSCode) Extensions against Technical Debt
What is technical debt?
Technical debt (a.k.a. tech debt or code debt) describes what results when development teams take actions to expedite the delivery of a piece of functionality or a project which later needs to be refactored. In other words, it's the result of prioritizing speedy delivery over perfect code.
According to a paper, which was published by the Software Engineering Institute as "Towards an Ontology of Terms on Technical Debt," there are 13 distinct types of technical debt and a set of key indicators for each.
- Architecture Debt
- Build Debt
- Code Debt
- Defect Debt
- Design Debt
- Documentation Debt
- Infrastructure Debt
- People Debt
- Process Debt
- Requirement Debt
- Service Debt
- Test Automation Debt
- Test Debt
Impact and cost of technical debt
- Technical Debt Is Negative Value: A negative value can be in terms of system downtimes, bad user interface impacting customer/user satisfaction, bad system performance, etc.
- Technical Debt Impacts Development Team's Velocity: Technical debt will impact the team's velocity in the long run as the development team will be busier in fixing the technical debt than delivering value.
- It Will Get Harder & Harder To Work On New Features: The impact of technical debt is not linear, it is exponential. This means teams spend more time fixing the impact of technical debt or slow down to a crawling speed if the technical debt is not taken care of. Teams will be creating more waste-rework or lower productivity. This will leave less time for them to work on new features.
- Lack of Motivation for Developers: Technical Debt slows down the progress of value delivery. This sometimes creates unnecessary pressure on the development. This is worse if management is inclined towards velocity. It can be very annoying and frustrating for the developers as no one likes being un-productive on regular basis. Technical debt increases the unpredictability, their estimates vary a lot with actuals and people start questioning the developer's productivity and skillset. All of the above can result in demotivated employees.
- Technical Debt Increases Total Cost of Ownership: Product owners must consider the impact of technical debt on the total cost of ownership.
How we can fight technical debt in development?
Luckily in today's development community while using the VS Code as an editor there are many extensions available, that will allow development teams to keep track and reduce technical debt along with the feature development. Below are a few extensions that can help reduce technical debt in both web and other development.
Glean: Glean provides refactoring tools for your React codebase: extract JSX into a new component, convert Class Components to Functional Components, and wrap with Hooks. It allows extracting JSX into new components, converting Class Components to Functional Components and vice-verse, wrapping JSX with conditional, renaming state variables and their setters simultaneously, and more.
Step Size: Stepsize is built specifically for engineering teams to track & prioritize technical debt directly in the VSCode editor. It is an editor-first issue tracker for a healthy code base that allows engineering teams to create and view code issues directly from the editor, and track & prioritize code improvements like technical debt.
Javascript Assistant: JavaScript assistant will help you write modern, clear, and concise code. It offers 48 automated refactorings, cleanups, and actions for JavaScript and TypeScript.
Abracadabra, refactor this: VS Code ships with a few basic refactorings. Abracadabra supercharges your editor with shortcuts to trigger the most useful ones in no time, quick fixes to suggest refactorings when appropriate, options to customize the UX to your needs, and refactorings that work with .js, .jsx, .ts, .tsx, and .vue files.
TODO Highlight: Mark sections of code with TODO and FIXME tags but keep forgetting about them then this plugin will solve your problem. It highlights TODO or FIXME phrases in the code so that you don’t forget what you wanted to fix or improve.
TODO Tree: The Todo Tree extension collects all your tasks scattered throughout the application at your command into one tree on the left side of the editor workspace. You can quickly search your workspace for comment tags like TODO and FIXME, and see them in a tree view.
Comment Anchors: Comment Anchors allow you to place anchors within comments or strings to place bookmarks within the context of your code. Anchors can be used to track TODOs, write notes, create foldable sections, or build simple navigation making it easier to navigate your files.
Anchors can be viewed for the current file, or throughout the entire workspace, using an easy-to-use sidebar.
New Relic Codestream: New Relic CodeStream is a developer collaboration platform that integrates essential dev tools into VS Code. Eliminate context-switching and simplify code discussion and code review by putting collaboration tools in your IDE.
Sonar Lint: SonarLint lets you fix coding issues before they exist: like a spell checker, SonarLint highlights Bugs and Security Vulnerabilities as you write code, with clear remediation guidance so you can fix them before the code is even committed. SonarLint in VS Code supports analysis of JavaScript, TypeScript, Python, Java, HTML & PHP code.
Code Runner: Run code snippets or code files for multiple languages, such as C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, and many more.
Collaborating Extensions with the team
In order to make sure all team members are using the same extensions one can recommend the extension via the code itself. Please follow the article on Recommending & using the same VSCode extensions within a workspace.
Conclusion
Embracing and removing technical debt is ethically a role and responsibility of a good developer. Once the team, is armed with the right tools it can make a real difference in removing the technical debt and increasing velocity.
Happy Coding :)
