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:
- Speed is very fast and light.
- Search files super fast, almost instantly.
- Has all the features like some other code editors.
- There are many beautiful themes and customization support.
- Many horrible extensions.
You read 5 above is enough to understand. Now let’s get into business.
Set themes, icons and fonts
I am using a theme called Noctis. Specifically, the Noctis Obscuro version.
This topic has extremely good contrast, looks very happy.
The default icon of Visual Studio Code is blind so I installed another icon set called Material Icon Theme
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.
Auto Rename Tag
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.
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.
This utility will apply different colors where your indentation makes it easier to identify the code.
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.
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.
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 …
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
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.Keywords: Front End , Extensions , Visual Studio Code