VSCode - How to add a new pair of custom delimiters for block comments, when working with javascript files?

Question

Without having to write a new extension, I would like to be able to specify a new pair of delimiters for block comments, when working with .js files.

For example, someFile.js:

{# 
this is a custom 
multiline comment 
#}
function test() {
    // ...
}

Currently, after Initializing JS/TS languages features has been run, VSCode gives an error for the custom comment section as it doesn't know those {# and #} delimiters.

I've read this question which is related, but I haven't found which file to edit exactly... I've tried editing [VSCODE REP]/resources/app/extensions/javascript/javascript-language-configuration.json:

"blockComment":["/*","*/"]

to

"blockComment":["/*","*/","{#","#}"]

but without success.

What file should I change and what is the syntax to use?

UPDATE: I'm not sure why I'm downvoted. I'm not trying to use a new type of comment in javascript itself... I'm using Pebble as a preprocessor, to dynamically generate the final .js files. I mainly use this approach to write private comments that I don't want to be included in the final .js files.

Upvoted. I'm in a similar situation with HTML+Twig. HTML has arrow comments but for Twig templating I also need {# .. #} comments in the same file. I need different key combinations for the twig comments, and the default is kept for html comments. — szegheo, Oct 15 '20 at 10:19

score 2 · Answer 1 · answered Oct 06 '20 at 04:31

Two notes:

I don't think you can have more than one set of block comment symbols - how would the ide know which to apply. Try

"blockComment":["{#","#}"] // instead of "blockComment":["/*","*/","{#","#}"]

But then you lose the default block comment symbols which may or may not be a problem for you.

You must reload the window so that the language service can re-initialize.

If I do those things, I can insert your symbols around code but it looks like this:

{# some 
text #}

which is consistent with how the default block comments are handled - unless you select a preceding and following empty line as well as your text.

The javascript language configuration is located for me on Windows at C:\Users\Mark\AppData\Local\Programs\Microsoft VS Code Insiders\resources\app\extensions\javascript\javascript-language-configuration.json

using the Insiders' build.

It would be easy to make a keybinding to add and remove your block delimiters:

  {
    "key": "alt+/",
    "command": "editor.action.insertSnippet",
    //   "when": "editorTextFocus && editorHasSelection && resourceExtname =~ /\\.js/"
    "args": {
      "snippet": "{#\n$TM_SELECTED_TEXT\n#}"
    }
  },
  {
    "key": "shift+alt+/",
    "command": "editor.action.insertSnippet",
    //   "when": "editorTextFocus && editorHasSelection && resourceExtname =~ /\\.js/"
    "args": {
      "snippet": "${TM_SELECTED_TEXT/\\{#\r?\n([\\s\\S]*?)\r?\n#\\}/$1/}"
    }
  },

use whatever keybindings you want.

But as you know you will get the ide errors.

score 0 · Answer 2 · answered Oct 16 '20 at 14:52

I was in the same shoes (with html and twig), so I made some tweaks to solve this problem. It's quite ugly but seems working. At least until someone finds a better solution... Use at your own risk :)

First install the multi-command vs code extension.

Then add this to your settings.json:

  "multiCommand.commands": [
    // https://marketplace.visualstudio.com/items?itemName=ryuta46.multi-command
    // https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables
    // https://code.visualstudio.com/docs/getstarted/keybindings#_contexts
    // https://regex101.com/
    {
      "command": "multiCommand.twigCommentSelected",
      "label": "twigCommentSelected",
      "description": "Toggle Twig comment of selected text",
      "sequence": [
        {
          "command": "editor.action.insertSnippet",
          "args": {
            "snippet": "${TM_SELECTED_TEXT/^(\\s*)({# (.*) #})?(.*)/$1${3:-{# }$4${4:+ #\\}}/s}"
          }
        }
      ]
    },
    {
      "command": "multiCommand.twigCommentLine",
      "label": "twigCommentLine",
      "description": "Toggle Twig comment of current line",
      "sequence": [
        "cursorEnd",
        "cursorLineStartSelect",
        "multiCommand.twigCommentSelected"
      ]
    }
  ]

...and this to your keybindings.json:

  {
    // nothing selected, toggle line comment
    "key": "alt+numpad_divide",
    "command": "extension.multiCommand.execute",
    "args": { "command": "multiCommand.twigCommentLine" },
    "when": "editorTextFocus && !editorHasSelection && !editorReadonly && resourceExtname =~ /\\.js$/"
  },
  {
    // has selection, toggle block comment
    "key": "alt+numpad_divide",
    "command": "extension.multiCommand.execute",
    "args": { "command": "multiCommand.twigCommentSelected" },
    "when": "editorTextFocus && editorHasSelection && !editorReadonly && resourceExtname =~ /\\.js$/"
  }

This way ctrl + / keeps doing the default JavaScript commenting and alt + / will do something similar with your desired syntax.

VSCode - How to add a new pair of custom delimiters for block comments, when working with javascript files?

2 Answers2