Vscode, a powerful IDE integrated development environment under Microsoft, now, more and more web developers choose to use vscode to type code.
However, in vscode without any extensions, it is more difficult to enjoy a "silky" development experience. So, next, I will share with you how to use open in browser and Live Preview and some small column skills to make you have a more comfortable experience when writing html/css/javascript codes.
After the configuration is complete, the effect is as follows:
Table of contents
Install the extension: open in browser
Install the extension: Live Preview
Edit html and css/javascripe code at the same time by using the down column
Install the extension: open in browser
This extension enables you to open webpages in vscode, just tap the shortcut key alt+B to open your html code in the browser.
Search for open in browser in the extension store, you can find the extension, click to install it.
Install the extension: Live Preview
This extension can create a preview window, allowing you to observe the running results of the code in real time in the preview window when modifying or adding html/css code.
After installation, open any html file in vscode, you can see the "show preview" button in the upper right corner
Click to open the preview window to preview the effect of the current code
Edit html and css/javascripe code at the same time by using the down column
In the html writing window, we can find the button to split the editor to the right in the upper right corner
After clicking, a new window will be created, allowing us to edit both codes at the same time. But this is not what we want, because the new window makes the code editing interface slender and inconvenient to observe. So we can choose to split the column down, the method is: hold down the alt key, and the button to split the editor to the right becomes a split editor down
The editor split down can open css or js code, so that our development environment is much more comfortable, and finally we got the following effect:
You can write html code in the upper left window and view your progress in real time in the right window. You can also write css code in the lower left window and see the effect of the code in the right window.
A comfortable development environment makes people motivated to work and has a pleasant experience. Whether you are an ignorant novice or a seasoned master, I recommend that you make good use of extensions to improve your programming experience. This blog is aimed at friends who just started using vscode to develop the front end. The operation is simple and I hope it will be helpful to you.