最近接手了個(gè)jquery的項(xiàng)目，由于每次修改都要清緩存重新加載才能看到效果，所以研究了一下Live Server，在本地搭建了一個(gè)服務(wù)器，實(shí)現(xiàn)了實(shí)時(shí)預(yù)覽，十分方便。
第一步：下載并安裝Live Server
image.png
可以看到，vs code右下角出現(xiàn)了這樣一個(gè)小圖標(biāo)（點(diǎn)擊即可打開）
如不作任何配置：點(diǎn)擊之后默認(rèn)打開http://127.0.0.1:5500
如果是單純的html文件想要實(shí)現(xiàn)實(shí)時(shí)預(yù)覽，配置到這就夠了，但由于我這里是一個(gè)項(xiàng)目，有網(wǎng)絡(luò)請求，所以如果主機(jī)名為127.0.0.1會(huì)出現(xiàn)跨域的問題（后端設(shè)置允許訪問的端口為：localhost:9000端口），下面的步驟就是完成這個(gè)工作的。
第二步：詳細(xì)配置
點(diǎn)擊擴(kuò)展設(shè)置，打開settings.json
具體添加的配置如下（最重要的是前兩條配置）：
"liveServer.settings.port": 9000, //設(shè)置本地服務(wù)的端口號(hào)
"liveServer.settings.host": "localhost",//主機(jī)名配置，默認(rèn)127.0.0.1
"liveServer.settings.root": "/", //設(shè)置根目錄，也就是打開的文件會(huì)在該目錄下找
"liveServer.settings.CustomBrowser": "chrome", //設(shè)置默認(rèn)打開的瀏覽器
"liveServer.settings.NoBrowser": false,
"liveServer.settings.ignoredFiles": [ //設(shè)置忽略的文件
".vscode/**",
"**/*.scss",
"**/*.sass"
],
"liveServer.settings.ChromeDebuggingAttachment": false,//啟用Chrome調(diào)試到Live Server的附件 "liveServer.settings.fullReload": false,
"liveServer.settings.AdvanceCustomBrowserCmdLine": "", //默認(rèn)情況下，Live Server會(huì)在不完全重新加載瀏覽器的情況下注入CSS更改。您可以通過將此設(shè)置設(shè)置為來更改此行為true,默認(rèn)false
整個(gè)settings.json配置如下：
{
"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,
// 重新設(shè)定tabsize
"editor.tabSize": 2,
//失去焦點(diǎn)后自動(dòng)保存
"files.autoSave": "onFocusChange",
// #值設(shè)置為true時(shí)，每次保存的時(shí)候自動(dòng)格式化；
"editor.formatOnSave": false,
//每120行就顯示一條線
"editor.rulers": [],
// 在使用搜索功能時(shí)，將這些文件夾/文件排除在外
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/target": true,
"**/logs": true,
},
// 這些文件將不會(huì)顯示在工作空間中
"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true,
"**/*.js": {
"when": "$(basename).ts" //ts編譯后生成的js文件將不會(huì)顯示在工作空中
},
"**/node_modules": false
},
// #讓vue中的js按"prettier"格式進(jìn)行格式化
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// #vue組件中html代碼格式化樣式
"wrap_attributes": "force-aligned", //也可以設(shè)置為"auto"，效果會(huì)不一樣
"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, //設(shè)置本地服務(wù)的端口號(hào)
"liveServer.settings.host": "localhost",//主機(jī)名配置，默認(rèn)127.0.0.1
"liveServer.settings.root": "/", //設(shè)置根目錄，也就是打開的文件會(huì)在該目錄下找
"liveServer.settings.CustomBrowser": "chrome", //設(shè)置默認(rèn)打開的瀏覽器
"liveServer.settings.NoBrowser": false,
"liveServer.settings.ignoredFiles": [ //設(shè)置忽略的文件
".vscode/**",
"**/*.scss",
"**/*.sass"
],
"liveServer.settings.ChromeDebuggingAttachment": false,//啟用Chrome調(diào)試到Live Server的附件
"liveServer.settings.fullReload": false,
"liveServer.settings.AdvanceCustomBrowserCmdLine": "", //默認(rèn)情況下，Live Server會(huì)在不完全重新加載瀏覽器的情況下注入CSS更改。您可以通過將此設(shè)置設(shè)置為來更改此行為true,默認(rèn)false
}
更多詳細(xì)配置見：https://github.com/ritwickdey/vscode-live-server/blob/master/docs/settings.md
