Tampermonkey 内置编辑器入门:CodeMirror 界面与常用操作

Tampermonkey 自带一个基于 CodeMirror 的代码编辑器,官方主页对它的描述是「需要开发或修改脚本?没问题,Tampermonkey 内置了编辑器」。看懂别人的脚本、改两行配置、写自己的脚本,都在这里完成。
打开编辑器
- 管理面板里点脚本名称,进入该脚本的编辑器;
- 管理面板工具栏 + 新建脚本,直接进入带模板的编辑器。
界面结构
编辑器页面分三块:
- 顶部标签栏:
- 代码区:CodeMirror 编辑器,带语法高亮、行号、代码折叠;
- 底部状态栏:光标位置、保存状态等信息。
必会的三个操作
- 保存:Ctrl+S。保存即生效,不需要重启浏览器,刷新目标页面就能验证;
- 语法检查:编辑器集成 ESLint,写错的地方会在行内标出,见ESLint 检查;
- 元数据编辑:头部
==UserScript==块就是普通的注释行,直接改文本,保存时 Tampermonkey 重新解析——字段含义见元数据头总览。
编辑器设置
设置页的「编辑器」区可以调整编辑器行为(缩进、主题、自动补全等偏好),见官方主页对 editor settings 的说明;新手保持默认即可,写多了再按手感调。
编辑器的舒适区与边界
内置编辑器适合:小改动、临时修脚本、读代码。
不适合:大工程开发。脚本规模上去之后,常见做法是把代码放在本地文件、用专业编辑器(如 VS Code)维护,Tampermonkey 只负责加载——这条工作流见外部编辑器工作流。