The best plugins for VS Code - Frontend Developer
Tags: frontend, vscode, webdev, developer
Published: 2020-08-03 10:53:01

Are you a <strong>Frontend Developer</strong>? Fantastic!

Today, I want to suggest you the best plugins that you need in Visual Studio Code.


<h3>NPM Scripts TABS</h3>

If you are a Frontend Developer, you know what does it mean start a project with the terminal of VS Code and NPM. So, in Visual Studio Code you can add a tab "NPM Scripts" with the all scripts of your open package.json.

The steps to add the tab are:

1. Open VS Code
2. Go to Settings
3. Search: npm.enableScriptExplorer
4. Set to “Enable”
Now, you can see the tab “NPM Scripts”.


<h3>Emmet support</h3>

<img src="https://code.visualstudio.com/assets/docs/editor/emmet/emmet-vendor-prefix.gif" />

Emmet is a fantastic plugin to write code faster.
<em>How? It’s easy!</em>

With Emmet you can write abbreviation of code and it will compile automatically for you.

For example, in VS Code you can write: 

<div class="highlight"><pre class="highlight html"><code>ul>li*3</code></pre></div>

The result will:

<div class="highlight"><pre class="highlight html"><code>&lt;ul&gt;
  &lt;li&gt;&lt;/li&gt;
  &lt;li&gt;&lt;/li&gt;
  &lt;li&gt;&lt;/li&gt;
&lt;/ul&gt;</code></pre></div>

You can download Emmet from this link: https://code.visualstudio.com/docs/editor/emmet

<h3>MongoDB plugin</h3>

Another interesting plugin for VS Code is MongoDB plugin. 

Exactly, you can have a simple client of MongoDB (the readonly data and structure of your database MongoDB Cloud).

You need less than 5 minutes to install and configure your database into VS Code.

An example:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wzmcxwt62rodv4cva9z4.PNG)

It's very comfortable because you don't need to open another client or one browser.

You can download MongoDB plugin from this link: https://marketplace.visualstudio.com/items?itemName=mongodb.mongodb-vscode

<h3>Drawio</h3>

Do you like draw your Frontend infrastructure?

<img src="https://github.com/hediet/vscode-drawio/raw/master/docs/demo.gif" />

Drawio is the best plugin for VS Code for draw directly into the ide. With this plugin you don't need any external software.

Creating a file with the extension .drawio you will ready to draw a diagram with text, symbol, and other...

You can download Drawio plugin from this link: https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio

<h3>Custom font</h3>

In the last month I changed a lot of fonts, but finally I finded the best fonts (for me) for VS Code.

<em>Cascadia font!</em>

<strong>How to install a custom font?</strong>

1. Download Cascadia font on this link: https://github.com/microsoft/cascadia-code/releases
2. Install the TTF file on your laptop
3. Go to File -> Preferences -> Text Editors -> Font and in the textbox write "Cascadia Code"

<h3>Snipsnap</h3>

Snipsnap is a plugin similar to Emmet, but is more complete because with <strong>Snipsnap</strong> you can have a snippets of codes in VS Code in a lot of languages of code.

<img src="https://user-images.githubusercontent.com/2697570/73568644-23bc0180-4469-11ea-8b64-843c7a9a92d2.gif" />

At this link, you can find a list of snippets: https://github.com/snipsnapdev/snipsnap/tree/master/snippets/javascript

For example, in my ide I installed the React snippets. 
Now, if I write "React comp" and then I press a TAB on my keyboard the Snipsnap snippets complete automatically the syntax with a empty functional components in ReactJS.

You can download the Snipsnap on this link: https://marketplace.visualstudio.com/items?itemName=snipsnapdev.snipsnap-vscode

<h3>Conclusion</h3>

I hope to help you with this article. I think now you can write code faster :).

<a href="https://github.com/crtdaniele">Follow me on Github</a>
<a href="https://www.linkedin.com/in/daniele-carta-lugano/">Follow me on LinkedIn</a>