Best VS Code Extensions in 2022
Published: 2022-02-07 09:58:24


![4f0ac3e0-visual_studio_code.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1644221468652/ZJFQ9tUoP.png)
Visual studio code is the most popular code editor build by Microsoft, javascript, typescript, HTML and CSS, is actually the technologies used to build this great product. so let us mention some of it is best extensions :

[**1- Tailwind CSS IntelliSense**](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss&ssr=false#overview)

![tailwindcss-opacity-min.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1644221532087/KKWipYHP6.jpeg)

Tailwind CSS IntelliSense enhances the Tailwind development experience by providing Visual Studio Code users with advanced features such as autocomplete, syntax highlighting, and linting.

**Install **923,386 +

> **Features**

**Autocomplete**

Intelligent suggestions for class names, as well as CSS function and directives.

![autocomplete.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1644221730568/WrPgG_7TT.png)

**Linting**

Highlights errors and potential bugs in both your CSS and your markup.

![linting.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1644221756890/vhgEaZ_2t.png)

**Hover Preview**

See the complete CSS for a Tailwind class name by hovering over it.

![hover.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1644221785021/n1fz4BASN.png)

**CSS Syntax Highlighting**

Plus you can see that Tailwind features are highlighted correctly.


[**2- Prettier**](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

![icon.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1644221933776/5-z0fj24O.png)
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.

**install** 18,448,023 +

> **How To Format**

just select some code and right click or just right click then chose format with prettier, and you will see a nice code makes you looks like a pro, but of course your are a pro :)


![Screen Shot 2022-02-06 at 3.32.07 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1644222029064/0tQ5o9_cv.png)


[**3- ES7+ React/Redux/React-Native snippet**](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)

![react.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1644222060697/G7wNW1ZZY.png)
React snippets are how you can speed up your workflow. It is the ways to save your time when coding.
After installing the VS Code Extension (may have to restart VS Code?), you can use the snippets by typing the shortcut and hitting Tab or Enter.

**install** 4,447,249 +

> **The Snippets**

**imr**

to import react, but with react v17 may you do not need this :)

![rmi.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1644222165571/vZKIjaFSm.png)

**fre**

to create for each iteration

![fre.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1644222208724/mxkwW0S9W.png)

**rfc**

to create react functional component

![rfc.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1644222238645/WO995asZt.png)

and much more

https://github.com/dsznajder/vscode-react-javascript-snippets/blob/HEAD/docs/Snippets.md