最近接手了个jquery的项目，由于每次修改都要清缓存重新加载才能看到效果，所以研究了一下Live Server，在本地搭建了一个服务器，实现了实时预览，十分方便。
第一步：下载并安装Live Server
image.png
可以看到，vs code右下角出现了这样一个小图标（点击即可打开）
如不作任何配置：点击之后默认打开http://127.0.0.1:5500
如果是单纯的html文件想要实现实时预览，配置到这就够了，但由于我这里是一个项目，有网络请求，所以如果主机名为127.0.0.1会出现跨域的问题（后端设置允许访问的端口为：localhost:9000端口），下面的步骤就是完成这个工作的。
第二步：详细配置
点击扩展设置，打开settings.json
具体添加的配置如下（最重要的是前两条配置）：
1 2 3 4 5 6 7 8 9 10 11 12 | "liveServer.settings.port": 9000, //设置本地服务的端口号 "liveServer.settings.host": "localhost",//主机名配置，默认127.0.0.1 "liveServer.settings.root": "/", //设置根目录，也就是打开的文件会在该目录下找 "liveServer.settings.CustomBrowser": "chrome", //设置默认打开的浏览器 "liveServer.settings.NoBrowser": false, "liveServer.settings.ignoredFiles": [ //设置忽略的文件 ".vscode/**", "**/*.scss", "**/*.sass" ], "liveServer.settings.ChromeDebuggingAttachment": false,//启用Chrome调试到Live Server的附件 "liveServer.settings.fullReload": false, "liveServer.settings.AdvanceCustomBrowserCmdLine": "", //默认情况下，Live Server会在不完全重新加载浏览器的情况下注入CSS更改。您可以通过将此设置设置为来更改此行为true,默认false |
整个settings.json配置如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | { "workbench.iconTheme": "vscode-icons", "editor.codeActionsOnSave": null, "files.associations": { "*.vue": "vue", "*.wpy": "vue", "*.wxml": "html", "*.wxss": "css" }, "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe", "git.enableSmartCommit": true, "git.autofetch": true, "emmet.triggerExpansionOnTab": true, "emmet.showAbbreviationSuggestions": true, "emmet.showExpandedAbbreviation": "always", "emmet.includeLanguages": { "vue-html": "html", "vue": "html", "wpy": "html", "javascript": "html" }, //主题颜色 //"workbench.colorTheme": "Monokai", "git.confirmSync": false, "explorer.confirmDelete": false, "editor.fontSize": 14, "editor.wordWrap": "on", "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSize": 2, //失去焦点后自动保存 "files.autoSave": "onFocusChange", // #值设置为true时，每次保存的时候自动格式化； "editor.formatOnSave": false, //每120行就显示一条线 "editor.rulers": [], // 在使用搜索功能时，将这些文件夹/文件排除在外 "search.exclude": { "**/node_modules": true, "**/bower_components": true, "**/target": true, "**/logs": true, }, // 这些文件将不会显示在工作空间中 "files.exclude": { "**/.git": true, "**/.svn": true, "**/.hg": true, "**/CVS": true, "**/.DS_Store": true, "**/*.js": { "when": "$(basename).ts" //ts编译后生成的js文件将不会显示在工作空中 }, "**/node_modules": false }, // #让vue中的js按"prettier"格式进行格式化 "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatter.js": "prettier", "vetur.format.defaultFormatterOptions": { "js-beautify-html": { // #vue组件中html代码格式化样式 "wrap_attributes": "force-aligned", //也可以设置为"auto"，效果会不一样 "wrap_line_length": 200, "end_with_newline": false, "semi": false, "singleQuote": true }, "prettier": { "semi": false, "singleQuote": true } }, "liveServer.settings.donotShowInfoMsg": true, "workbench.colorTheme": "Dracula", "diffEditor.ignoreTrimWhitespace": false, "liveServer.settings.port": 9000, //设置本地服务的端口号 "liveServer.settings.host": "localhost",//主机名配置，默认127.0.0.1 "liveServer.settings.root": "/", //设置根目录，也就是打开的文件会在该目录下找 "liveServer.settings.CustomBrowser": "chrome", //设置默认打开的浏览器 "liveServer.settings.NoBrowser": false, "liveServer.settings.ignoredFiles": [ //设置忽略的文件 ".vscode/**", "**/*.scss", "**/*.sass" ], "liveServer.settings.ChromeDebuggingAttachment": false,//启用Chrome调试到Live Server的附件 "liveServer.settings.fullReload": false, "liveServer.settings.AdvanceCustomBrowserCmdLine": "", //默认情况下，Live Server会在不完全重新加载浏览器的情况下注入CSS更改。您可以通过将此设置设置为来更改此行为true,默认false } |
更多详细配置见：https://github.com/ritwickdey/vscode-live-server/blob/master/docs/settings.md