A while back I shared my favourite VS Code extensions exclusively to the <a href="/newsletter">CodePulse newsletter</a> subscribers. I now decided to share them with all of you!
If you are not yet subscribed to the newsletter, be sure to <a href="/newsletter">do it now</a>! Doesn't cost you anything.
I've been using VS Code quite a while now and even though the plain editor is great, there is plenty of useful extensions that you can install to make it even better. Here are some of my favourites.
<h3>GitLens</h3>
<img src="./images/gitlens.png" alt="VS Code extension GitLens">
GitLens supercharges the Git capabilities built into Visual Studio Code. With it you can easily and fast see who/when/why given code was added which gives you better understanding of the code at hand. I absolutely love this extensions since I no longer have to browse through Git logs or commits to find when part of the code was added and who committed it.
You can find it from the Visual Studio Marketplace: <a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens">https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens</a>
<h3>Highlight Matching Tag</h3>
<img src="./images/highlight-matching-tag.gif" alt="VS Code extension Highlight Matching Tag">
This extension helps in matching opening and closing tags. I have found it very handy especially with larger components and elements that have many nested elements inside of them.
You can find it from the Visual Studio Marketplace: <a href="https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag">https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag</a>
<h3>Settings Sync</h3>
<img src="./images/settings-sync.png" alt="VS Code extension Settings Sync">
Useful if you have multiple computers you work on. This extension synchronizes settings, snippets, tehems, file icons, launch, keybindings, workspace and extensions across multiple machines using GitHub Gist.
You can find it from the Visual Studio Marketplace: <a href="https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync">https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync</a>
<h3>Import Cost</h3>
<img src="./images/import-cost.png" alt="VS Code extension Import Cost">
For me this is in some projects a lifesaver. When you need to make your bundle as small as possible this extension is very handy. It will display inline in the editor the size of the imported package. The extension utilizes webpack with babili-webpack-plugin in order to detect the imported size.
You can find it from the Visual Studio Marketplace: <a href="https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost">https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost</a>
<hr>
Do you think I missed some? Comment below your favourite extensions!


A while back I shared my favourite VS Code extensions exclusively to the [CodePulse newsletter](/newsletter) subscribers. I now decided to share them with all of you!

_If you are not yet subscribed to the newsletter, be sure to [do it now](/newsletter)! Doesn't cost you anything._

I've been using VS Code quite a while now and even though the plain editor is great, there is plenty of useful extensions that you can install to make it even better. Here are some of my favourites.

### GitLens

![VS Code extension GitLens](/blog-posts/best-extensions-for-vs-code-in-2020/images/gitlens.png)

GitLens supercharges the Git capabilities built into Visual Studio Code. With it you can easily and fast see who/when/why given code was added which gives you better understanding of the code at hand. I absolutely love this extensions since I no longer have to browse through Git logs or commits to find when part of the code was added and who committed it.

You can find it from the Visual Studio Marketplace: [https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

### Highlight Matching Tag

![VS Code extension Highlight Matching Tag](/blog-posts/best-extensions-for-vs-code-in-2020/images/highlight-matching-tag.gif)

This extension helps in matching opening and closing tags. I have found it very handy especially with larger components and elements that have many nested elements inside of them.

You can find it from the Visual Studio Marketplace: [https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag](https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag)

### Settings Sync

![VS Code extension Settings Sync](/blog-posts/best-extensions-for-vs-code-in-2020/images/settings-sync.png)

Useful if you have multiple computers you work on. This extension synchronizes settings, snippets, tehems, file icons, launch, keybindings, workspace and extensions across multiple machines using GitHub Gist.

You can find it from the Visual Studio Marketplace: [https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)

### Import Cost

![VS Code extension Import Cost](/blog-posts/best-extensions-for-vs-code-in-2020/images/import-cost.png)

For me this is in some projects a lifesaver. When you need to make your bundle as small as possible this extension is very handy. It will display inline in the editor the size of the imported package. The extension utilizes webpack with babili-webpack-plugin in order to detect the imported size.

You can find it from the Visual Studio Marketplace: [https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)

---

Do you think I missed some? Comment below your favourite extensions!


Here is my top picks for the best VS Code extensions in 2020. These are a must have for every web developer using VS Code.

Best extensions for VS Code in 2020

<img src="./images/rome-js.jpg" alt="Rome js">
Facebook just introduced a new experimental JavaScript toolchain tool called <a href="https://romejs.dev/">Rome</a>.
Rome is an experimental JavaScript toolchain. It was started by <a href="https://twitter.com/sebmck">Sebastian McKenzie</a>, author of Babel and Yarn and member of the React Native team at Facebook.
Rome includes compiler, linter, formatter, bundler, testing framework and more. It supports processing JSX, <a href="/blog/my-first-time-using-flow-for-static-type-checking/">Flow</a> and TypeScript code. It is not production ready and is under active development. The current focus of the Rome team is linting and they welcome contributors (well, who doesn’t)!
It aims to be "a comprehensive tool for anything related to the processing of JavaScript source code". It is not collection of existing tools and it actually doesn’t use any third-party dependencies.
The documentation of Rome is quite narrow by having installation, getting started and contributing sections, which is understandable given the stage of the project. Rome is not available via npm and it must be installed from Github. So it is self-hosted and it compiles itself with an old version.
I am very interested to see what direction Rome will go and if it will be the thing in the future. Right now it is still in the early stages and only time will tell what will come of it.
What do you think?


![Rome js](/blog-posts/rome-new-all-in-one-javascript-toolchain/images/rome-js.jpg)

Facebook just introduced a new experimental JavaScript toolchain tool called [Rome](https://romejs.dev/).

Rome is an experimental JavaScript toolchain. It was started by [Sebastian McKenzie](https://twitter.com/sebmck), author of Babel and Yarn and member of the React Native team at Facebook.

Rome includes compiler, linter, formatter, bundler, testing framework and more. It supports processing JSX, [Flow](/blog/my-first-time-using-flow-for-static-type-checking/) and TypeScript code. It is not production ready and is under active development. The current focus of the Rome team is linting and they welcome contributors (well, who doesn’t)!

It aims to be "a comprehensive tool for anything related to the processing of JavaScript source code". It is not collection of existing tools and it actually doesn’t use any third-party dependencies.

The documentation of Rome is quite narrow by having installation, getting started and contributing sections, which is understandable given the stage of the project. Rome is not available via npm and it must be installed from Github. So it is self-hosted and it compiles itself with an old version.

I am very interested to see what direction Rome will go and if it will be the thing in the future. Right now it is still in the early stages and only time will tell what will come of it.

What do you think?


Facebook just introduced a new experimental javascript toolchain tool called Rome. It doesn’t use any third-party dependencies.

Rome - New All-in-one Javascript Toolchain

<a href="https://skl.sh/2XAKn7u">
<img src="./images/react-basic-course-thumb.png" alt="React Fundamentals Course">
</a>
I’m excited to announce that I just published my new online course "React for Beginners: Complete Guide to Mastering React Fundamentals" on <a href="https://skl.sh/2XAKn7u">Skillshare</a>!
I have received by far the most requests to create a React fundamentals course, and I’m super happy that I can finally share it with you!
On the course I will teach, as the name suggests, the very fundamentals of React.
Here are some of the topics we will cover on the course:
<ul>
<li>React Elements &#x26; Components</li>
<li>Working with JSX</li>
<li>Using data with Props</li>
<li>State</li>
<li>How to create stateless &#x26; stateful components</li>
<li>Building your first application</li>
</ul>
If you know JavaScript but you are not yet familiar with React or maybe you have at some point tried to learn React but never really got the hang of it, well in that case this course is a must watch for you!
You can find it from <a href="https://skl.sh/2XAKn7u">Skillshare</a>. Best part is that you can get it for free! When you register to Skillshare through <a href="https://skl.sh/2XAKn7u">this link</a>, you get 2 months of Skillshare premium membership for free. You can cancel your membership anytime, so there is no obligations.
With the Skillshare premium membership you can watch my courses and every other course they have (there is like tens of thousands of them) for the next 2 months. So it's really a no-brainer.
If React is something you want to learn, I strongly recommend you check the course out! I would also really appreciate if you let me know what you think of it!
If you are already familiar with React, you might be interested on my <a href="/blog/rich-text-editing-in-react-with-draft-js-course/">Draft.js course</a>. Draft.js is a rich text editor framework for React. If you need editor or text input component that can handle rich text content, Draft.js is a great choice. Like React, it is also originally created by Facebook.


[
![React Fundamentals Course](/blog-posts/react-for-beginners-complete-guide-to-mastering-react-fundamentals/images/react-basic-course-thumb.png)
](https://skl.sh/2XAKn7u)

I’m excited to announce that I just published my new online course "React for Beginners: Complete Guide to Mastering React Fundamentals" on [Skillshare](https://skl.sh/2XAKn7u)!

I have received by far the most requests to create a React fundamentals course, and I’m super happy that I can finally share it with you!

On the course I will teach, as the name suggests, the very fundamentals of React.

Here are some of the topics we will cover on the course:

- React Elements & Components
- Working with JSX
- Using data with Props
- State
- How to create stateless & stateful components
- Building your first application

If you know JavaScript but you are not yet familiar with React or maybe you have at some point tried to learn React but never really got the hang of it, well in that case this course is a must watch for you!

You can find it from [Skillshare](https://skl.sh/2XAKn7u). Best part is that you can get it for free! When you register to Skillshare through [this link](https://skl.sh/2XAKn7u), you get 2 months of Skillshare premium membership for free. You can cancel your membership anytime, so there is no obligations.

With the Skillshare premium membership you can watch my courses and every other course they have (there is like tens of thousands of them) for the next 2 months. So it's really a no-brainer.

If React is something you want to learn, I strongly recommend you check the course out! I would also really appreciate if you let me know what you think of it!

_If you are already familiar with React, you might be interested on my [Draft.js course](/blog/rich-text-editing-in-react-with-draft-js-course/). Draft.js is a rich text editor framework for React. If you need editor or text input component that can handle rich text content, Draft.js is a great choice. Like React, it is also originally created by Facebook._


If you know JavaScript but you are not yet familiar with React fundamentals, you are in the right place! This is a must watch for every web developer.

Rome - New All-in-one Javascript Toolchain

Subscribe to the newsletter