Top 5 Best VS Code Extensions for Frontend Developers in 2020


Hi! Let’s talk today about top 5 VS Code Extensions
for Frontend Developers in 2020. That’s my personal list of course. If this is your first time here and you want
to learn #Frontend and #JavaScript, start right now by subscribing, and don’t forget
to turn on the subtitles. [Music playing] The number one in my list is “Prettier – Code
formatter.” Prettier is an opinionated code formatter. It enforces a consistent style by parsing
your code and re-printing it with its own rules that take the maximum line length into
account, wrapping code when necessary. It works with JavaScript, TypeScript, JSX,
JSON, CSS, HTML, etc. I can format my document via a command or
set an option “Format On Save” and then it will be done automatically. The next one is “ESLint.” The extension uses the ESLint library installed
in the opened workspace folder. If the folder doesn’t provide one the extension
looks for a global install version. On new folders you might also need to create
a “.eslintrc” configuration file. You can do this by either using the VS Code
command or by running the eslint command in a terminal. I configured ESLint to work together with
Prettier. The next point in my list is “Bracket Pair
Colorizer.” This extension allows matching brackets to
be identified with colors. The user can define which characters to match,
and which colors to use. You can configure different rules to identify
brackets and add them some more colors, define your palette, show active scope, decorate
position in the ruler, etc. But I prefer the default configuration. One more useful extension is “Spelling Checker
for Visual Studio Code.” It’s a basic spell checker that works well
with the camelCase code. The goal of this spell checker is to help
catch common spelling errors while keeping the number of false positives low. I do like this extension; it’s like a second
pair of eyes during a pair programming that follows my grammar, so I don’t have to spend
my energy on that. You can add other dictionaries: German, Spanish,
Russian, etc. Add new words to the vocabulary or configure
ignored words. The last but not least point in my list is
an extension titled “Live Server.” It gives an ability to launch a local development
Server with a live reload feature for static and dynamic pages. You can customize Port Number, Server Root,
and the default browser. This server supports SVG, https, and proxy. It has CORS enabled and Multi-root workspace
supported. [Music playing] If you like this video give it “thumbs up”,
share it with your friends, subscribe to the channel and watch other episodes. Thanks for watching and keep going.

Add a Comment

Your email address will not be published. Required fields are marked *