<h1 id="heading-theme-extensions">Theme Extensions</h1>
<ol>
<li>One Dark Pro</li>
</ol>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1653240203987/LtmI8lMyw.png" alt="image.png" /></p>
<p><a target="_blank" href="https://www.bing.com/ck/a?!&amp;&amp;p=7b32d6e3a677426c0c25b47746fc52a22027ae2843ec2dcce7ef568eac2a3257JmltdHM9MTY1MzI0MDEyOSZpZ3VpZD1lYWI4ZGQ3NS0wY2IyLTQ2MzMtYmQwYi02YWRmNzAwYmUyZmUmaW5zaWQ9NTE1Nw&amp;ptn=3&amp;fclid=b5679516-d9f3-11ec-ae07-f101243a13ef&amp;u=a1aHR0cHM6Ly9tYXJrZXRwbGFjZS52aXN1YWxzdHVkaW8uY29tL2l0ZW1zP2l0ZW1OYW1lPWFkcmlhbndpbGN6eW5za2kub25lLWRhcmstcHJv&amp;ntb=1">Install the extension</a></p>
<ol>
<li>Material Theme</li>
</ol>
<h3 id="heading-light-blue">Light Blue</h3>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1653240519674/F3rSq1ogN.png" alt="image.png" /></p>
<h3 id="heading-black">Black</h3>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1653240475771/SqoBjujwC.png" alt="image.png" /></p>
<h3 id="heading-white">White</h3>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1653240488918/rESUVTPWh.png" alt="image.png" /></p>
<h3 id="heading-dark-navy">Dark Navy</h3>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1653240505604/xlyiuQ2rg.png" alt="image.png" /></p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1653240421566/s8N3M3xfZ.png" alt="image.png" /></p>
<p><a target="_blank" href="https://www.bing.com/ck/a?!&amp;&amp;p=db218c0ceaa4d9fd554a77e572246b5a281242441ff21d2b24a61022efc91a87JmltdHM9MTY1MzI0MDM4MiZpZ3VpZD1iNDAxODhjMC0xYjEwLTRlYzYtYTI3ZC01ODQ4NGQ4YTk2YjcmaW5zaWQ9NTIyNw&amp;ptn=3&amp;fclid=4caa2cc2-d9f4-11ec-bef4-28c6661aacea&amp;u=a1aHR0cHM6Ly9tYXJrZXRwbGFjZS52aXN1YWxzdHVkaW8uY29tL2l0ZW1zP2l0ZW1OYW1lPWVxdWludXNvY2lvLnZzYy1tYXRlcmlhbC10aGVtZQ&amp;ntb=1">Install the extension</a></p>
<ol>
<li>GitHub Theme</li>
</ol>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1653240746405/LNWgtAtCG.png" alt="image.png" /></p>
<p><a target="_blank" href="https://www.bing.com/ck/a?!&amp;&amp;p=6aeaf75d35b51e7d79f6a46a3d17f536818dcec3bc86028ae82310a268356af8JmltdHM9MTY1MzI0MDcwMiZpZ3VpZD01NzA3MTVkNi02N2EzLTQ3MDUtOTI1My1hMzg0YzYwYzMzYWEmaW5zaWQ9NTE4Mg&amp;ptn=3&amp;fclid=0b3b7ef1-d9f5-11ec-8c29-dbf2d6398ea9&amp;u=a1aHR0cHM6Ly9tYXJrZXRwbGFjZS52aXN1YWxzdHVkaW8uY29tL2l0ZW1zP2l0ZW1OYW1lPUdpdEh1Yi5naXRodWItdnNjb2RlLXRoZW1l&amp;ntb=1">Install the extension</a></p>
<ol>
<li>Netlify Theme</li>
</ol>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1653241225199/9AmJtLgxc.png" alt="image.png" /></p>
<p><a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=austincondiff.netlify-vscode-theme">Install the extension</a></p>
<ol>
<li>Palenight Theme</li>
</ol>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1653241323737/FCiY0E1n2.png" alt="image.png" /></p>
<p><a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=whizkydee.material-palenight-theme">Install extension</a></p>
<h1 id="heading-react-extensions">React Extensions</h1>
<ol>
<li>ES7 React/Redux/GraphQL/React-Native snippets</li>
</ol>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1653240301192/JZTmsHOAf.png" alt="image.png" /></p>
<p><a target="_blank" href="https://www.bing.com/ck/a?!&amp;&amp;p=80b7612494be0ea5f15d78b4f196eeb8efa5b02b4525c597225384e6e343b877JmltdHM9MTY1MzI0MDI1OCZpZ3VpZD05OGQ3ZGI3ZS1iOTAwLTQ3OGQtODViNC02OTBiZTUwMjUxMjUmaW5zaWQ9NTEzNA&amp;ptn=3&amp;fclid=0266a88e-d9f4-11ec-a49d-db2c875ff01c&amp;u=a1aHR0cHM6Ly9tYXJrZXRwbGFjZS52aXN1YWxzdHVkaW8uY29tL2l0ZW1zP2l0ZW1OYW1lPWRtZWVuaHVpcy5lczctcmVhY3QtanMtc25pcHBldHMtd2l0aC1zZW1pY29sb25z&amp;ntb=1">Install the extension</a></p>
<ol>
<li>JavaScript (ES6) code snippets</li>
</ol>
<p><a target="_blank" href="https://www.bing.com/ck/a?!&amp;&amp;p=fbaff7147b4b54140a688aac5c9870dad817caa745a5d17bee671ec277b3a06eJmltdHM9MTY1MzI0MDc4OSZpZ3VpZD02MDE2ZWM1NS05NDVkLTQ0MzItODc1Ni0xYjJmNTg3NDJjYTgmaW5zaWQ9NTEzOQ&amp;ptn=3&amp;fclid=3edb5e4b-d9f5-11ec-b778-0d33c8cb5563&amp;u=a1aHR0cHM6Ly9tYXJrZXRwbGFjZS52aXN1YWxzdHVkaW8uY29tL2l0ZW1zP2l0ZW1OYW1lPXhhYmlrb3MuSmF2YVNjcmlwdFNuaXBwZXRz&amp;ntb=1">Install the extension</a></p>
<h1 id="heading-format-text">Format Text</h1>
<ol>
<li>Prettier – Code formatted</li>
</ol>
<p><a target="_blank" href="https://www.bing.com/ck/a?!&amp;&amp;p=640768aab057ccbb0736c6214b37569d0199423eead3b3f7cc4226f54ec186d5JmltdHM9MTY1MzI0MDYxNiZpZ3VpZD1iNGRmOGRlNi1jMGU3LTQwZDYtYTkxOS1hOTlhYWUyZjc0NjgmaW5zaWQ9NTE3NA&amp;ptn=3&amp;fclid=d7adc718-d9f4-11ec-8d82-05c0f22f2f38&amp;u=a1aHR0cHM6Ly9tYXJrZXRwbGFjZS52aXN1YWxzdHVkaW8uY29tL2l0ZW1zP2l0ZW1OYW1lPWVzYmVucC5wcmV0dGllci12c2NvZGU&amp;ntb=1">Install the extension</a></p>
<h1 id="heading-compilers">Compilers</h1>
<ol>
<li>Live Sass Compiler</li>
</ol>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1653241091486/IN4rCMGxU.gif" alt="AnimatedPreview.gif" /></p>
<p><a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass">Install the extension</a></p>
<h1 id="heading-bonus-extensions">Bonus Extension(s)</h1>
<ol>
<li>Path Intellisense</li>
</ol>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1653241424869/cjKC3fG8xI.gif" alt="iaHeUiDeTUZuo.gif" /></p>
<p><a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense">Install the extension</a></p>
<ol>
<li>Polacode</li>
</ol>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1653241669707/9eoCwD6vk.gif" alt="usage.gif" /></p>
<p><a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=pnp.polacode">Install the extension</a></p>
<ol>
<li>Tailwind CSS IntelliSense</li>
</ol>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1653241656195/IcfhxzlUD.png" alt="image.png" /></p>
<p><a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss">Install the extension</a></p>


# Theme Extensions
1. One Dark Pro

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1653240203987/LtmI8lMyw.png align="left")

[Install the extension](https://www.bing.com/ck/a?!&&p=7b32d6e3a677426c0c25b47746fc52a22027ae2843ec2dcce7ef568eac2a3257JmltdHM9MTY1MzI0MDEyOSZpZ3VpZD1lYWI4ZGQ3NS0wY2IyLTQ2MzMtYmQwYi02YWRmNzAwYmUyZmUmaW5zaWQ9NTE1Nw&ptn=3&fclid=b5679516-d9f3-11ec-ae07-f101243a13ef&u=a1aHR0cHM6Ly9tYXJrZXRwbGFjZS52aXN1YWxzdHVkaW8uY29tL2l0ZW1zP2l0ZW1OYW1lPWFkcmlhbndpbGN6eW5za2kub25lLWRhcmstcHJv&ntb=1)

2. Material Theme


### Light Blue

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1653240519674/F3rSq1ogN.png align="left")

### Black

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1653240475771/SqoBjujwC.png align="left")

### White

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1653240488918/rESUVTPWh.png align="left")

### Dark Navy

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1653240505604/xlyiuQ2rg.png align="left")

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1653240421566/s8N3M3xfZ.png align="left")


[Install the extension](https://www.bing.com/ck/a?!&&p=db218c0ceaa4d9fd554a77e572246b5a281242441ff21d2b24a61022efc91a87JmltdHM9MTY1MzI0MDM4MiZpZ3VpZD1iNDAxODhjMC0xYjEwLTRlYzYtYTI3ZC01ODQ4NGQ4YTk2YjcmaW5zaWQ9NTIyNw&ptn=3&fclid=4caa2cc2-d9f4-11ec-bef4-28c6661aacea&u=a1aHR0cHM6Ly9tYXJrZXRwbGFjZS52aXN1YWxzdHVkaW8uY29tL2l0ZW1zP2l0ZW1OYW1lPWVxdWludXNvY2lvLnZzYy1tYXRlcmlhbC10aGVtZQ&ntb=1)

3. GitHub Theme

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1653240746405/LNWgtAtCG.png align="left")

[Install the extension](https://www.bing.com/ck/a?!&&p=6aeaf75d35b51e7d79f6a46a3d17f536818dcec3bc86028ae82310a268356af8JmltdHM9MTY1MzI0MDcwMiZpZ3VpZD01NzA3MTVkNi02N2EzLTQ3MDUtOTI1My1hMzg0YzYwYzMzYWEmaW5zaWQ9NTE4Mg&ptn=3&fclid=0b3b7ef1-d9f5-11ec-8c29-dbf2d6398ea9&u=a1aHR0cHM6Ly9tYXJrZXRwbGFjZS52aXN1YWxzdHVkaW8uY29tL2l0ZW1zP2l0ZW1OYW1lPUdpdEh1Yi5naXRodWItdnNjb2RlLXRoZW1l&ntb=1)

4. Netlify Theme

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1653241225199/9AmJtLgxc.png align="left")

[Install the extension](https://marketplace.visualstudio.com/items?itemName=austincondiff.netlify-vscode-theme)

5. Palenight Theme


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1653241323737/FCiY0E1n2.png align="left")

[Install extension](https://marketplace.visualstudio.com/items?itemName=whizkydee.material-palenight-theme)

# React Extensions

1. ES7 React/Redux/GraphQL/React-Native snippets

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1653240301192/JZTmsHOAf.png align="left")

[Install the extension](https://www.bing.com/ck/a?!&&p=80b7612494be0ea5f15d78b4f196eeb8efa5b02b4525c597225384e6e343b877JmltdHM9MTY1MzI0MDI1OCZpZ3VpZD05OGQ3ZGI3ZS1iOTAwLTQ3OGQtODViNC02OTBiZTUwMjUxMjUmaW5zaWQ9NTEzNA&ptn=3&fclid=0266a88e-d9f4-11ec-a49d-db2c875ff01c&u=a1aHR0cHM6Ly9tYXJrZXRwbGFjZS52aXN1YWxzdHVkaW8uY29tL2l0ZW1zP2l0ZW1OYW1lPWRtZWVuaHVpcy5lczctcmVhY3QtanMtc25pcHBldHMtd2l0aC1zZW1pY29sb25z&ntb=1)

2. JavaScript (ES6) code snippets

[Install the extension](https://www.bing.com/ck/a?!&&p=fbaff7147b4b54140a688aac5c9870dad817caa745a5d17bee671ec277b3a06eJmltdHM9MTY1MzI0MDc4OSZpZ3VpZD02MDE2ZWM1NS05NDVkLTQ0MzItODc1Ni0xYjJmNTg3NDJjYTgmaW5zaWQ9NTEzOQ&ptn=3&fclid=3edb5e4b-d9f5-11ec-b778-0d33c8cb5563&u=a1aHR0cHM6Ly9tYXJrZXRwbGFjZS52aXN1YWxzdHVkaW8uY29tL2l0ZW1zP2l0ZW1OYW1lPXhhYmlrb3MuSmF2YVNjcmlwdFNuaXBwZXRz&ntb=1)


# Format Text

1. Prettier – Code formatted

[Install the extension](https://www.bing.com/ck/a?!&&p=640768aab057ccbb0736c6214b37569d0199423eead3b3f7cc4226f54ec186d5JmltdHM9MTY1MzI0MDYxNiZpZ3VpZD1iNGRmOGRlNi1jMGU3LTQwZDYtYTkxOS1hOTlhYWUyZjc0NjgmaW5zaWQ9NTE3NA&ptn=3&fclid=d7adc718-d9f4-11ec-8d82-05c0f22f2f38&u=a1aHR0cHM6Ly9tYXJrZXRwbGFjZS52aXN1YWxzdHVkaW8uY29tL2l0ZW1zP2l0ZW1OYW1lPWVzYmVucC5wcmV0dGllci12c2NvZGU&ntb=1)

# Compilers

1. Live Sass Compiler

![AnimatedPreview.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1653241091486/IN4rCMGxU.gif align="left")

[Install the extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass)

# Bonus Extension(s)

1. Path Intellisense

![iaHeUiDeTUZuo.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1653241424869/cjKC3fG8xI.gif align="left")

[Install the extension](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)

2. Polacode

![usage.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1653241669707/9eoCwD6vk.gif align="left")

[Install the extension](https://marketplace.visualstudio.com/items?itemName=pnp.polacode)

3. Tailwind CSS IntelliSense

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1653241656195/IcfhxzlUD.png align="left")

[Install the extension](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)


The Best Vs Code Extensions For 2022 💪💪

Theme Extensions

Light Blue

Black

White

Dark Navy

React Extensions

Format Text

Compilers

Bonus Extension(s)

Hello my name is Mohamed Ehab 
I am A Full-Stack Developer 
My Portfolio My Github Profile
