终极跨平台 VSCode 配置：左侧编辑 + 右侧预览 Vue 项目（无需离开编辑器）

本指南将帮助你在 统信UOS、Windows、macOS 上建立完全一致的 VSCode 开发环境，实现在编辑器内部左右分屏：左侧编写 Vue 代码，右侧实时预览页面效果，无需在窗口间切换。

一、核心思路：Web Preview 插件

通过 Web Preview 插件，你可以在 VSCode 编辑器区域内打开一个嵌入式浏览器窗口，并将其拖拽到右侧，与代码编辑器并列。该插件支持：

• 自动连接 Vue 开发服务器（默认端口 5173）
• 响应式预览（模拟手机、平板、笔记本尺寸）
• 内置 DevTools，可直接检查元素

二、插件安装清单

在 VSCode 扩展面板（Ctrl+Shift+X）中搜索并安装以下插件：

可选但推荐：GitLens、Path Intellisense、Todo Tree 等效率工具。

三、完整跨平台 settings.json 配置

将以下代码复制并保存到你的 VSCode 用户设置文件：

• Linux（统信UOS）：~/.config/Code/User/settings.json
• Windows：%APPDATA%\Code\User\settings.json
• macOS：~/Library/Application Support/Code/User/settings.json

{
  // ==================== 全局设置 ====================
  "window.zoomLevel": 1,
  "workbench.colorTheme": "Default Dark Modern",
  "workbench.preferredDarkColorTheme": "Default Dark Modern",
  "window.autoDetectColorScheme": false,
  "workbench.iconTheme": "material-icon-theme",
  "editor.fontSize": 14,
  "editor.fontFamily": "'JetBrains Mono', 'Fira Code', '等线', monospace",
  "editor.fontLigatures": true,
  "editor.tabSize": 2,
  "editor.lineHeight": 22,
  "editor.letterSpacing": 0.5,
  "editor.renderWhitespace": "selection",
  "editor.renderControlCharacters": true,
  "editor.cursorBlinking": "smooth",
  "editor.tokenColorCustomizations": {
    "comments": "#6a9955",
    "strings": "#ce9178",
    "keywords": "#569cd6",
    "functions": "#dcdcaa"
  },

  // ==================== 分屏布局 ====================
  "workbench.editor.restoreViewState": true,
  "workbench.editor.showTabs": true,
  "workbench.editor.tabSizing": "shrink",
  "workbench.editor.splitInGroupLayout": "vertical",
  "workbench.startupEditor": "newUntitledFile",
  "workbench.editor.enablePreview": false,
  "workbench.layout.enabled": true,

  // ==================== 文件操作与Git ====================
  "files.autoSave": "onFocusChange",
  "files.eol": "\n",
  "git.autofetch": true,
  "git.enableSmartCommit": true,
  "git.confirmSync": false,
  "git.ignoreMissingGitWarning": true,

  // ==================== 代码格式化 (Prettier) ====================
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.semi": false,
  "prettier.singleQuote": true,
  "prettier.jsxSingleQuote": true,
  "prettier.printWidth": 80,
  "prettier.eslintIntegration": true,

  // ==================== 代码校验 (ESLint) ====================
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "html"
  ],
  "eslint.workingDirectories": [{ "mode": "auto" }],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

  // ==================== Emmet ====================
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "wxml": "html",
    "javascript": "javascriptreact",
    "vue-html": "html",
    "vue": "html"
  },

  // ==================== Vue 相关 ====================
  "vue.server.hybridMode": false,
  "vue.complete.casing": ["camel", "pascal"],
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
    },
    "prettier": {
      "semi": false,
      "singleQuote": true
    }
  },

  // ==================== Web Preview 配置 ====================
  "webPreview.url": "http://localhost:5173",
  "webPreview.mediaScreenOverride": true,
  "webPreview.mediaScreen": {
    "Mobile": "380x796",
    "Tablet": 768,
    "Laptop": 1024
  },

  // ==================== Live Server 配置（用于静态HTML）====================
  "liveServer.settings.port": 5500,
  "liveServer.settings.root": "",
  "liveServer.settings.wait": 100,
  "liveServer.settings.useLocalIp": false,
  "liveServer.settings.ignoreFiles": [
    ".vscode/**",
    "**/*.scss",
    "**/*.ts"
  ],
  "liveServer.settings.NoBrowser": false,
  "liveServer.settings.ChromeDebuggingAttachment": false,

  // ==================== 资源管理器 ====================
  "explorer.confirmDragAndDrop": false,
  "explorer.confirmDelete": false,
  "explorer.compactFolders": false,

  // ==================== 扩展配置 ====================
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  "minapp-vscode.disableAutoConfig": true,
  "python.jediEnabled": false,
  "breadcrumbs.enabled": true,
  "beautify.language": {
    "js": {
      "type": ["javascript", "json"],
      "filename": [".eslintrc", ".jsbeautifyrc"]
    },
    "css": ["css", "scss"],
    "html": ["htm", "html", "vue"]
  },

  // ==================== 原有特定插件保留 ====================
  "fittencode.languagePreference.displayPreference": "zh-cn",
  "fittencode.languagePreference.commentPreference": "zh-cn",

  // ==================== 平台特定设置（跨平台适配）====================
  "linux": {
    "terminal.integrated.defaultProfile.linux": "bash",
    "terminal.integrated.fontFamily": "'Noto Mono', 'Droid Sans Mono', monospace",
    // 统信UOS浏览器路径（用户确认的 /usr/bin/chromium）
    "browser.chrome.path": "/usr/bin/chromium",
    "liveServer.settings.AdvanceCustomBrowserCmdLine": "/usr/bin/chromium",
    "files.watcherExclude": {
      "**/.git/objects/**": true,
      "**/.git/subtree-cache/**": true,
      "**/node_modules/**": true,
      "**/dist/**": true
    }
  },
  "windows": {
    "terminal.integrated.defaultProfile.windows": "PowerShell",
    "terminal.integrated.fontFamily": "Consolas, 'Courier New', monospace",
    "browser.chrome.path": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
    "liveServer.settings.AdvanceCustomBrowserCmdLine": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe"
  },
  "osx": {
    "terminal.integrated.defaultProfile.osx": "zsh",
    "terminal.integrated.fontFamily": "Menlo, Monaco, 'Courier New', monospace",
    "browser.chrome.path": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
    "liveServer.settings.AdvanceCustomBrowserCmdLine": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
  }
}

四、配置生效检查

• Linux 用户：确保 /usr/bin/chromium 存在（如未安装，执行 sudo apt install chromium）。
• Windows 用户：确保 Chrome 安装在默认路径，否则请修改路径。
• macOS 用户：Chrome 默认安装在 /Applications，如有不同请修改。

五、操作流程：左侧编辑 + 右侧实时预览

1. 启动 Vue 项目

在 VSCode 中打开你的 Vue 项目，打开终端（Ctrl+`），运行：

npm run serve   # 或 npm run dev

等待开发服务器启动，通常会输出 Local: http://localhost:5173/（Vite 默认端口）。

2. 打开 Web Preview

• 按 Ctrl+Shift+P 打开命令面板。
• 输入 Web Preview: Show Preview 并回车。
• 预览窗口会以新标签页打开，自动加载 http://localhost:5173。

3. 将预览窗口拖拽到右侧分屏

• 右键点击预览标签页，选择 “移动到新编辑器组”（右侧）。
• 或者直接拖拽预览标签页到编辑器区域的右侧边缘，直到出现半透明阴影后松开。
• 现在你拥有了左右分屏：左侧是代码编辑器，右侧是实时预览窗口。

4. 开始编码

• 在左侧打开需要编辑的 Vue 文件（如 App.vue）。
• 修改代码并保存（Ctrl+S），右侧预览窗口会自动刷新，显示最新效果。
• 如果需要同时编辑多个文件，可以在左侧再次使用 Ctrl+\ 垂直分屏，将不同文件并排放置。

5. 利用响应式调试

• 预览窗口工具栏中有设备下拉菜单，可选择手机、平板等尺寸，方便调试响应式布局。
• 点击右上角“开发者工具”图标，可以打开内置 DevTools 检查元素。

六、跨平台环境一致性保障

• 字体：配置中使用了通用字体族，系统会选择合适的回退字体。
• 换行符：强制使用 LF（\n），避免跨平台换行符混乱。
• 终端配置：根据不同系统自动选择默认 Shell（Linux: bash, Windows: PowerShell, macOS: zsh）。
• 路径：浏览器路径已按各平台常见位置预设，请按需微调。

七、常见问题解答

Q：预览窗口显示空白怎么办？
A：确认 Vue 项目已成功运行，且端口确实是 5173。如果是 Vue CLI 项目（默认 8080），请修改 webPreview.url 为对应地址。

Q：Web Preview 无法连接？
A：检查项目终端输出，确保开发服务器正常运行。有时防火墙可能阻止连接，尝试关闭防火墙或允许 Node.js 进程。

Q：如何在预览窗口中调试？
A：预览窗口工具栏中有一个 “打开开发者工具” 按钮，点击即可打开类似 Chrome DevTools 的面板，可查看控制台、元素、网络等。

Q：预览窗口尺寸太小？
A：你可以拖动预览窗口与编辑器之间的分隔线，调整左右比例；也可以在预览窗口工具栏中关闭设备模拟，以全尺寸显示。

Q：Code Runner 的右键运行问题？
A：本配置不依赖 Code Runner 预览 HTML，对于 Vue 项目请使用上述流程。如需快速预览单个 HTML 文件，可使用 Live Server（右键 → Open with Live Server），Live Server 会在外部浏览器打开，但你可将其拖拽到 VSCode 右侧（需使用系统级分屏）。

八、最终验证

完成以上步骤后，你应该拥有一个完全一致的跨平台开发环境，能够在不离开 VSCode 的情况下，舒适地进行 Vue 开发与实时预览。如果遇到任何问题，请根据具体系统调整路径，或检查插件是否安装完整。

现在，享受高效的全栈开发吧！