Home Top Top VS Code Extensions for Developers and Designers.

Top VS Code Extensions for Developers and Designers.

by Snehashis Mukherjee

Visual Studio Code, probably the best Code Editor to use for Developers in the present time. Because it has a lot of extensions, themes that come within Market Place(a kind of Extension-store). One of the most impressive parts of the Visual Studio Code is customizability, especially via extensions. Visual studio code is built on top of open-source Monaco editor by Microsoft.
If you’re a web developer, these extensions will help you to boost your productivity to the next level! Check out these to vs code extensions

Best Visual Studio extensions

There is an infinite number of Visual Studio code extensions available in the market place which will improve your productivity pretty fast. Mostly you can find any type of extensions you can expect from a modern-day code editor.

Press SHIFT+COMMAND(or Windows)+X or just click on the extension icon of the Visual Studio Code. Search and select the required extension and press install.

So I have pointed best visual studio code extensions for Web Development. Continue reading the article to know more about these Visual Studio extensions.

1.Javascript (ES6) Code Snippets

No need to mention that JavaScript is the core of web development. If you’re a modern-day web dev, you must work with various JavaScript stacks. No matter what frameworks are using for your project development, typing the same generic codes in different projects decrease your workflow, this extension helps you by not writing that repetitive code again and again.

Features of JavaScript Snippet Pack

  • It provides JavaScript, TypeScript, Vue, React and HTML code snippets.
  • Developers can add or import their own code snippet collections inside this extension very quickly

2. Prettier – Code formatter

It helps format Javascript code, colors keywords to make your code easily readable. What usually happens once people are using Prettier is that they realize that they actually spend a lot of time and mental energy formatting their code. With Prettier editor integration, you can just press that magic key binding and poof, the code is formatted. This is an eye-opening experience if anything else.

Features of Prettier - Code Formatter

  • It’s super easy to set up and can be configured to format your code automatically on save.
  • it supports a wide range of languages like JavaScript, CSS, Scss, Html, Json, Typescript, etc.

3. Debugger For Chrome

Debugger for Chrome is one of the best Visual Studio Code extensions for JavaScript developers. This is Chrome’s official debugger extension for VS Code. Currently one of the most used extensions on the VS Code marketplace. It helps you debug your js files running in your chrome browser straight from VS Code in a much smoother way. This modern-day extension allows both front-end and back-end devs to debug their codes right in the code editor and helps to find those hard to catch bugs very quickly.

Features of Debugger for Chrome

  • Setting breakpoints, including within source files when source maps are enabled
  • Developers can use this VS Code extension for debugging eval scripts, script tags or even scripts which are added dynamically.

4. live server

Make changes in the code editor, switch to the browser, and refresh to see changes. That’s the endless cycle of a developer, but what if your browser would automatically refresh anytime you make changes? This is where Live Server comes in!
It also runs your app on a localhost server. There are some things you can only test when running your app from a server, so this is a nice benefit.
The go-live button present in the taskbar will enable you to run your code as a development server directly, while you can also configure the extension to reload pages as soon as you save your current work.

Features of Live Server

  • You can Start or Stop the server by a single click from the status bar.
  • You can customizable Port Number, Server Root, default browser, and can be accessed through hotkeys.

5. One Dark Pro

one dark pro

One Dark Pro is based on Atom’s default One Dark theme and is one of the most downloaded themes for the VS Code. From the below link you can install the theme on the VS Code, and how to develop and contribute to this project.
I know it’s a personal choice and that VS Code has many different themes available, but I think you should try this one.

6. npm

This is the official Node Package Manager(npm) available on the VS Code marketplace. It helps in to manage the package.json file in a very handy way. NPM throws warnings for dependencies that are defined but not installed or the ones that are installed but not defined in the package.json, it also indicates discrepancies in version control of packages. It also provides for a quick run of npm commands with easy shortcuts.
The npm comes bundled with Node.js. You can check the version by opening terminal present in VS Code and type the below command:

npm version

Features of npm

  • NPM provides online repositories for node.js packages/modules which you can search on search.nodejs.org.
  • It supports command-line utility to install Node.js packages, version management and dependency management of Node.js packages.

7. Path Autocomplete

In most of the project importing of codes needed on a daily basis. Path Autocomplete extension makes boosts the development time faster by autocompleting file names by fetching the directory.

It is one of the best vscode extensions available in the market place which provides a guaranteed productivity boost to your development. it will help you to import files or code in an easy manner.

Features of npm

  • Path Autocomplete supports custom transformations to the inserted text via the path-autocomplete.transformations.
  • Path Autocomplete can be used for the auto-completion of hidden files.
  • It can also be configured for showing both absolute and relative paths to your filenames.

8. Project Manager

Do you work on multiple projects and switch between them for finding the required code or file. The project manager helps to manage multiple projects in visual studio code in a very handy way.
It helps you to easily access your projects, no matter where they are located. Don’t miss that important projects anymore. You can set projects your own Favorite, or choose for auto-detect VSCode projects, Git, Mercurial, and SVN repositories or any folder. You can save the current project in the manager at any point in time without any hesitation. Just need to type a name or even suggests a name to you automatically.

Features of Project Manager

  • Open projects in the same or new window and save any project as a favorite.
  • The project Manager status bar identifies the current project and helps you to improve your workflow.

9. Code Runner

CodeRunner is a free open-source question-type plug-in for Moodle that can run program code submitted by students in answer to a wide range of programming questions in many different languages. It is intended primarily for use in computer programming courses although it can be used to grade any question for which the answer is text. It is normally used in Moodle’s adaptive quiz mode; students paste in their code in answer to each programming question and get to see their test-case results immediately. They can then correct their code and resubmit, typically for a small penalty.

Features of Code Runner

  • Run code file of current active Text Editor and through the context menu of the explorer.
  • You can select the language to run and see the output in the output window.

10. Bracket Pair Colorizer

This is actually one of my favorite visual extensions for the VS Code.
The extension will colorize matching brackets and parenthesis, thus highlight the scope that the brackets close. If you write React, Vue or Angular code you most likely have quite a lot of brackets in your code. Bracket Pair Colorizer allows full control over which characters to match, and which colors to use based on developer preferences.

Features of Bracket Pair Colorizer

  • It matches (), [], and {} automatically, and allows the programmer to define and match custom brackets.
  • Programmers can choose a list of colors when configuring their brackets and may opt-in with a specific color for orphaned brackets.

11. GitLens

GitLens is an open-source extension for Visual Studio Code created by Eric Amodio. It supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.

The GitLens simply helps you better understand code. Quickly glimpse into whom, why, and when a line or code block was changed. Jump back through history to gain further insights as to how and why the code evolved. Effortlessly explore the history and evolution of a codebase.

Features of GitLens

  • Users can quickly toggle between various sets of settings using custom-defined modes.
  • It supports many powerful commands for exploring commits and histories, comparing and navigating revisions, stash access, repository status, etc.

Check out top Google Chrome extensions

Conclusion

This is it. Thank you for reading the article. If you found the article then don’t be cheap to share it on social media.
These VS Code extensions that you can try at least once I’m sure it will boost your productivity. Although it was quite hard for me to limit myself making this list as vs code offers numerous extensions that the useful and really productive.

Related Posts

Leave a Comment