Setup Visual Studio Code and Extensions for Front End Developer

3 minutes read

Hi, recently I switched to code with Visual Studio Code after a long time with Sublime Text 3.

I know that when you first switch to Visual Studio Code, you will definitely feel strange and encounter some unexpected problems.

So today I have written this article to help you quickly get acquainted with Visual Studio Code. Although it may not be understood immediately, the immediate setup is re-working environment, fonts, cool icons of the first. Then want to find out later, find out.

Visual Studio Code stands out from other code editors

I realized that power after I used it, so it has some strong points as follows:

  1. Speed ​​is very fast and light.
  2. Search files super fast, almost instantly.
  3. Has all the features like some other code editors.
  4. There are many beautiful themes and customization support.
  5. Many horrible extensions.

You read 5 above is enough to understand. Now let’s get into business.

Set themes, icons and fonts

Theme

I am using a theme called Noctis. Specifically, the Noctis Obscuro version.

This topic has extremely good contrast, looks very happy.

Icon

The default icon of Visual Studio Code is blind so I installed another icon set called Material Icon Theme

Font

I used https://github.com/tonsky/FiraCode instead of the default font

Especially, it also supports hyphen - is a trend now.

Because it does not support working languages, I will install another font as feedback, which is Roboto Mono font.

Extensions

Auto Rename Tag

Autoprefixer

Better Align

Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets

Help you build websites with Bootstrap faster.

Bracket Pair Colorizer 2

This utility helps to highlight curly braces and brackets to make it easier to identify the code

Code Spell Checker

This utility helps you refine your English writing. If you write an English word that is misspelled or doesn’t mean it will immediately report.

Color Highlight

This utility will display a colored square next to your CSS to make it easier to identify colors. No need to re-check the lost color.

indent-rainbow

This utility will apply different colors where your indentation makes it easier to identify the code.

Indenticator

This utility will highlight spots indented by dots.

IntelliSense for CSS class names in HTML

This utility will suggest you the class name, id for html based on their appearance in your project.

JavaScript (ES6) code snippets

This utility contains JavaScript syntax to help you write JavaScript quickly.

Live Server

The utility deploys our code to local quickly and real time.

Markdown All in One

This utility helps to prompt Markdown syntax and compile Markdown into real-time HTML for us to see.

Path Autocomplete

This utility automatically suggests and shows the files in the directory that we are about to insert.

Prettier - Code formatter

This extension helps beautify code files like HTML, CSS, JS …

TODO Highlight

With this extension we can highlight a comment starting with TODO, FIXME to use.

Visual Studio IntelliCode

This extension is manufactured by Microsoft using AI technology to help us beautify function names, scientific method names.

Some basic settings

Reasoning

Extensions up there must have been quite good already. Enough to use then, depending on you that choose to install all or one of them.

Wishing success and see you again.


Categories: Tricks

Keywords: Front End , Extensions , Visual Studio Code
Comments