# Top VSCode Extensions to Boost Your Productivity
In this article we will look at a few simple VSCode plugins that can help boost your productivity while working on projects. Let's dive right in!
This plugin simplifies debugging by automating the process of producing relevant log messages.
Selecting or hovering the variable which is the subject of the debugging (Manual selection will always take over the hover selection)
ctrl + alt + L(Windows) or
ctrl + option + L(Mac)
The log message will be inserted in the next line relative to the selected variable like this:
This addon colorsizes the indentation in front of your text by rotating between four distinct colour at each step. This makes easier to work with nested codeblocks.
GitLens enhances your VS Code Git experience. Maintaining concentration is essential; extra time spent moving contexts or missing context breaks your flow. GitLens is the ultimate tool for making Git work for you. It is meant to increase concentration, productivity, and cooperation by providing you and your team with a comprehensive collection of tools to assist you and your team better understand, develop, and review code.
Prettier is a code formatting tool. It ensures consistency by parsing your code and re-printing it using its own rules that take into consideration the maximum line length, encapsulating code where necessary.
The workspace folder that was opened contains the ESLint library, which is used by the extension. The extension checks for a global install version if the folder does not offer one. Run
npm install eslint in the workspace folder for a local install or
npm install -g eslint for a global install if you haven't already installed ESLint locally or globally.
This plugin helps take snapshot images of the code in your VSCode editor. You can customize the image and export it to share on social media or anywhere you like.
This extension shows image preview in the gutter and on hover. It is super useful to see a preview of an image that you are using in the project without leaving the code file you are editing.
This extension will display inline in the editor the size of the imported package. It is super useful to keep the bundle size in check while developing the application as you can proactively see the package sizes in your editor.
This extensions allows you to edit CSV files directly in the VSCode editor, you have a rich UI where you can add, delete or update data as you need in a CSV file.
Auto Rename Tag automatically rename paired HTML/XML tag, making it easier to keep opening and closing tags in sync.
This VS Code extension generates random ints, floats, strings, words, etc. in case you need to populate sensible random data during development of your application.
This VS Code extension automatically shows Markdown preview whenever you open new Markdown file. It also shows live preview of the markdown file as you are updating it, making it super easy to see how the file will look at the end.
As the name suggests this is a basic spell checker for you to write the correct spelling in your code for functions & variables.
This extension scans your workspace for TODO and FIXME comment tags and presents them in a tree style in the activity bar.
- Top VSCode Extensions to Boost Your Productivity