No matter whether you are a full-time developer
working with massive codebases on a regular basis,
or a mere hobbyist programmer – Visual Studio Code
is an excellent addition to your workflow. There is an
infinite number of Visual Studio Code extensions that
can make programming fun for beginners & increase
productivity for the more seasoned developers.
Bracket Pair Colorizer 2
The VS extension Bracket Pair Colorizer matches
corresponding brackets in your code with the same
color. This is a great help when you’re working with
things like nested components, objects, or functions
that all have brackets or parentheses.
With this simple extension, it’s much easier to find
matching pairs and understand your code. The
biggest advantage of this extension is improved
navigation and accessibility. It also makes it easier
for others to read and understand your code.
Better Comments
Better Comments is an extension used for writing
human-friendly comments in your code, which is
helpful for you and anyone who is reading source-
code (especially for teams). Descriptive, human-
friendly comments save so much time for everyone
involved.
With this VS extension, you can use the following
characters after a double forward slash // to add
easier commenting:
* - for highlighted text
! - for errors and warnings
? - for queries and questions
//
- for strikethrough
TODO
- for to-dos
Snippets
Snippets are an excellent add-on for productivity.
Snippets is a collection of various extensions for the
most commonly used programming languages.
The ES7 React/Redux/GraphQL..... snippet is a popular
extension, for example, that allows you to use and
create shorthands for things you do over and over
again.
React snippets → ES7 React/Redux/GraphQL/React-
Native snippets
Icons
Icons allows you to create descriptive icons to help
differentiate between files and folders. This makes
your code more visual, so it’s easier to work as teams,
return to code after some time, or even just make the
experience more fun. For example, you could change
the color of a default folder icon using the command
palette.
There are a few different Icons extensions : →
Material Icon Them
vscode-icon
Easy icon them
Nomo Dark Icon Theme
Themes
One dark pr
Shades of Purpl
Palenigh
Monokai Pr
Material Theme
GitLens
The GitLens extension combines the capabilities of Git
with VSCode that allows you to visualize code
authorship via Git. GitLens is great for understanding
code better, so you can learn who, why, and when
code was changed. It also allows you to explore the
history and evolution of a codebase.
It also has many other features to use such as
Revision navigation through file histor
A current line blame annotation at the end of the
line showing the commi
A status bar blame annotation for the commit &
author who last modified the current line
Auto-Close Tag
Using this tool is non-negotiable, every developer
needs to use this in their vscode toolbox, it will not only
catch possible ‘stupid’ errors but it is very handy, you
really don’t have to spend your precious energy
thinking about the small stuff like making sure you
don’t forget to close your tag.
Auto Rename Tag
While VSCode inherently highlights matching tags
and immediately adds closing tags whenever you
type an opening tag, Auto Rename Tag automatically
renames tags that you change.
The extension works for HTML, XML, PHP, and
JavaScript, and removes the need to change your tag
names twice.
Note : a few people in the comments have mentioned
that Auto Rename Tag is quite buggy, so proceed with
care.
Path Intellisense
With over a 4.2 Million downloads. Path Intellisense can
help with auto-completion for the imports or path
after calling a component, and trust me, it helped me
big time.
Why do we have to memorize the file’s entire path, it
just a waste of resources, when this tool can just do it
for you?
NPM Intellisense
It has almost the same functionality as path
Intellisense, but they create this one for npm
packages.
NPM without a doubt can be a pain not just on how it
eats up our memory, but there are just so many in
there that’s a bit difficult to track.
If you have been working or planning on taking Nodejs,
then you’d see how helpful this tool is, importing
several packages or modules, and there are like
thousands of them, you really can’t just memorize
their paths, right?
Import Cost
I’ve recently just bumped into this extension, it simply
calculates the size of your imports and I just find it
useful to be able to decide whether to just import the
entire package or simply just import the specific
modules.
It helps, and you’ll appreciate it when you start
working on extensive projects.
Turbo Console Log
This extension make debugging much easier by
automating the operation of writing meaningful log
message.
Todo+
Todo+ helps you manage todo lists with ease, Its
powerful, portable, easy to use and customizable..
You can do many amazing things with it such as
Custom colors
Replace default symbols with custom symbol
Custom special tag
View todos from a custom activity bar section
Timer, Timekeeping, Statistics, etc.
SVG
Its a powerful SVG language support extension.
Almost all the features you need to handle SVG files
such as:
SVG Live Preview and Export PN
Minify SVG with SVGO
SVG Full Auto Completion
Fast Color Picke
Document Symbol tree.
Code Time
Code Time is an open source plugin for automatic
programming metrics and time tracking in VS Code.
Code Time has feature called Flow Mode. It makes it
easy to eliminate distractions, mute notifications, and
stay focused when you are in flow.
Code Time also shows you a personalized dashboard
to summarizes your coding data - such as your code
time by project, lines of code, and keystrokes—today,
yesterday, last week, and over the last 90 days.
You can also see more advanced data visualizations
by clicking more data at software.com in the sidebar.
Code Spell Checker
Code Spell Checker helps you catch common spelling
errors. We often have spelling mistakes in our code
when declaring a variable, writing a comment, etc.
Code Spell Checker is a spell checker that works well
with camelCase code. Many of us write code in
camelCase, so its really helpful.
REST Client
REST client is a really helpful extensions for backend
developers, as it allows you to send HTTP request and
view the response directly in Visual Studio Code.
Before this, we had to use softwares like Postman,
Insomnia, etc. It has many features, you can learn
more about it here.
Visual Studio IntelliCode
The Visual Studio IntelliCode extension provides AI-
assisted development features for Python, TypeScript/
JavaScript, and Java developers in Visual Studio
Code, with insights based on understanding your
code context combined with machine learning.
This extension provides AI-assisted IntelliSense by
showing recommended completion items for your
code context at the top of the completions list.
Thank You for your attention, Subscribe to my youtube
channel for more Advanced Tutorials.
- JavaScript Mastery
jsmasterypro javascriptmastery
