vue项目需手动配置file watcher以弥补ide与构建工具间的空白，解决rpx/upx空格、scss/postcss未生效等问题；webstorm仅提供语法支持，不介入编译流程，而file watcher可在文件保存时触发命令补全这一环节。
Vue项目里加File Watcher不是为了“自动编译”，而是解决特定工具链没覆盖到的副作用问题——比如格式化后 rpx/upx 前多出空格、style 标签里 lang="scss" 改了但没触发编译、或者 PostCSS 规则没生效却查不到原因。
为什么 Vue 项目需要手动配 File Watcher？
WebStorm 自带的 Vue 支持只管语法高亮、跳转和基础校验，不介入构建流程。Vite 或 Vue CLI 的热更新是运行时行为，IDE 不感知；而 WebStorm 的 File Watcher 是文件系统层面的监听，只要文件保存（或按需实时触发），它就执行命令——这正好补上编辑器和构建工具之间的缝隙。
常见误判点：
- 以为开了
Vue.js插件就自动支持scss/postcss编译 —— 实际上只是识别语法，不执行转换 - 在
Settings → Languages & Frameworks → JavaScript → Libraries里加了vue类型定义，但没配File Watcher，style里的lang="less"依然不会生成 CSS - 用了
prettier格式化.vue文件，结果12 rpx被改成12 rpx（两个空格），导致 uni-app 渲染异常
修复 rpx/upx 前多余空格：用 sed 直接改文件
这是 uni-app / Taro 项目高频痛点：prettier 或 WebStorm 自带格式化会把 12rpx 拆成 12 rpx，而实际运行时只认紧挨着的 rpx 单位。
操作步骤：
-
Program填系统中sed可执行路径：macOS/Linux 直接填sed；Windows 需先装sed（如通过 Git for Windows 或 Cygwin），填完整路径如C:\Program Files\Git\usr\bin\sed.exe -
Arguments填：-i "s/ \([ru]\)px/\1px/g" $FilePath$（注意开头是空格，不是制表符） -
Output paths to refresh填：$FilePath$（必须显式声明，否则改完不刷新编辑器视图） -
File type选Vue.js Template，Scope选Project Files
⚠️ 注意：sed -i 在 macOS 上必须带空后缀（如 -i ''），但 WebStorm 的 File Watcher 模板不支持传空字符串参数，所以 macOS 用户建议改用 perl 替代：-i -pe 's/ ([ru])px/px/g' $FilePath$
