emerald插件比javascript (es6) code snippets更适合日常开发,因其支持自定义变量占位、多光标联动和作用域限定,真正适配业务逻辑复用;后者仅提供固定语法模板,无法动态替换字段。

为什么emerald插件比JavaScript (ES6) code snippets更适合日常开发
因为后者只提供固定语法模板(比如for、if),而emerald支持自定义变量占位、多光标联动和作用域限定,真正适配业务逻辑复用场景。
常见错误是装了JavaScript (ES6) code snippets后发现写axios请求还要手动改URL和参数名——它不支持动态字段替换。
-
emerald的片段定义里可用${1:default}声明可编辑位置,按Tab顺序跳转 - 支持
scope字段,比如设为"javascriptreact",就只在.jsx文件中触发 - 片段保存路径是
~/.vscode/extensions/emerald.emerald-*/snippets/,不是用户配置目录,更新插件可能清空旧片段
如何让console.log自动带文件名和行号
直接写console.log容易在上线前漏删,且看不出日志来源。用自定义片段能强制注入上下文信息。
在emerald的snippets.json里加这段:
{
"log with location": {
"prefix": "logloc",
"body": ["console.log('%c${TM_FILENAME_BASE}:${TM_LINE_NUMBER}', 'color: blue;', $1);"],
"description": "log with file name and line number"
}
}
注意点:
-
${TM_FILENAME_BASE}和${TM_LINE_NUMBER}是VSCode内置变量,不用额外安装插件 - 别用
${fileBasename}——emerald不识别这个,会原样输出字符串 - 如果想高亮输出值,
%c后面要跟样式字符串,否则color: blue;会被当普通文本打印
useEffect依赖数组漏写导致的无限循环怎么提前拦截
靠人眼检查容易漏,不如把常用组合固化成片段,从源头减少错误。
推荐两个高频片段:
- “仅挂载”:前缀
uefmount→useEffect(() => {$1}, []); - “响应某状态”:前缀
uefdep→useEffect(() => {$1}, [${2:dep}]);,其中${2:dep}会高亮可编辑,Tab后自动跳到依赖项
关键细节:
- 不要写
useEffect(() => {}, [state])这种裸数组——万一state是对象或函数,浅比较永远为false,还是无限循环 - 如果真要监听对象,片段里应预留
JSON.stringify(${2:state})或提示加useMemo缓存 -
emerald不校验JS语法,所以片段里写错括号也不会报错,得靠自己测试触发效果
片段里调用Clipboard API读取剪贴板内容失败怎么办
想写个“粘贴JSON并格式化”的片段,但直接用navigator.clipboard.readText()会报Permission denied——VSCode插件运行在受限沙箱里,没权限访问浏览器API。
正确做法是换用VSCode原生API:
- 用
vscode.env.clipboard.readText()替代浏览器版,返回Promise<string></string> - 必须在
activationEvent触发后调用,不能放在片段body里直接执行(片段只是文本插入,不执行代码) - 真要实现“粘贴→解析→插入”,得写完整插件扩展,而不是靠代码片段
所以别在片段里塞异步逻辑,它只负责生成静态代码。需要交互行为的,该写Extension就写Extension。











