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
