VSCode configure local server

Sometimes we want to run projects written in HTML + CSS + jQuery (js) in the form of scaffolding similar to the three major frameworks . This function can be achieved by installing and configuring the Live Server plug-in of VSCode .
Portal: Sublime Text3 configure local server

1. Install Live Server

2. Start the Server service

After restarting VSCode, you will find [Go Live] in the status bar at the bottom right corner of the software. This is the switch to start the plug-in just installed.

Click to start the server, it will automatically run the system default browser, as shown in the figure.

At this point, the server is ready to run. We only need to develop the index file and run it. The default is to display all files and folders in the project.

Go back to VsCode and click again to close the server. The

other three ways to open:

1. Right-click in the HTML file, and then click open live server;
2. Shortcut keys (alt+L, O) to open the service (alt+L, C) to close the service;
3. Press F1, and then enter Live Server: Open Live Server to start a server to open the service, or Live Server: Close Live Server to stop a server to close the service;

3. Configure Live Server

The fellow learned that the default port is 5500. What if the port conflicts, or we need to set the port ourselves?
If the port conflicts, the plug-in will automatically start other ports, so don't worry about this.
Next, I will briefly introduce how to set the server's port and proxy (not required).

Click File => Preferences => Settings

Search keywords [liveserver] keep looking down, we can find live Server related settings

{
    
    
  "liveServer.settings.port": 8080,  // 设置本地服务的端口号
  "liveServer.settings.root": "/",  //  设置根目录，也就是打开的文件会在该目录下找
  "liveServer.settings.CustomBrowser": "chrome",  // 设置默认打开的浏览器
  "liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --incognito --remote-debugging-port=9222",
  "liveServer.settings.NoBrowser": false,
  "liveServer.settings.ignoredFiles": [   // 设置忽略的文件
    ".vscode/**",
    "**/*.scss",
    "**/*.sass"
  ]
}

4. Precautions for use

1. The configuration of setting the service root path can only be set to a folder, not a specific HTML file;
   for example, /dist/test.html can open the page as a result, but an error is reported when loading the file referenced in the file.
2. Index.html will be automatically opened in the root directory;