Modern web development is all about productive tools like Emmet, Intelli-sense and more. The best part is that Debugging, Terminal and Git are already inside of Visual Studio Code. This Data Wolf README will guide you on how to master modern web dev tasks with tips on customizing this amazing tool with extensions like FiraCode font, visual themes like Dracula and icons for all of your code.

IMG

Step 1

Get VS Code

You can download Visual Studio Code here.

Step 2

Hello CMD + SHIFT + P

To install extension:

CMD + SHIFT + P

select:

Extensions: install extensions

Step 3

Install a cool theme

Now we are ready for our first extension, a dark theme! Type:

dracula at night

Install and reload for the theme to take effect.

Step 4

Install the FiraCode font

Let’s install FiraCode so we can get a nice set of operators for greater readibility.

Type:

CMD + SHIFT + P

Select:

Preferences: Open User Settings

Scroll down to the font section and paste the following:

'Fira Code iScript', 'Fira Code', 'Fira Code Light', 'Monaco', 'Courier New', 'monospace'

Step 5

Install Emmet and Intellisenses

Emmet support is built right into Visual Studio Code, no extension is required. Emmet 2.0 has support for the majority of the Emmet Actions including expanding Emmet abbreviations and snippets.

To install Intellisenses just search for these:

Path Intellisense
CSS Intellisense

and so on…

Resources Used:

License

MIT © Jonathan Barrios