VS Code 直接写大屏页面最轻快可控，需用 Live Server 启动、根元素设物理分辨率宽高、字体用 px、ECharts 用 CDN 全量引入、Canvas 用 requestAnimationFrame、动态适配高 DPI 屏并 mock 实时数据。
用 HTML/CSS/JS 在 VS Code 里直接写大屏页面，别装插件
VS Code 本身不是可视化编辑器，但写大屏页面根本不需要拖拽工具——95% 的大屏项目就是纯 HTML + CSS + JS（或加个 Vue / React），VS Code 反而是最轻快、最可控的选择。
常见错误现象：Live Server 启动后页面空白、字体模糊、缩放错位、F11 全屏不生效。这些问题几乎都出在「没按大屏物理分辨率写样式」或「本地文件协议限制」。
- 用
Live Server扩展启动服务（不要双击打开index.html），否则跨域、fetch、import会失败 - 根元素设
width/height必须严格对应目标屏幕分辨率，比如 1920×1080 就写1920px/1080px，别用100vw/100vh—— 浏览器边框、任务栏会吃掉真实可用尺寸 - 字体单位统一用
px，别用rem或em，缩放逻辑必须完全可控
Canvas 和 ECharts 图表在 VS Code 里怎么热更新不刷新
改一行 JS 数据，不用手动 F5 刷新就能看到图表变化，这是大屏开发的刚需。但默认配置下，Live Server 不监听 node_modules，ECharts 的按需引入或 Canvas 动画重绘容易卡住。
使用场景：调试轮播指标、模拟实时数据流、调整 canvas 坐标偏移。
- 确保
script标签引入的是完整版 ECharts：<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>，别用模块化 import（本地无打包环境时会报Cannot use import statement outside a module） - Canvas 动画用
requestAnimationFrame，别用setInterval，否则热更新后容易叠加多个定时器，CPU 突增 - 在
Live Server设置里勾选"liveSassCompile.settings.extensionList"无关，重点是关掉"liveServer.settings.donotShowInfoMsg"—— 出错时它会弹提示，帮你快速定位路径 404
大屏适配 4K 屏时 CSS 缩放失真的真实原因
不是缩放比例设错了，是浏览器渲染层对高 DPI 屏幕的像素比处理和 CSS transform: scale() 不兼容。你在 1920×1080 写的页面，投到 3840×2160 屏上直接拉伸，文字发虚、线条锯齿，根本不是“高清”。
性能影响：用 scale(2) 强制放大，会让 canvas、SVG 渲染分辨率翻倍，GPU 占用飙升；用媒体查询切换不同尺寸 CSS，又难维护。
- 最优解是用
window.devicePixelRatio动态设置根字体大小：document.documentElement.style.fontSize = 16 * window.devicePixelRatio + 'px';，再配合vw/vh布局（仅限非关键尺寸，如间距） - 所有图表容器宽高必须用固定
px值（如width: 800px），然后用transform: scale(2)+transform-origin: 0 0整体缩放，同时body加overflow: hidden防滚动条干扰 - Chrome 115+ 开始支持
@media (resolution: 2dppx)，但别依赖——很多政企大屏还在用 Chrome 90~102，查不到该特性
本地开发时 mock 实时数据的最小可行方案
等后端接口？不现实。大屏页面往往要跑通「每 3 秒更新一次折线图」这种逻辑，而你连 WebSocket 地址都没有。
容易踩的坑：setInterval 里直接 fetch('/api/data')，结果控制台刷满 net::ERR_CONNECTION_REFUSED；或者用 Mock.js 但没关掉真实请求拦截，上线后忘了删。
- 用一个
mockData.js文件导出生成函数，比如genRealtimeTraffic()，返回带时间戳、随机波动的数组，前端直接调用，零依赖 - 在主 JS 里加开关：
const IS_MOCK = location.hostname === 'localhost';，避免误提交测试逻辑 - 如果必须模拟延迟，用
setTimeout包一层 Promise，别用async/await配fetch——没有服务端时，Promise 会永远 pending
大屏最麻烦的从来不是写代码，是让同一套代码在 1080P 演示机、4K 指挥中心、甚至 iPad 投屏上都不糊、不滚、不错位。这些细节没在 package.json 里，也不靠插件自动修，得一行行试出来。
