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.
[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.liveserver.
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 and right-click a .html file from 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 project and goto 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 shorthands will definitely save your 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:
-
Typing div or any other html tag and press Enter will write the corresponding opening and closing html tags for you.
-
Typing
div>(header>ul>li*2>a)+footer>p and press
Enter will write
- <div>
- <header>
- <ul>
- <li>
- <ahref="">
- </a>
- </li>
- <li>
- <ahref="">
- </a>
- </li>
- </ul>
- </header>
- <footer>
- <p></p>
- </footer>
- </div>
Zen Mode
This definitely helps when you have long lines of code that ask you to scroll to 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.
[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 on normal mode goto View > Editor Layout.
[Courtesy: VSCode] https://code.visualstudio.com
I hope this helped. Please stay tuned for more articles on Web Development.