Monday, March 27 2023 - Welcome
Top Posts
TOP 20 Full Stack Developer Interview Questions and...
Gatsby JS: What You Need to Know About...
JavaScript for Machine Learning: A Beginner’s Guide
ASP.NET: The Ultimate Guide to Building Web Applications
C vs C++: Which Programming Language is Right...
What is a Blockchain Developer? A Comprehensive Guide
What Is a Full Stack Developer? A Comprehensive...
TOP 20 VUE JS INTERVIEW QUESTIONS AND ANSWERS...
Top 20 Node js Interview Questions and Answers...
TypeScript vs JavaScript: Elevate Your Code Quality and...
The Career Dev
  • Home
  • Web Development 2.0
    • Web Development 2.0

      Gatsby JS: What You Need to Know About…

      December 25, 2022

      Web Development 2.0

      ASP.NET: The Ultimate Guide to Building Web Applications

      December 24, 2022

      Web Development 2.0

      TypeScript vs JavaScript: Elevate Your Code Quality and…

      December 22, 2022

      Web Development 2.0

      React vs React Native: Which One to Choose…

      December 6, 2022

      Web Development 2.0

      Angular vs React vs Vue: Which Framework Is…

      December 5, 2022

      Web Development 2.0

      Why use Vue Js: Everything you need to…

      November 11, 2022

      Web Development 2.0

      Next js vs React – Which one is…

      November 9, 2022

      Web Development 2.0

      Node js vs Angular: Which one is better?

      November 5, 2022

      Web Development 2.0

      Best vscode extensions to make your life easy.

      November 4, 2022

  • Software Development
    • Software Development

      JavaScript for Machine Learning: A Beginner’s Guide

      December 24, 2022

      Software Development

      C vs C++: Which Programming Language is Right…

      December 23, 2022

      Software Development

      What is a Blockchain Developer? A Comprehensive Guide

      December 23, 2022

      Software Development

      What Is a Full Stack Developer? A Comprehensive…

      December 23, 2022

      Software Development

      The History and Evolution of Computer Languages

      December 7, 2022

      Software Development

      Java vs JavaScript: Which One Should You Learn…

      December 7, 2022

      Software Development

      Flutter vs React Native: Which is the Better…

      December 6, 2022

  • Interview Questions
    • Interview Questions

      TOP 20 Full Stack Developer Interview Questions and…

      December 25, 2022

      Interview Questions

      TOP 20 VUE JS INTERVIEW QUESTIONS AND ANSWERS…

      December 22, 2022

      Interview Questions

      Top 20 Node js Interview Questions and Answers…

      December 22, 2022

      Interview Questions

      TOP 20 Angular INTERVIEW QUESTIONS AND ANSWERS YOU…

      December 11, 2022

      Interview Questions

      TOP 20 C# INTERVIEW QUESTIONS AND ANSWERS YOU…

      December 11, 2022

      Interview Questions

      TOP 20 PYTHON INTERVIEW QUESTIONS AND ANSWERS YOU…

      December 9, 2022

      Interview Questions

      Top 20 Java Interview Questions and Answers you…

      December 8, 2022

      Interview Questions

      Top 20 JavaScript Interview Questions and Answers you…

      December 8, 2022

      Interview Questions

      Top 20 PHP Interview Questions and Answers You…

      December 7, 2022

      Interview Questions

      Top 20 React Interview Questions and Answers You…

      December 7, 2022

  • Contact Us
  • About Us
best vs code extensions
Home Web Development 2.0 Best vscode extensions to make your life easy.
Web Development 2.0

Best vscode extensions to make your life easy.

by abhijin097 November 4, 2022

I am a Full Stack Developer coding in vs code (visual studio code) for most of my time. I can’t imagine working without extensions and themes in vs code. Today I am going to share the best extensions for visual studio code that I use on a daily basis which are accommodating and easy to use.

Table of Contents

  • How to download extensions in vs code?
  • 1) Live Server for vs code
    • How to install Live Server in vs code
  • 2) Prettier – Code Formatter
    • How to install Prettier in vs code
  • 3) CodeSnap
    • How to install and use Code Snap in vs code
    • Code Snap in action
  • 4) Auto Rename Tag
    • Auto Rename Tag in action
  • 5) Import Cost
    • Import cost in action
  • 6) Tailwind CSS IntelliSense
    • Tailwind CSS IntelliSense in action
  • 7) Better Comments
    • Better comments in action

How to download extensions in vs code?

visual studio code

Open your visual studio code, on the left side you will see a bar called the activity bar, click on the highlighted box, and it will open up the extension marketplace. Now you can search for any extension which you wish to install.

1) Live Server for vs code

Set up a local server environment within visual studio code using an extension. Launch a local development server with a live reload feature for static & dynamic pages. I will also show you how to save files automatically with a save delay which means the browser will refresh automatically and you will be able to see live changes. Click to download Live Server.

vs code live server

How to install Live Server in vs code

Click on the blue button that says install, once you have installed the live server, go back to your project, and right-click on the index.html file, and you will see an option that says open with live server click on it. A local development server will open up in your default browser, or you can click on the go live button on the bottom right corner of your visual studio code.

Now you need to save the file manually in order to see the changes in your local development server. However, there is a way we can overcome this issue. You need to go to your visual studio code settings and type in auto save, by default it’s going to be turned off you need to change that to afterDelay and change the value of Auto Save Delay from 1000 to 600. Now, whenever you do any changes in any of your files, it will be reflected in the local server.

2) Prettier – Code Formatter

It does exactly what it says, makes our code pretty. Formats the code uniformly throughout the document. It can format various types of files such as JavaScript, JSX, Angular, Vue, Flot, TypeScript, HTML, CSS, and many more. You won’t have to worry about missing a closing tag, curly bracket, angle bracket, or parentheses ever again. Click to download Prettier

vs code prettier

How to install Prettier in vs code

To make sure this extension is used over other extensions you may have installed, be sure to set it as the default formatter in your VS Code settings.json file. This setting can be set for all languages or by a specific language.

If you are unable to find settings.json click on the setting icon in your visual studio code, select extensions, and keep scrolling until you see Edit in settings.json

Click on it and enter the following code inside the JSON file.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

I would recommend changing “editor.formatOnSave”: false to “editor.formatOnSave”: true so that every time you save a file it formats the code. To do that go to the visual studio code settings type in format on save, and click the checkbox.

3) CodeSnap

Take beautiful screenshots of your code in visual studio code. If you ever want to share your code over the internet by taking screenshots, this extension could come in handy. Click to download CodeSnap

vs code code snap

How to install and use Code Snap in vs code

Search Code Snap in the extensions marketplace, and click install. Then go to the file you want to take a screenshot of and open the command palette (Ctrl+Shift+P on Windows and Linux, Cmd+Shift+P on OS X) and search for CodeSnap.

Code Snap in action

4) Auto Rename Tag

Small bits can be pretty annoying in coding. Once you have a large piece of code in any of your files, finding and renaming tags could be maddening. What the auto rename tag does is it will rename the opening or closing tag automatically without our need to find the paired HTML/XML tag. Just click on install and you are good to go, no further settings are required. Click to download Auto Rename Tag

vs code auto rename tag

Auto Rename Tag in action

5) Import Cost

Import Cost is nice to have to figure out how big packages are that you are importing in your code because sometimes you don’t want to have huge packages. This extension will display inline in the editor the size of the imported package. The extension utilizes a webpack in order to detect the imported size. Just click on install and you are good to go, no further settings are required. Click to download Import Cost

vs code import cost

Import cost in action

6) Tailwind CSS IntelliSense

vs code tailwind css

Tailwind CSS IntelliSense in action

7) Better Comments

The problem with default comments is that sometimes it can be hard to read because it is all grayed out, especially if you have multiple comments, which could make code hard to understand. However, this extension will help you create more human-friendly comments in your code. With this extension, you can categorize your annotations into alerts, queries, TODOs, Highlights, and many more. Click to download Better Comments

vs code better comments

Better comments in action

cssdevelopersfull satck developemnthtmljavascriptsoftware developmentvisual studio codevs code
0 comment 0 FacebookTwitterPinterestEmail
next post
Node js vs Angular: Which one is better?

You may also like

Gatsby JS: What You Need to Know About...

December 25, 2022

ASP.NET: The Ultimate Guide to Building Web Applications

December 24, 2022

TypeScript vs JavaScript: Elevate Your Code Quality and...

December 22, 2022

React vs React Native: Which One to Choose...

December 6, 2022

Angular vs React vs Vue: Which Framework Is...

December 5, 2022

Why use Vue Js: Everything you need to...

November 11, 2022

Next js vs React – Which one is...

November 9, 2022

Node js vs Angular: Which one is better?

November 5, 2022

Leave a Comment Cancel Reply

Save my name, email, and website in this browser for the next time I comment.

Recent Posts

  • 1

    Best vscode extensions to make your life easy.

    November 4, 2022
  • 2

    Next js vs React – Which one is leading in 2022?

    November 9, 2022
  • 3

    Node js vs Angular: Which one is better?

    November 5, 2022
  • 4

    React vs React Native: Which One to Choose in 2023

    December 6, 2022
  • 5

    Why use Vue Js: Everything you need to know about Vue Js

    November 11, 2022

Categories

  • Interview Questions
  • Software Development
  • Web Development 2.0
Trending
TOP 20 Full Stack Developer Interview Questions and Answers You Need To Know

Recent Posts

  • TOP 20 Full Stack Developer Interview Questions and Answers You Need To Know
  • Gatsby JS: What You Need to Know About This Popular JavaScript Framework
  • JavaScript for Machine Learning: A Beginner’s Guide
  • ASP.NET: The Ultimate Guide to Building Web Applications
  • C vs C++: Which Programming Language is Right for Your Project?

Pages

  • About Us
  • TheCareerDev
  • Contact Us
  • Privacy Policy

Categories

  • Interview Questions
  • Software Development
  • Web Development 2.0

Credits

Image by vectorjuice on Freepik
Programming With Mosh

Newsletter

Subscribe my Newsletter for new blog posts, tips & new photos. Let's stay updated!

  • Facebook
  • Twitter

@2021 - All Right Reserved. Designed and Developed by PenciDesign


Back To Top
The Career Dev
  • Home
  • Web Development 2.0
    • Web Development 2.0

      Gatsby JS: What You Need to Know About…

      December 25, 2022

      Web Development 2.0

      ASP.NET: The Ultimate Guide to Building Web Applications

      December 24, 2022

      Web Development 2.0

      TypeScript vs JavaScript: Elevate Your Code Quality and…

      December 22, 2022

      Web Development 2.0

      React vs React Native: Which One to Choose…

      December 6, 2022

      Web Development 2.0

      Angular vs React vs Vue: Which Framework Is…

      December 5, 2022

      Web Development 2.0

      Why use Vue Js: Everything you need to…

      November 11, 2022

      Web Development 2.0

      Next js vs React – Which one is…

      November 9, 2022

      Web Development 2.0

      Node js vs Angular: Which one is better?

      November 5, 2022

      Web Development 2.0

      Best vscode extensions to make your life easy.

      November 4, 2022

  • Software Development
    • Software Development

      JavaScript for Machine Learning: A Beginner’s Guide

      December 24, 2022

      Software Development

      C vs C++: Which Programming Language is Right…

      December 23, 2022

      Software Development

      What is a Blockchain Developer? A Comprehensive Guide

      December 23, 2022

      Software Development

      What Is a Full Stack Developer? A Comprehensive…

      December 23, 2022

      Software Development

      The History and Evolution of Computer Languages

      December 7, 2022

      Software Development

      Java vs JavaScript: Which One Should You Learn…

      December 7, 2022

      Software Development

      Flutter vs React Native: Which is the Better…

      December 6, 2022

  • Interview Questions
    • Interview Questions

      TOP 20 Full Stack Developer Interview Questions and…

      December 25, 2022

      Interview Questions

      TOP 20 VUE JS INTERVIEW QUESTIONS AND ANSWERS…

      December 22, 2022

      Interview Questions

      Top 20 Node js Interview Questions and Answers…

      December 22, 2022

      Interview Questions

      TOP 20 Angular INTERVIEW QUESTIONS AND ANSWERS YOU…

      December 11, 2022

      Interview Questions

      TOP 20 C# INTERVIEW QUESTIONS AND ANSWERS YOU…

      December 11, 2022

      Interview Questions

      TOP 20 PYTHON INTERVIEW QUESTIONS AND ANSWERS YOU…

      December 9, 2022

      Interview Questions

      Top 20 Java Interview Questions and Answers you…

      December 8, 2022

      Interview Questions

      Top 20 JavaScript Interview Questions and Answers you…

      December 8, 2022

      Interview Questions

      Top 20 PHP Interview Questions and Answers You…

      December 7, 2022

      Interview Questions

      Top 20 React Interview Questions and Answers You…

      December 7, 2022

  • Contact Us
  • About Us