VS Code Customization and Workflow Guide

A code editor always saves time and boost working speed and productivity. I always try my best to take care of it. Today’s post, I am going to show you can customize vs code and improve workflow. This customization will help you to boost working speed.

Productivity isn’t out there, it’s hidden in between what tricks and tools you’re using, what steps you’re taking to work smartly.

Well, let’s explore VS Code. If you don’t have VS Code yet on your computer. Download & Install VS Code from the official website https://code.visualstudio.com. Install process is very easy like you do every time when you install something on your computer.

Themes

A beautiful theme makes all the differences when we look upon it. Soft & elegant themes help us to work longer without any focus issue. I love to work with dark themes and I found it useful. Here are my favorite few themes. Based on your needs you can choose light either dark, all themes included light and dark version.


1. One Dark Pro – This theme officially published with their editor by Atom. A great theme for web development. Past year it’s published on VS Code marketplace, downloaded over 7.4 million from all over the world. Extremely popular for its looks and elegant
colors.


2. Ayu – This is my second choice for VS Code. Comes with bright colors and three variations. I love this theme because of this simple, elegant looks and beautiful file icons.

3. Material – Pretty good theme, popular across VS Code Users. I install it twice. But the looks of this theme failed to impress me. I don’t know why.

There are so many good themes out there, you can choose whatever you like. The installation process of VS Code Theme is very easy following few steps. Below, I added a video tutorial on this.

Extensions

We all need extensions to improve our editor capability. But it’s very difficult to put together all the necessary extension for every user. Because, every one of us works in different languages, frameworks, and platform. Here, I added very useful and common extension for every user. Also, I added few resources for particular platforms.

  • Prettier – A plugin for format your JS, CSS, HTML codes.
  • Debugger for Chrome – Debug your JS Code in google chrome
  • Project Manager – Easily switch between projects.
  • Live Server – Any changes will be loaded automatically without refresh the browser.
  • Path Intellisense – Autocomplete file and folder names.
  • Git History – View git log, file history, compare branches or commits

So, those mentioned plugins were common for most of the users. I didn’t mention any particular language or framework extensions. Moreover, you will find useful plugins for every language & frameworks out there.  Please check available plugins here VS Code Marketplace. Check The 20 Best VS Code Extensions for Front-End Developer, 15 Essential plugins for VS Code.

Here is a video on, How to install an extension on VS Code.

Settings

On my previous post, I already said that VS Code is customizable. Read more about VS Code Customization.  Essential Customization for VS code, How to customize VS Code

Leave a Comment

Your email address will not be published. Required fields are marked *