Visual Studio Code (Front-End & Back-End) Web Developer Setup & Extensions

Video Tutorial

Visual Studio Code

Visual Studio is one of the best Modern Code Editors you can put your hands on, helps you grow as a Web Developer, Software Engineer or just someone how loves to check out source codes or read text files with a large support community and a huge set of extensions pretty much allows you to do everything that the main core misses or doesn’s support and that what makes it so robust and reliable, I actually have been using it for 2 years now and I’m still enjoying opening it and start coding each time a sit on my desk chair, it’s doesn’t feel fake or low quality at all.

Of course you can use other Editors which are great of course (for ex: Atom) or sublime, if you want you can check out VSCode vs Atom Tutorial which compares between the two editors and gives you each one’s cons and pros to actually see which one to use depending on your favorite set of features, layout or general them.

You can grab Visual Studio Code From Official VSCode Website.

Also, you may wanna check my other Tutorial about VSCode Setup and Extensions.

Front-End Extensions

Live Server (Local Development Server with Auto-Reload Support).

Visual Studio Dark Theme (Elegant Dark theme of Visual Studio for VSCode).

Color Picker (a Quick Hex/RGB/HSL Color Picker on your CSS and it will let you change/view the color with opacity support with a nice and minimal color picker).

Debugger for Chrome (Quickly test and debug your apps and script right from Chrome alongside VSCode).

Autoprefixer (Automatically add Vendor SCSS/SASS/CSS Support for ex: -webkit-display).

Auto Rename Tag (make your job editing HTML tags and renaming it much easier).

Back-End Extensions

For the Backend, it actually depends on the language or the framework you are currently using to develop your backend structure so it’s more likely to find the technology on the extensions marketplace, but here is what most of the devs use:

PHP Intelephense / PHP IntelliSense (Advanced IntelliSense for PHP Programming with support for package managers and modules).

Laravel 5 Snippets (Snippets for quick typing supporting blade language).

DotENV (Support for .dotenv file and Advanced Syntax Support).

Python (Python language Support and Intellisense it comes preinstalled with the new versions of VSCode).

Java / Java Debugger (Java language Support and Intellisense with an awesome debugger).

Full Stack Extensions (Common)

The Full Stack Developer Extensions are pretty much needed by both developers either front-end or back-end you will definitely need one of those since they are very important for a smooth development and awesome coding experience as well as less buggy code.

Turbo Console Log (Automate the process of writing helpful log messages and deleting them with one click).

Prettier (Code Formatting made easy, format on save or from the command palate).

Todo Tree (More than a TODO, highlight todos, bugs, fixme and much more).

Path Intellisense (Quickly find files/directories on your project when trying to requiring source files or assets).

Polacode (For Instagram and Social media users you can export your code snippets in a very nice format and share it with the community as images).

VSCode Icon (Nice and Elegant Icons made for all programming languages and different type of assets).

ESLint (Advanced Linting for Javascript/Typescript the most recommended Extensions to use for javascript (ES6).

Code Spell Check (Enable spell checking for your code so you would have no more spell related errors and bugs).

Code Runner (Not only for Web Developer but this extension will allow you to run any language’s code either through a compiler or an interpreter).

EditorConfig for VS Code (Share same VSCode configuration across different computers and different Editors (Atom) Official Website).

WakaTime (Monitor and Keep an eye on your coding activity, language statistics and how many hours you have spent on coding each week).

Surround (Add wrapper template for your code very easily for ex: try catch on a selected block of code).

So those are the extensions that I feel most of the developers like you will need on their day as developers which can help them a lot especially being creating and reducing working time, so if you have any other favorite extensions please feel free to share it with the rest to enjoy coding.

No Comments Yet