vs code之Live Server的使用（搭建本地服务器）

最近接手了个jquery的项目，由于每次修改都要清缓存重新加载才能看到效果，所以研究了一下Live Server，在本地搭建了一个服务器，实现了实时预览，十分方便。

第一步：下载并安装Live Server

image.png

可以看到，vs code右下角出现了这样一个小图标（点击即可打开）

如不作任何配置：点击之后默认打开http://127.0.0.1:5500

如果是单纯的html文件想要实现实时预览，配置到这就够了，但由于我这里是一个项目，有网络请求，所以如果主机名为127.0.0.1会出现跨域的问题（后端设置允许访问的端口为：localhost:9000端口），下面的步骤就是完成这个工作的。

第二步：详细配置

点击扩展设置，打开settings.json

具体添加的配置如下（最重要的是前两条配置）：

 "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配置如下：

{
  "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

另：如果想用Debugger for Chrome结合Live Server使用的话需要先用Live Server打开一个端口再打开Debugger for Chrome（注意：这两插件端口必须配置一致，我这里都是localhost:9000），Debugger for Chrome的具体使用见我的这篇文章：vs code之Debugger for Chrome的使用（开启谷歌调试）