Debug a json with comments

Question

I'm creating a VScode theme and I have a long json file like this:

{
    "name": "mytheme",
    "type": "dark",
    "colors": {
        //////////////////////////////
        // CONTRAST COLOR 
    // The contrast colors are typically only set for high contrast themes. 
    // If set, they add an additional border around items across the UI to increase the contrast.
    //////////////////////////////
        // An extra border around active elements to separate them from others for greater contrast.
        // "contrastActiveBorder": "#FFFFFF00",
        // An extra border around elements to separate them from others for greater contrast.
        // "contrastBorder": "#FFFFFF00",

    //////////////////////////////
    // BASE COLORS 
    //////////////////////////////
    // Overall border color for focused elements. This color is only used if not overridden by a component.
    "focusBorder": "#aa6DFF66",
    // Overall foreground color. This color is only used if not overridden by a component.
    "foreground": "#aaE0E8",
    // Shadow color of widgets such as Find/Replace inside the editor.
    "widget.shadow": "#112330",
    // Background color of text selections in the workbench (for input fields or text areas, does not apply to selections within the editor and the terminal).
    "selection.background": "#9B6DFF99",
    // Foreground color for description text providing additional information, for example for a label.
    "descriptionForeground": "#808182",
    // Overall foreground color for error messages (this color is only used if not overridden by a component).
    "errorForeground": "#9B6DFF",
    // The default color for icons in the workbench.
    "icon.foreground": "#D9E0E8",
    ...

I want to try it so I follow this official article. It says to press f5 to open Extension Development Host window. If I press f5, I get this popup

You don't have an extension for debugging 'JSON with Comments'. Should we find a 'JSON with Comments' extension in the Marketplace?

If I press find or cancel, I can't open the Extension Development Host window.

I try pressing f5 on when I had open the package.json file (that has no comments) but it's the same. How can I debug a json file with comments.

Remove comments is not an option, it's a very long file, comments make it readable and understandable.

JSON does not support comments by default, and I doubt VSCode will be able to read a json file with comments. See https://stackoverflow.com/questions/244777/can-comments-be-used-in-json for more information. — RedYetiDev, Dec 21 '21 at 21:00
you have to define a launch config for the extension, and select this config in the debug bar and then press F5 — rioV8, Dec 21 '21 at 21:19
@rioV8 what do you mean? Where can i fine a guide to do what you say? — whitecircle, Dec 22 '21 at 07:05
a theme is just a regular extension, read the development of the Hello World extension — rioV8, Dec 22 '21 at 08:40
JSON is just static data. What debugging do you expect to perform on it? — Álvaro González, Dec 23 '21 at 07:14

score -1 · Accepted Answer · answered Dec 23 '21 at 07:11

Solved creating this launch.json file inside .vscode folder:

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "extensionHost",
      "request": "launch",
      "name": "Launch Extension",
      "runtimeExecutable": "${execPath}",
      "args": [
        "--extensionDevelopmentPath=${workspaceFolder}"
      ],
      "outFiles": [
        "${workspaceFolder}/out/**/*.js"
      ],
    },
  ]
}

Debug a json with comments

1 Answers1