VS code front-end configuration

Preface

Recently, I have done a lot of front-end, and I can't find a handy editor. Later, I used vscode with the mentality of giving it a try. After using it, I can only say that vscode is too nb. Let me introduce you to the configuration of several plugins of vscode and the pits encountered.

vscode download

Click download and select your own matching system to download.
Insert picture description here

Chinese (simplifield) plug-in installation

This plugin is a Chinese (Simplified) language pack for VS Code.
After downloading and installing, open vscode, click this button, enter chinese.
Insert picture description here
Insert picture description here
You can see this page, click the install button. After installation, click Ctrl+Shift+Pto see.
Insert picture description here
Click the first one, select zh-cn, restart vscode, and you will see the locale changes to Chinese.
Insert picture description here

Live Server plug-in installation (recommended)

installation

Live Server is a small development server with real-time reload function. Use it to hot load HTML/JavaScript/CSS files, but it cannot be used to deploy the final website system.
When writing a simple project or learning some technical exercises, if there is no server, you need to manually refresh the browser every time you write code. A bit helpless, but if you install this live-server server, you can preview the code you wrote in real time without refreshing it manually.
In the same way, search for Live Server in the plug-in store, download and install it. Click the settings icon next to it to enter the extended settings. Insert picture description here
You can see a series of settings (default browser, port, server address) according to the configuration on my picture, there should be no problem
teaching video

Insert picture description here
Insert picture description here
Insert picture description here

test

Open your html file with vs, click GoLive, a web page will pop up, the url above has the url name and port number you set.
Insert picture description here
Insert picture description here
Then make changes on your html file and save. The web page will be updated in real time. There is no need to open it every time.

Preview Browser plugin installation

This plugin is also installed in the same way. The approximate effect is shown in the figure, it will display your html effect on the side of vscode. But it takes up the viewing area.
Insert picture description here

open in browser plugin installation

This plugin is also installed in the same way. After installation, expand the configuration and set the default browser. alt + BThe window can be called up, but it will not be updated in real time, and a web page must be reopened every time.

Power Mode plug-in (cursor effects)

The usual cursor is a vertical line, which adds a boring life to the already anxious life. The Power Mode plug-in brings a touch of color to your programming life.
Install the Power Mode plug-in, open the extended settings, and set your own cursor effects at the bottom.
Insert picture description here
Insert picture description here
There are currently 5 special effects options.

Guess you like

Origin blog.csdn.net/m0_43456002/article/details/105874973