It is easy to get lost with just too many extensions on VS Code.

This is why we decided to group up the resources we like and why we do.

How many VS code extensions is too much?

Let's find out.

Live Server

• Live Server launches a local development server with real-time reload capabilities for static and dynamic pages, allowing developers to see changes instantly without refreshing the browser. This extension is highly popular among web developers due to its efficiency in previewing web pages as they code.

Prettier

• A widely-used code formatter that enforces consistent styling across various programming languages. It automatically formats code to enhance readability and maintainability, allowing developers to focus on writing quality code without worrying about formatting issues.

ESLint

• This static code analysis tool helps identify and fix coding errors in JavaScript and TypeScript. ESLint ensures adherence to coding standards and improves overall code quality by highlighting potential issues in real-time.

Better Comments

• Enhances code commenting by categorizing comments into alerts, informational notes, TODOs, and more. This extension improves the readability of comments, making it easier for developers to understand the purpose of various code sections.

GitLens

• A powerful extension for Git that provides insights into commit history, authorship, and changes made to files. GitLens helps teams collaborate by making it easier to track changes and understand the evolution of the codebase.

Polacode

• Allows developers to create great images out of their code snippets, which can be useful for sharing on social media or within documentation. This extension is particularly handy for showcasing work to make it visually appealing.

Quokka.js

• An interactive coding environment that allows developers to run JavaScript code directly within VS Code. It provides real-time feedback, making it easier to test and debug snippets without switching to a browser console.

Material Icon Theme

• Boost the visual aesthetics of the workspace by providing a set of appealing icons for different file types. This makes navigation within projects more intuitive (definitely a nice-to-have).

Path IntelliSense

• Offers auto-completion for file paths within the project, which is especially useful in larger projects with many files. This extension helps reduce errors related to incorrect file paths.

HTML CSS Support

• Provides auto-completion and suggestions for HTML and CSS, reducing typing time and minimizing errors (try it here).

What is next?

These extensions collectively improve the efficiency but they need to be dosed effectively.

By integrating some of these tools into your VS Code setup you could see your productivity increase significantly.

In the spirit of getting more productive on the front-end side of things, we created Polipo, a React, Next.js and Vue.js library (and a Figma plugin) that make you use any Figma design as the live and synchronized UI of your product (is it a landing page, an e-commerce or a SaaS product).

You can build with your own code and see the product grow in real-time.

Curious to see how that will make you more productive?

Start here.