Boost Productivity & Quality: Essential VS Code Extensions
Tags: vscode, extensions, productivity, development
Published: 2024-04-15 20:53:53

Visual Studio Code is a highly popular and user-friendly code editor currently available in the market. If you’re focusing on frontend development using JavaScript frameworks, these extensions can greatly improve productivity and save your time.

In a sea of similar articles, what sets this one apart? Well, it's based on my personal developement experience. Colleagues often ask about the extensions I use, and this article shares insights from them. If you're looking for tried-and-tested extensions to enhance your coding experience, you've found them here.

## Text Formatting and Readability

### [Prettier — Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

This extension automatically formats your code to make it look neat and consistent. It’s like having a personal assistant for tidying up your code, which can save you a lot of time and effort. It can be configured according to the requirement of our project.

### [Color Highlight](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)

This extension is such a underrated and useful tool specially for UI development. It highlights colors within your code editor, making it effortless to work with color codes and ensuring a polished visual presentation. In the screenshot below, the color `#43feee` is highlighted, reducing the chance of mistake.

![Color Highlight example](https://cdn-images-1.medium.com/max/2000/1*dy0WM-gba7vGMKLHy2KzsA.png)

### [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)

It improves code readability by visualizing indentation levels with indent-colors. This extension adds subtle color variations to each level of indentation, making nested code structures easier to parse at a glance.

![indent-rainbow example](https://cdn-images-1.medium.com/max/2000/0*28KVsH3sgT_Dgpub.png)

### [change-case](https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case)

It provides intuitive shortcuts for converting between camelCase, CONSTANT_CASE, or snake_case, making case conversions seamless and effortless.

![change-case example](https://cdn-images-1.medium.com/max/2000/0*H8EDGBKfygfjKhyP.gif)

### [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)

It helps in catching spelling mistakes and typos in your code, ensuring cleaner and more readable code. It’s a useful tool for maintaining code quality and avoiding unintentional errors.

![Code Spell Checker example](https://cdn-images-1.medium.com/max/2000/0*60CX803EewrcEdEC.gif)

---

## Code Quality and Improvement

### [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

ESLint is a valuable tool for ensuring the quality of your JavaScript code. It scans your code for errors, style inconsistencies, and common mistakes, which helps you maintain cleaner and more reliable code. You can configure ESLint for your project by creating a custom set of [rules](https://eslint.org/docs/latest/rules/) in a configuration file.

For instance, if your project prohibits nested ternary expressions, ESLint will flag them in your editor. Similarly, if a variable like DDMMYYYY is not defined, ESLint will highlight it. You can even specify the severity level for each type of issue, allowing you to prioritize and address them accordingly. This proactive approach to code quality helps prevent bugs and maintain consistency throughout your project.

![ESLint example](https://cdn-images-1.medium.com/max/3076/1*dqJO5vbIIEw0WrTmpI_5Gg.png)

### [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens)

It is a VS Code extension that enhances error highlighting within the code editor. It provides immediate feedback on common errors and warnings, allowing developers to quickly address issues as they write code.

![Error Lens example](https://cdn-images-1.medium.com/max/2000/0*30zsgMIvdrztWcZO.png)

### [JS Refactoring Assistant](https://marketplace.visualstudio.com/items?itemName=p42ai.refactor)

This is an essential tool for developers working with JavaScript, TypeScript, React, and Vue.js. It offers over 120 code actions to efficiently edit, modernize, and refactor code, making code maintenance and optimization easier.

![JS Refactoring Assistant](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qty0bdsdjjjwk473n7ki.png)

### [SonarLint](https://marketplace.visualstudio.com/items?itemName=SonarSource.sonarlint-vscode)

It offers more comprehensive code analysis beyond simple linting. SonarLint not only detects coding issues but also provides deeper insights into code quality, security vulnerabilities, and potential performance bottlenecks.

It leverages rulesets based on industry best practices and can integrate with SonarQube or SonarCloud for centralized code quality management. This is highly recommended for larger projects.

![SonarLint example](https://cdn-images-1.medium.com/max/2000/0*Nv3rdGMgp9OsH8mN.gif)

---

## Development Tools and Utilities

### [Console Ninja](https://marketplace.visualstudio.com/items?itemName=WallabyJs.console-ninja)

It improves JS development workflows by displaying console.log output and runtime errors directly next to your code. This extension offers convenient access to debugging information, enhancing code comprehension and problem-solving.

![Console Ninja example](https://cdn-images-1.medium.com/max/2000/0*Z0r45LJ77ro3--ZZ)

### [Turbo Console Log](https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log)

It accelerates the process of writing meaningful log messages. This extension automates the insertion of console.log statements, saving time and effort during debugging and troubleshooting tasks. This is one of the most frequent used extension in my list and often get asked about it a lot. 

1. Selecting or hovering the variable which is the subject of the debugging (Manual selection will always take over the hover selection)
2. Pressing `ctrl + alt + L `(Windows) or `ctrl + option + L `(Mac)

The log message will be inserted in the next line relative to the selected variable.

![Turbo Console Log example](https://cdn-images-1.medium.com/max/4096/1*2OQ0S9lOPhdqTuoT5rJAOQ.png)

### [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

It is a must-have extension for developers who rely on Git for version control. With GitLens, you can easily visualize code authorship, navigate through Git repositories, and gain valuable insights into your project’s history and evolution.

![GitLens example](https://cdn-images-1.medium.com/max/2000/0*aKMgav6iopsc_bMv.png)

One of the key features of GitLens is its ability to display detailed annotations, or “blame” information, directly inline with your code. This allows you to see who last modified each line of code, as well as when the change was made. By providing this level of visibility into code authorship, GitLens helps you understand the context behind each line of code and collaborate more effectively with your team.

![GitLens blame history](https://cdn-images-1.medium.com/max/2000/0*Xi4BVCCzACndZt1X.png)

### [Mintlify Doc Writer](https://marketplace.visualstudio.com/items?itemName=mintlify.document)

It is an AI-powered documentation tool for VS Code. It offers smart suggestions and auto-completion for writing documentation in various programming languages.

With support for markdown formatting and seamless integration with VS Code, it helps developers create professional documentation effortlessly.

![Mintlify example](https://cdn-images-1.medium.com/max/2800/0*Ta9v8qHlrAHpHc-Y.gif)

### [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)

This extension will display the size of the imported package inline in the editor. The extension utilizes webpack in order to detect the imported size.

It helps in improving performance by identifying heavy libraries used in your project.

![Import Cost example](https://cdn-images-1.medium.com/max/2000/0*-84KjkTic-w2D6fa.png)

---

## Language-specific Tools

### [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)

It automatically add HTML/XML closing tag when you type in the closing bracket of the opening tag. This time-saving feature reduces manual effort and streamlines coding, leading to faster and more efficient development. 

![Auto Close Tag example](https://cdn-images-1.medium.com/max/2880/0*_vrTjMc4fAEqnIEM.gif)

### [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)

It automatically rename the paired HTML/XML tag when we rename one tag. This small but useful feature saves time, making coding more efficient and enjoyable.

![Auto Rename Tag example](https://cdn-images-1.medium.com/max/2880/0*bMiGMVYXUv5tgWpP.gif)

### [CSS Converter](https://marketplace.visualstudio.com/items?itemName=Lakkannawalikar.css-converter)

It converts HTML CSS to JS CSS for styled components and vice-versa.

 1. Select the CSS text you want convert

 2. Enter `Shift + Command + V` (mac), `Shift + Ctrl + V` (windows/linux)

![CSS Converter example](https://cdn-images-1.medium.com/max/2000/0*u7JJ86MypNn-lqtn.gif)

---

## Testing and Test Coverage

### [Jest](https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest)

It helps developers to run and debug Jest tests directly within the editor. With inline test results and intuitive navigation, it simplifies the testing workflow for JavaScript projects.

![Jest example](https://cdn-images-1.medium.com/max/4172/0*tle6QHFUueJjIh1h.png)

### [Coverage Gutters](https://marketplace.visualstudio.com/items?itemName=ryanluker.vscode-coverage-gutters)

It helps in displaying test coverage data generated by lcov or xml reports directly within your code editor and offers insights into code coverage, helping you assess the effectiveness of your test suites. It saves time by eliminating the need to switch to another window.

![Coverage Gutters example](https://cdn-images-1.medium.com/max/2078/0*mIrGt_c_ReFTnWfM.gif)

---

## Bonus

### [WakaTime](https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime)

It automatically tracks your coding time across different programming languages, providing valuable insights to optimize your productivity.

![WakaTime](https://cdn-images-1.medium.com/max/4124/0*7NErzoZ52sMGIsso.png)

### Auto Save VS Code Setting

A time-saving tip I’ve found useful is configuring Auto Save VS Code setting to onFocusChange. This means that whenever I switch to a different file or application, my changes are automatically saved. This eliminates the need to manually save files and risk losing any modifications. Additionally, for mobile or web applications, this setup allows me to see updated changes immediately when switching to the browser or simulator, speeding up the development process.

![Auto Save VS Code Setting](https://cdn-images-1.medium.com/max/3436/1*hbuuZi4idaiRWarYvasZPg.png)

---

## Final Words

These above mentioned tools significantly improve the development experience by automating tasks and simplifying workflows. They save developers considerable time and effort by providing features such as code formatting, error detection, and version control integration within code editor.