如何开发VSCode类JavaScript新语言扩展并启用ES6智能提示？

算力阿峰

2026-5-20

解决方案：让自定义类JS语言同时继承JS特性+叠加自定义能力

我来帮你搞定这个问题，核心思路是把你的script.code文件对应的自定义语言设置成JavaScript的超集，这样既能自动继承ES6的智能提示、语法规则等原生特性，又能无缝叠加你自己的自定义提示、代码片段和调试器。下面是一步步的具体实现：

1. 配置自定义语言与JavaScript的关联

首先在扩展的package.json里完成基础配置，让VSCode把你的自定义语言和JS关联起来：

1.1 注册自定义语言标识符

在contributes.languages里定义你的语言ID、关联扩展名，并指向自定义配置文件：

"contributes": {
  "languages": [
    {
      "id": "customscript", // 给你的语言起个专属ID，比如customscript
      "aliases": ["Custom Script", "customscript"],
      "extensions": [".code"], // 对应你的script.code文件后缀
      "configuration": "./language-configuration.json" // 语言配置文件路径
    }
  ]
}

1.2 继承JavaScript的核心配置

创建language-configuration.json文件，直接继承JS的配置，这样就能复用JS的语法高亮、括号匹配、自动缩进，最重要的是自动启用JS的原生智能提示：

{
  "extends": "javascript",
  // 这里可以添加你的语言专属配置，比如额外关键字、自定义缩进规则等
}

2. 添加自定义智能提示（不覆盖JS原生提示）

VSCode会自动合并多个智能提示提供者的结果，所以你只需要注册自己的自定义提示，原生JS的提示会自动保留：

在扩展主文件（比如extension.js）里注册一个针对customscript语言的提示提供者：

const vscode = require('vscode');

function activate(context) {
  // 注册自定义智能提示
  const customCompletionProvider = vscode.languages.registerCompletionItemProvider(
    'customscript', // 对应你的语言ID
    {
      provideCompletionItems(document, position, token, context) {
        // 定义你的自定义提示项
        const customItems = [
          new vscode.CompletionItem('MyCustomObject', vscode.CompletionItemKind.Class),
          new vscode.CompletionItem('myCustomUtility()', vscode.CompletionItemKind.Function)
          // 可以继续添加更多自定义提示...
        ];
        
        // 返回自定义提示，VSCode会自动和JS原生提示合并展示
        return customItems;
      }
    },
    '.' // 可选：指定触发提示的字符，比如输入"."时弹出自定义对象的属性
  );

  context.subscriptions.push(customCompletionProvider);
}

exports.activate = activate;

这样用户在script.code里输入Object.时，会看到ES6的原生智能提示；输入自定义关键字或触发字符时，会同时看到你的自定义提示选项。

3. 注册自定义代码片段

在package.json的contributes.snippets里配置你的专属片段，还可以让JS的原生片段在自定义语言中生效：

"contributes": {
  // ... 前面的语言配置 ...
  "snippets": [
    {
      "language": "customscript",
      "path": "./snippets/customscript.code-snippets" // 你的自定义片段文件
    },
    // 可选：让JS的原生代码片段在自定义语言中可用
    {
      "language": "customscript",
      "path": "./node_modules/vscode/javascript/snippets/javascript.code-snippets"
    }
  ]
}

然后创建customscript.code-snippets文件，编写你的自定义片段：

{
  "Custom Async Function Template": {
    "prefix": "customasync",
    "body": [
      "async function ${1:functionName}(${2:params}) {",
      "  try {",
      "    ${3:// TODO: implement async logic}",
      "    return ${4:result};",
      "  } catch (err) {",
      "    console.error(err);",
      "  }",
      "}"
    ],
    "description": "Async function template for Custom Script"
  }
}

4. 配置调试器

如果你的类JS语言可以用Node.js环境运行，直接复用Node.js调试器即可：

在package.json的contributes.debuggers里添加关联：

"contributes": {
  // ... 其他配置 ...
  "debuggers": [
    {
      "type": "node", // 复用Node.js调试器
      "languages": ["customscript"] // 关联到你的自定义语言
    }
  ]
}

如果需要自定义调试逻辑，你可以自己实现调试适配器，但大部分类JS场景下，复用Node.js调试器就能满足需求。

验证效果

完成所有配置后，重新加载VSCode扩展：

打开script.code文件，输入Object.，应该能看到ES6的原生智能提示
输入自定义片段的前缀（比如customasync），应该能触发自定义代码片段
调试时选择Node.js调试器，就能直接调试你的script.code文件

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

如何开发VSCode类JavaScript新语言扩展并启用ES6智能提示？

1. 配置自定义语言与JavaScript的关联 #

1.1 注册自定义语言标识符 #

1.2 继承JavaScript的核心配置 #

2. 添加自定义智能提示（不覆盖JS原生提示） #

3. 注册自定义代码片段 #

4. 配置调试器 #

验证效果 #