webstorm不支持条件编译专用生成入口，需手动配置live templates实现；例如设abbreviation为envdev，template text为if (process.env.node_env === 'development') { $selection$ }，并勾选javascript/typescript作用域，启用reformat确保缩进。
WebStorm 本身不提供“条件编译”代码的专用生成入口（比如 #ifdef、process.env.NODE_ENV === 'development' 这类逻辑），它没有像 C/C++ 那样的预处理器支持，也不会自动为你插入环境判断块。所谓“一键生成”，实际是靠 Live Templates + 正确上下文触发实现的——不是功能开关，而是模板配置是否到位。
怎么用 Live Template 快速插入常见条件编译结构
例如想输入 envdev 后按 Tab 插入 if (process.env.NODE_ENV === 'development') { $SELECTION$ }，必须手动配模板：
- 进
Settings → Editor → Live Templates，新建分组（如Env） - 添加新模板：
Abbreviation填envdev，Template text填if (process.env.NODE_ENV === 'development') { $SELECTION$ } -
Define必须勾选JavaScript和/或TypeScript（取决于你写在哪种文件里）；不勾HTML或CSS，否则在错的地方也弹 - 务必启用
Reformat according to style，否则缩进会塌成一行
为什么 envprod / envtest 模板按 Tab 没反应
静默失败最常见原因不是模板没建好，而是光标位置或语言上下文不匹配：
- 光标不能在字符串里（比如已写了
console.log("env），Live Template 不会在字面量中激活 - 不能在注释行、JSON 值、
.d.ts声明文件、或<script setup></script>的顶层作用域外（Vue SFC 中需确保光标在<script></script>标签内） - 如果缩写是
envprod，但你在.css文件里输，即使模板定义了 JS，也不会触发——作用域检查是严格语言隔离的 - 部分插件（如某些 Markdown 渲染器）会劫持
Tab，可临时禁用验证
TS 项目中带类型守卫的条件编译怎么写才安全
Live Template 只负责结构，不推导类型。比如你要生成开发时打日志、生产时跳过的逻辑，别只写 if (process.env.NODE_ENV === 'development') 就完事：
- WebStorm 不会自动补全
declare global或NodeJS.ProcessEnv类型声明，得自己确保process.env.NODE_ENV类型是字面量联合类型（如'development' | 'production' | 'test'） - 若项目用
vite，推荐用import.meta.env.DEV替代process.env，模板内容应同步改为if (import.meta.env.DEV) { $SELECTION$ } - 依赖 ESLint 的
no-console规则时，模板里直接写console.log会导致生产构建报错——建议模板中留空或用占位符// dev-only: $SELECTION$
真正容易被忽略的是：条件编译逻辑一旦写进模板，就脱离了类型检查和 ESLint 约束。你复制粘贴十次 envdev，可能九次都忘了删掉里面的 console，最后一次上线就炸。所以比“怎么生成”更重要的是“生成后谁来校验”。
