DEV Community

Cover image for 5 VSCode extensions that are guaranteed to make maintenance easier🔥
Alex Omeyer
Alex Omeyer

Posted on • Updated on

5 VSCode extensions that are guaranteed to make maintenance easier🔥

Shipping quality code fast is impossible without taking care of the codebase.

To make your code easy to understand, change, and fix fast, Engineers need to keep it maintainable💪

Software maintenance is the process of keeping and updating the software product after it’s been delivered to customers.

The key maintenance goals for engineers are to:

  • Document changes that might cause conflicts in the future
  • Make pieces of code that cause problems visible
  • Refactor those spots in the codebase if needed

What tools can help you with these goals? How do you maintain ​​a healthy codebase? Let’s look at these 5.

1. Comment Anchors: add comments and notes

Adding comments to the code can help you work with any codebase better. Comment Anchors allows 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 to build a 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.

It provides many configuration options, allowing you to tailor this extension to your personal workflow, and increase productivity.

Image description

2. Stepsize: add issues to your sprint

If you want to go further than just comments and add key technical issues linked to code to your issue tracker, use Stepsize. Stepsize will help you make technical debt visible and add issues to your sprints directly from your editor.

It allows Engineering teams to:

  • Create & view code issues directly in the editor
  • Track & prioritise code improvements like technical debt
  • Add key issues to Jira, GitHub, Asana, and more Image description

3. DeepScan: detect bugs and quality issues

If you need to quickly find vulnerabilities in the code DeepScan VS Code extension will help you detect bugs and quality issues in JavaScript, TypeScript, React, and Vue.js. DeepScan is a cutting-edge JavaScript code inspection tool that helps you to find bugs and quality issues more precisely by data-flow analysis.

Image description

4. SonarLint: spell checker

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.

Image description

5. Glean: refactor code

Once your team found the issues that slow you down you might decide to refactor code. Glean provides refactoring tools for your React codebase: extract JSX into a new component, convert Class Components to Functional Components, wrapping with Hooks. It allows extracting JSX into new component, converting Class Components to Functional Components and vice-verse, wrapping JSX with conditional, renaming state variables and their setters simultaneously, and more.

Image description

Bonus: JavaScript Booster is another code refactoring tool that features several coding actions such as converting var to const or let, removing redundant else statements, and merging declaration and initialization. Just note the light bulb at the left and press it to learn how you can transform the code under the cursor.

What are some other tool you use that help you maintain your code? 👇

Top comments (2)

evasteps profile image
Eva Lam

cool article, thanks for sharing. Personally I have also tried P42 which is a pretty cool tool.

alexomeyer profile image
Alex Omeyer

Great recommendation!