Useful

VS Code

Extensions
Created by JS Mastery

Visit jsmastery.pro for more

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.
https://jsmastery.pro JavaScript Mastery
Brought to you by JSM
This guide will provide you with useful
information and actionable steps, but if you truly
want to dominate the competition and secure a
high-paying job as a full-stack software
developer, jsmastery.pro is the answer.
Read until the end for more information and
special discounts!

help onng your

// With yoanurd wa
projectsI wa tchi
s ab
videosyr React jo le to laa nd a
$110k/ b at !
o, CA
company in San Dieg
― Jake Simon gic Media
at Tra
Developer
Full Stack

Say to JSM Pro

<header> ”>
<section id=”hero </h1>
ar t Le ar ni ng
<h1> St
<h2>
<!-- React.js -->
<!-- Next.js -->
Web Development rters
<!-- Blockchain --
> 500k+ suppo

<!-- Solidity -->

</h2>
h1>
<h1> Right Now </

https://jsmastery.pro JavaScript Mastery

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-
https://jsmastery.pro JavaScript Mastery
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.

https://jsmastery.pro JavaScript Mastery

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

https://jsmastery.pro JavaScript Mastery

 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

https://jsmastery.pro JavaScript Mastery

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.

https://jsmastery.pro JavaScript Mastery

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

https://jsmastery.pro JavaScript Mastery

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

https://jsmastery.pro JavaScript Mastery

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.

https://jsmastery.pro JavaScript Mastery

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
https://jsmastery.pro JavaScript Mastery
 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.
https://jsmastery.pro JavaScript Mastery
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.

https://jsmastery.pro JavaScript Mastery

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.

https://jsmastery.pro JavaScript Mastery

JS Mastery Pro
Looking to advance your career and
understand the concepts & technologies that
top-shelf employers are looking for?

JS Mastery Pro offers two courses that will

help you master libraries, tools, and
technologies such as React.js, Next.js,
Material UI, Solidity, Redux, and many more.

If your goal is to earn a high income while

working on projects you love, JS Mastery Pro
can help you develop your skills to become
a top candidate for lucrative employment
and freelance positions.

https://jsmastery.pro JavaScript Mastery

Become a React.js master as you create a stunning
Netflix clone streaming app to showcase movies, actor
bios, and more with advanced AI voice functionality.

Leverage Web 3.0 and blockchain technology to build

a comprehensive NFT platform where users can
discover, create, purchase, & sell non-fungible tokens.

https://jsmastery.pro JavaScript Mastery

Plus, if you really want to make a splash and add

multiple group projects to your portfolio, join the JSM

Masterclass Experience to set yourself above the rest

and impress hiring managers.

Collaborate with other developers on exciting monthly

group projects, have your code reviewed by industry

experts, and participate in mock interviews and live

Q&As. With two masterclass options available, this is

the best way to truly launch your programming career

and secure the job of your dreams!

Visit jsmastery.pro today to get started!

https://jsmastery.pro JavaScript Mastery