DEV Community

Cover image for Boost Productivity & Quality: Essential VS Code Extensions
Saloni Agrawal
Saloni Agrawal

Posted on • Updated on • Originally published at saloniagrawal25.Medium

Boost Productivity & Quality: Essential VS Code Extensions

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

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

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

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

change-case

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

change-case example

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


Code Quality and Improvement

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 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

Error Lens

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

JS Refactoring Assistant

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

SonarLint

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


Development Tools and Utilities

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

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

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

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

Mintlify Doc Writer

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

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


Language-specific Tools

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

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

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


Testing and Test Coverage

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

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


Bonus

WakaTime

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

WakaTime

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


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.

Top comments (24)

Collapse
 
rencidenuwang profile image
Gracy c

Found the list interesting! It's great to hear that you're already using many of these tools and that you appreciate typo-fixing tools like cspell

The Auto Save VS Code Setting can indeed be a game-changer for productivity. Thanks for sharing your this tips!

Collapse
 
coredump profile image
Alexandre Nepomniachtchi

Thanks a lot for that list.
Not so long ago, I decided to clean up all the extensions and just restart those that I use. Unfortunately, I did not find an opportunity to attach this list as a file and therefore I will simply copy it here. I will not give a description, all information is available from links on the market place. I'm pretty sure you're already using a lot of from the list, but suddenly it comes be handy! ;)
Sincerely Alex.

These extensions can be used for different languages.

  1. Code Runner v0.12.02 (last update: 30/07/2022, 03:30:35) Run code snippet or code file for multiple languages: C, C++, Java, Python etc. (see desc. on site)
  2. Git Graph v1.30.0 (last update: 05/04/2021, 05:44:22)
  3. Better Comments v3.0.2 (last update: 30/07/2022, 03:30:35)
  4. Tabnine: (last update: 14/04/2024, 19:02:24) It is Free. I use it as Copilot replacement.
  5. Bookmarks v13.5.0 (last update: 03/04/2024, 12:40:14)
  6. Markdown All in One v3.6.2 (last update: 15/01/2024, 14:17:39) Note: VS Code has basic Markdown support out-of-the-box (e.g, Markdown preview), please see the official documentation for more information.
  7. Path Intellisense v2.8.5 (last update: 07/10/2023, 21:04:04)
  8. Diff v2.1.2 (last update: 30/03/2024, 17:39:18). Diff 2 opened files with ease. Because running code --diff path1 path2 is too slow.
  9. Doxygen Documentation Generator v1.4.0 (last update: 25/02/2022, 12:04:01)
  10. Live Share v21.0.5918 (last update: 05/03/2024, 21:21:09) 11.VSCode-Icons v12.7.0 (last update: 14/01/2024, 18:14:49).Useless but funny ;)
  11. Docker v1.2.9 (last update: 13/02/2024, 16:42:40)
Collapse
 
jangelodev profile image
João Angelo

Hi Saloni Agrawal,
Your tips are very useful.
Thanks for sharing.

Collapse
 
ricardogesteves profile image
Ricardo Esteves

Cool, thanks for sharing it!

Collapse
 
ccoveille profile image
Christophe Colombier

Interesting list. I'm using a lot of these tools

Thanks for promoting cspell I love typos fixing tools.

I will take good note of Auto Save VS Code Setting that's indeed very interesting

Collapse
 
dunggramer profile image
Nguyễn Công Dũng

Hurry Delete and VS Aligner saved me a lot of time

Collapse
 
milkymaru profile image
junyiwang • Edited

Waka time sounds amazing, i will give a try~I’ve also tried out some other AI coding tools like Codeium and MarsCode. They’re great for helping with code comments and code reviews~

Collapse
 
archie_lc profile image
Archie • Edited

Very much tempted to try Gitlens and Jest (if I reconcile my situation with javascript)
I use and would also recommend

1) VSCode Great Icons ( Visually unclutters the files section )
2) Codeium or TabNine (free Copilot alts)
3) Docker (just because . )

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop

Great list !

I would just add File Utils for quick file edits

Collapse
 
saloniagrawal profile image
Saloni Agrawal

Thanks, will definitely try this one out.

Collapse
 
michaeltharrington profile image
Michael Tharrington

Woot! Nice helpful list of extensions. Thank ya so much!

Collapse
 
marcelomsc profile image
Marcelo

Great extensions

Collapse
 
mrdgh2821 profile image
Mihir Rabade

I haven't used Change case extension, but check out Transform to ... command in command pallet.
It has the same thing built into VSCode

Collapse
 
saloniagrawal profile image
Saloni Agrawal

Thanks for your suggestion, will definitely try this out.

Collapse
 
thatanjan profile image
Anjan Shomodder

CSS Converter can be very useful. but sadly haven't found similar extension for neovim

Collapse
 
yusuke050 profile image
Lin Fan-Chiang

Thank you for introducing these extensions, they're really helpful.

Collapse
 
alkons profile image
Alkons

Thanks for sharing. I have been using a lot of these but found a couple of interesting extensions to try out.