VScode 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.
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.
You can see this page, click the install button. After installation, click Ctrl+Shift+P
to see.
Click the first one, select zh-cn, restart vscode, and you will see the locale changes to Chinese.
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.
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
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.
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.
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 + B
The 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.
There are currently 5 special effects options.