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.

00:43 - 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.

01:23 - 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.

02:38 - 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. .