VS Code extension implemented by createAsyncLanguageServicePlugin is broken when a non-ts file is first opened in VS Code

[mizdra]

Summary

I use createAsyncLanguageServicePlugin to develop the VS Code extension (vscode-css-modules) and TypeScript Language Service Plugin (typescript-plugin-css-modules) for CSS Modules.

vscode-css-modules makes tsserver load typescript-plugin-css-modules by setting contributes.typescriptServerPlugins. It also sets activationEvents so that tsserver starts when the CSS file is opened. In addition, disable VS Code's built-in CSS extension (vscode.css-language-features) so that it do not conflict with vscode-css-modules.

packages/vscode/package.json:

{
  // ...
  "activationEvents": [
    "onLanguage:css"
  ],
  "contributes": {
    "typescriptServerPlugins": [
      {
        "name": "typescript-plugin-css-modules",
        "configNamespace": "typescript",
        "languages": [
          "css"
        ]
      }
    ],
  // ...
}

packages/vscode/src/index.cjs:

exports.activate = function activate() {
  console.log('[vscode-css-modules] Activated');

  // By default, `vscode.typescript-language-features` is not activated when a user opens *.css in VS Code.
  // So, activate it manually.
  const tsExtension = vscode.extensions.getExtension('vscode.typescript-language-features');
  if (tsExtension) {
    console.log('[vscode-css-modules] Activating `vscode.typescript-language-features`');
    tsExtension.activate();
  }
  // ...

packages/ts-plugin/src/index.cjs:

const { createAsyncLanguageServicePlugin } = require('@volar/typescript/lib/quickstart/createAsyncLanguageServicePlugin.js');
const { createCssModuleLanguagePlugin } = require('./language-plugin.cjs');
const ts = require('typescript');

module.exports = createAsyncLanguageServicePlugin(['.css'], ts.ScriptKind.TS, async (ts, info) => {
  return {
    languagePlugins: [createCssModuleLanguagePlugin()],
  };
});

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Start extension in VS Code",
      "type": "extensionHost",
      "request": "launch",
      "args": [
        // ...
        "--disable-extension=vscode.css-language-features",
        // ...

This usually works: tsserver has control over the CSS.

2024-12-27.2.00.33.mov

However, when VS Code is launched and the CSS file is first opened, the language feature does not work.

2024-12-27.1.59.12.mov

Reproduction

repository: https://github.com/mizdra/repro-volar-open-non-ts-file-first

1. Execute npm i in the terminal.
2. Open this workspace in VS Code.
3. Run "Start extension in VS Code" debug task (F5).
4. Hover a_2 and do Find all references

Expected behavior

a_2 in index.ts appears in the list.

Actual behavior

a_2 in index.ts does not appear in the list.

Additional context

This seems to be caused by createAsyncLanguageServicePlugin. If you use createLanguageServicePlugin instead, the problem does not reproduce.

You can try it by reverting mizdra/repro-volar-open-non-ts-file-first@028198a.

Environment

• VSCode: 1.96.2
• OS: Darwin arm64 24.1.0
• @volar/typescript: 2.4.11
• @volar/language-core: 2.4.11