9 + 1 Visual Studio Code Extensions for Easier and Faster Development
Tags: vscode, beginners, productivity, tips
Published: 2019-02-27 19:45:37

---
title: 9 + 1 Visual Studio Code Extensions for Easier and Faster Development
published: true
description: A short collection of effective and useful extensions for VSCode. Great for beginners and VSCode lovers.
tags: VSCode, beginners, productivity, tips
cover_image: https://thepracticaldev.s3.amazonaws.com/i/lnlw89zqis6lxeoikrkf.png
---

<!-- wp:paragraph -->
_Disclosure: This post includes affiliate links; I may receive compensation if you purchase products or services from the different links provided in this article._
<!-- /wp:paragraph -->


<!-- wp:paragraph -->
<p>Visual Studio Code is one of my
favorite editors as I love its high customizability. There are really many
extensions that can make your life much easier and here are some of the best
ones to boost your productivity. If you are a beginner, try these extensions
and make your web development experience much more effective and simple.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>You can browse and install extensions from within VS Code. Bring up the Extensions view by clicking on the Extensions icon in the <strong>Activity Bar</strong> on the side of VS Code or the <strong>View: Extensions</strong> command (Ctrl+Shift+X).</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Feel free to share your favorite VS Code extension. Have fun!</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>#1 Live Server</h3>
<!-- /wp:heading -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/1000/1*1op8CnEqhDnWByewa-aFrQ.gif" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Make changes in the code
editor, switch to the browser, and
refresh to see changes. That's the endless cycle of a developer, but what if
your browser would automatically refresh anytime you make changes? That's where
Live Server comes in!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>It also runs your app on a localhost server. There are some
things you can only test when running your app from a server, so this is a nice
benefit.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>You make changes in your editor and have to refresh to check these changes. True story, isn’t it? Live Server extension
comes here to help you see your changes in real time since your browser is
refreshed automatically every time you save in VSCode. </p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>#2 Bracket Pair Colorizer</h3>
<!-- /wp:heading -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/1600/1*spFXbNe3IsQmdHKZ5VmWNw.gif" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>An extension to fall in love for. When you have so many lines
of nested code it’s getting pretty tricky to match the brackets. Bracket Pair
Colorizer colors matching brackets to make the code much more readable and
interesting.</p>
<!-- /wp:paragraph -->

<a href="https://www.siteground.com/go/o0f7bpuuot" target="_blank"><img border="0" src="https://uapi.siteground.com/img/affiliate/en/USD/general_EN_USD_start-site-leaderboard-green.jpg"></a>

<!-- wp:heading {"level":3} -->
<h3>#3 Prettier</h3>
<!-- /wp:heading -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://fullstackengine.net/content/images/2018/03/prettier.gif" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Never worry about formatting again! Prettier is here to help you format your code and make it prettier (obviously). It can be configured to format automatically on save.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>#4 CSS Peek</h3>
<!-- /wp:heading -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://cdn.shopify.com/s/files/1/0533/2089/files/the-best-vscode-extensions-2017-css-peak.gif?v=1504613964" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>CSS Peek is really helpful as it saves much time going back
and forth to HTML and CSS files. It’s a pretty fancy extension for developers
who don’t like split screen. Hover over a selector within your HTML file and
view an image of your CSS code. CSS Peek will also convert ids and class names
to hyper links directing you to their
definition in the CSS file. </p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>#5 Debugger for Chrome</h3>
<!-- /wp:heading -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://code.visualstudio.com/assets/blogs/2016/02/23/chrome-debugger-demo.gif" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>One of the most popular VS Code extensions for developers, the
official debugger for Chrome comes with built-in features to help you debug
your Javascript files running in Chrome browser directly from VS Code. </p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>#6 GitLens </h3>
<!-- /wp:heading -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://raw.githubusercontent.com/eamodio/vscode-gitlens/master/images/docs/gitlens-preview.gif" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>One of the most useful extensions for VS Code, this one will
save your day when more than one contributors work on the same repository.
History, recent changes, code authorship, blame information
and commit searching are some of the best features of this cool extension.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>#7 Auto Rename Tag</h3>
<!-- /wp:heading -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://raw.githubusercontent.com/formulahendry/vscode-auto-rename-tag/master/images/usage.gif" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Do you need to rename an HTML element? With Auto Rename Tag extension
you just need to rename either the opening or closing tag and the other one
will be automatically renamed. Simply and effectively! </p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>#8 Path Intellisense</h3>
<!-- /wp:heading -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="http://i.giphy.com/iaHeUiDeTUZuo.gif" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>If you work on large projects, remembering all directories
and file names can be very tricky. This extension will help you, showing autocomplete
file names as you start typing a path in the quotations. </p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>#9 Browser Preview</h3>
<!-- /wp:heading -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://raw.githubusercontent.com/auchenberg/vscode-browser-preview/master/resources/demo.gif" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Live Server extension is very cool but this one goes one level
further and allows you to open a real browser preview inside your editor that
you can debug. No more need to check the browser after making a small change. </p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>#10 One Dark Pro</h3>
<!-- /wp:heading -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://ws3.sinaimg.cn/large/006tNbRwgy1fvwkr6i199j31kw16otat.jpg" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>If you are a dark theme lover, Atom's iconic One Dark theme will become your favorite one. Not surprisingly it's one of the most downloaded themes for VS Code! </p>
<!-- /wp:paragraph -->