Visual Studio Code Web Development Setup and Extensions
Video Tutorial
Web Development Code Editor
So if you have been looking for a good, extensible code editor that helps you during your journey as full stack web developer, there is visual studio code from Microsoft which is open source, has large support community and large extensions library that helps you pretty much on any task you need, so in this overview tutorial I’m going to explain why I user visual studio code for my daily basis and not any other code editor besides the extensions I use during my development career.
Why Visual Studio Code
So you are probably thinking of why I have gone specifically for visual studio code and not atom or sublime text, I know you can go for atom it is good as well, but visual studio code still wins the race, for a couple of reasons actually:
Performance: I like the editor for its perfect performance which actually runs perfectly while coding without crashes or typing-lag, no nothing like that, besides opening a huge amount of windows won’t slow down your machine.
Monthly Updates: Another thing is updates, each month there is a new update which brings new bug fixes, improvements and more features for developers.
Extensions: The Editor has a large Extensions Library that pretty much offers you an extension for any task you need to automate, which actually going to make your life easier especially as web-developer, all you need to do is click install.
So those are the major things that I find very useful for me (my opinion).
Extensions You Need
Auto Close Tag: close tags automatically for you.
Beautify: Actually everyone needs this, it makes your code readable and easy to understand (HTML, CSS, JS).
Bootstrap Snippets: And this is specifically for front-end designers, fast code completion speeds up your work progress.
Color Picker: Another One for Web Designers, helps you pick RGBA Colors for CSS.
Empty-Indent: Removes empty indentation on Save, just prettifying your code.
Html Boilerplate: Allow you to quickly create HTML5 Documents.
Indent-Rainbow: Very Useful for python developers, color your code indentation so you can identify indentation spaces easily.
Open In Browser: Let you quickly open your pages in the browser.
Material Theme: Nice Theme For the Editor.
Path Intellisense: Gives you quick look upon the paths of your working directory.
PHP Formater: Code Indentation and formatting for PHP Coders.
TODO Highlight: Adds a Yellow Color to your TODO Comments so you can easily notice them and fix your bugs.
vscode-icons: Very Nice set of icons on the side area of your editor, gives you a better experience.
Sublime Text Keymap: if you have used sublime before, you have definitely felled in love with the little code map on the upper corner of your editor that allows you to easily navigate your code, it is also available for vscode.
You can get Visual Studio Code from here.
