Sublime中worker类型script标签无JS语法高亮问题咨询

问题原因 #

• Sublime Text 内置的 HTML 语法高亮规则仅对预设的 JS 相关 script type（比如 text/javascript、module）启用 JavaScript 语法高亮解析。
• 自定义的 javascript/worker、worker-script 这类非标准 type 不在默认识别列表中，编辑器会将标签内的内容识别为普通纯文本，因此没有语法色彩区分。

解决方案 #

方案1：使用独立Worker文件（最推荐） #

这是Web Worker的标准用法，完全规避内联script的高亮问题，同时有利于代码拆分、缓存和维护，也更符合前端工程化规范。
示例实现：

1. 新建独立文件 worker1.js，写入Worker逻辑：

// worker1.js
self.onmessage = function(e) {
  self.postMessage('msg from worker');
};
// 其余Worker代码

2. 主页面直接调用该文件创建Worker：

// 主页面JS
const worker = new Worker('./worker1.js');
worker.onmessage = function(e) {
  console.log("Received: " + e.data);
}
worker.postMessage("hello");

如果需要实现两个函数并行，可以创建两个Worker实例分别对应不同逻辑，也可以在同一个Worker内通过消息参数区分要执行的逻辑。

方案2：配置Sublime Text识别自定义script type #

如果必须保留内联Worker的写法，可以修改编辑器配置，让其识别自定义type为JS内容：

1. 通过Package Control搜索安装 ApplySyntax 插件
2. 打开ApplySyntax的配置文件，新增规则：

{
  "syntaxes": [
    {
      "syntax": "JavaScript/JavaScript",
      "rules": [
        {"file_extension": "html"},
        {"contains": "<script type=\"javascript/worker\""}
      ]
    }
  ]
}

配置后Sublime就会给type="javascript/worker"的script标签启用JS语法高亮。

方案3：使用模板字符串封装Worker逻辑 #

如果不想修改编辑器配置，也不想拆分文件，可以用带语法高亮提示的模板字符串封装Worker代码，配合Sublime的es6-string-javascript插件使用，模板字符串前加对应注释标识即可触发高亮：

const workerCode = /* js */`
self.onmessage = function(e) {
  self.postMessage('msg from worker');
};
`;
const blob = new Blob([workerCode], { type: "text/javascript" });
const worker = new Worker(window.URL.createObjectURL(blob));

内容的提问来源于stack exchange，提问作者user17473676