Search code examples
visual-studio-codevscode-extensions

Why my VSCode language support extension works in dev mode but fails in live mode


VS Code Extension

I'm building an extension that provides additional langauge support to Quarto by tokenizing the Quarto inline footnote markdown notation: ^[I'm a footnote]. I write extensively in quarto with inline footnotes and that would really help me locate them.

Problem

The problem is that the extension works exactly as expected in dev mode (the f5 mode), but when I download it either as a .vsix or through the store, it doesn't work when live. I pushed it to the store the other day because I thought it worked as expected.

You can find the complete GitHub repository for the code available here.

{
  "$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
  "name": "Quarto",
  "patterns": [
    {
      "include": "#inlineFootnotes"
    }
  ],
  "repository": {
    "inlineFootnotes": {
      "patterns": [
        {
          "name": "meta.footnote.inline.quarto",
          "match": "\\^\\[.*?\\]"
        }
      ]
    }
  },
  "scopeName": "text.html.quarto.quartofn"
}

and here is my package.json

{
  "name": "quartofn",
  "displayName": "QuartoFootnoteHighlighter",
  "description": "This plugin provides highlighting for inline footnotes in Quarto file (^[I am a footnote]).",
  "version": "0.0.3",
  "publisher": "nkmwicz",
  "pricing": "Free",
  "repository": {
    "type": "git",
    "url": "https://github.com/nkmwicz/quartofn.git"
  },
  "engines": {
    "vscode": "^1.92.0"
  },
  "categories": [
    "Programming Languages"
  ],
  "extensionDependencies": [
    "quarto.quarto"
  ],
  "activationEvents": [
    "onLanguage: quarto"
  ],
  "main": "./src/extension.js",
  "contributes": {
    "languages": [
      {
        "id": "quarto",
        "aliases": [
          "Quarto",
          "quarto"
        ],
        "extensions": [
          ".qmd"
        ],
        "configuration": "./language-configuration.json"
      }
    ],
    "grammars": [
      {
        "language": "quarto",
        "scopeName": "text.html.quarto.quartofn",
        "path": "./syntaxes/quartofn.tmLanguage.json"
      }
    ]
  }
}

Any help would be greatly appreciated.

I have added an activationEvents: [onLanguage: quarto] and an extensions.js to ensure that the extension is running. It is and logging appropriately, but it is not captureing the regex appropriately to tokenize it. Basically, everything works that I do to check if it is connected, except tokenizing the captured pattern: it logs the language correctly, it logs when a quarto document is saved, etc.

All of these are unnecessary for the extension to work, but they have allowed me to ensure that it is reading correctly.

I have ensured that all the fields are filled out correctly. I've changed the grammars file name to ensure it doesn't conflict with Quarto. I built the extension with vsce package to generate a .vsix file.

I'm downloading it into vscode 1.93.0, and it is built with vscode "^1.92.0"


Solution

  • You are trying to override the Quarto language and grammar with your own.
    In dev mode, your extension has priority over all others.
    In user mode, the Quarto extensions id quarto.quarto is further in the alphabet than nkmwicz.quartofn, so it has priority.

    Instead of trying to override, you need to inject into Quarto's grammar.
    Remove "languages": [] from your package.json. You wont need it.
    Also remove "language": "quarto" from under "grammars".
    Add "injectTo" under "grammars".

    "injectTo": [ "text.html.quarto" ]
    

    It will inject your grammar into theirs.

    and you need to add an "injectionSelector" to your grammar.
    It controls what scopes to inject into within their grammar.
    injectionSelector