Post
Ask Question

Tips To Save Your Time On Web Development With Visual Studio Code

Introduction

This article is meant for absolute beginners of Visual Studio Code and web development, Others may not find this article useful.

Developing a website in the most popular programming environment, Visual Studio Code requires a developer to do some repetitive tasks such as saving, refreshing the web page, and typing the same code, etc.

In this article, I would like to introduce you to some tools which will help you to do it more easily.

Live Server - Using any Server

Live Server is a server available as an extension in Visual Studio Market Place. It enables a developer to view saved changes in the code ASAP.

Market Place
[Courtesy: Live Server] https://marketplace..com/items?itemName=ritwickdey.LiveServer

Installation

  • Method 1: Open Visual Studio Code and type ctrl+P, type ext install ritwickdey. live server.
  • Method 2: Open Visual Studio Code and click the Extensions icon (normally last) on the left pane or hit Ctrl+Shift+X. Search for live server, select the Live Server tile click Install.

Starting

  • Method 1: Open a project right-click a .html file from the Explorer Window and click on Open with Live Server.
  • Method 2: Open a project and open the .html file do a mouse right-click. Click on Open with Live Server.
  • Method 3: Hit (alt+L, alt+O)
  • Method 4: Open a project and open the Command Pallete by pressing F1 or ctrl+shift+P then type Live Server: Open With Live Server

AutoSave

AutoSave combined with a running server like Live Server saves a lot of time, as we can bypass the save and refresh action which would be the most repeated action by a web developer. So enabling autosave helps a developer to view the changes ASAP.

  • Method 1: Open the project and go to File > AutoSave toggle that turns on and off saves after a delay. Go to Workplace settings for more customizations.
  • Method 2: Open Visual Studio Code and click the Extensions icon (normally last) on the left pane or hit Ctrl+Shift+X.

Search for Save Typing - publisher: "Michel Betancourt", select the Save Typing tile click Install.

Use Short Hands

Using shorthand will definitely save you time. Using IntelliSense which offers word completion for all languages including JavaScript, JSON, HTML, CSS, SCSS, Less, C#, and TypeScript. The Emmet which is inbuilt adds up the possibilities.

Some shortcuts include

  1. Typing div or any other HTML tag and pressing Enter will write the corresponding opening and closing HTML tags for you.
  2. Typing div>(header>ul>li*2>a)+footer>p and press Enter will write.
<div>
    <header>
        <ul>
            <li>
                <a href=""></a>
            </li>
            <li>
                <a href=""></a>
            </li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

You can get the full cheat sheet from here.

Zen Mode

This definitely helps when you have long lines of code that ask you to scroll to the left. This is a distraction-free view. All the extra toolboxes and bars in your window will be removed, allowing you to completely focus on your code.

To start Zen Mode hit Ctrl+K Z. To exit hit Esc.

Zen mode
[Courtesy: VSCode] https://code.visualstudio.com

Side-by-side editing

Split up the screen into two or more where you can see two editors on the right-left or top-bottom with code from the same file or a different file. This can be used when you need to refer a file to code on a different file or a different part of the same file. This can be used with Zen Mode, To use it on Zen mode hit Ctrl+\. To use it in normal mode go to View > Editor Layout.

Editor layout
[Courtesy: VSCode] https://code.visualstudio.com

I hope this helped. Please stay tuned for more articles on Web Development.


Similar Articles