what is the differnece between resourceLangId and editorLangId in vs code extension development?

I am developing and extension which requirements is that it should work only with css files ( .css, .scss and .less ) file

I have key binding added in package.json for execution of command but problem is that now it is available for any file, so to make this condition, searching the document and found this when clause context. and added in package.json

package.json

keybindings": [
      {
        "command": "css-color-collector.collect",
        "key": "ctrl+f7",
        "mac": "cmd+f7",
        "when": "(editorTextFocus && editorLangId == css) || (editorTextFocus && editorLangId == scss)"
      }
    ],
"languages": [
      {
        "id": "css",
        "extensions": [
          ".css", ".scss", ".less"
        ],
        "aliases": [
          "css",
          "sass",
          "scss",
          "less",
          "CSS",
          "SCSS"
        ],
        "mimetypes": [
          "text/css"
        ]
      }
    ],

    "menus": {
      "commandPalette": [
        {
          "command": "css-color-collector.collect",
          "when": "editorLangId == css || editorLangId == scss ||  editorLangId == less"
        }
      ]
    }

but extension still activate for other than css file?

further I see there is an option under resoure contexts

resourceLangId ?

so my question is what is the significant difference between resourceLangId and editorLangId and which one we have to use?

addition query

Is there is any shorter way to add all condition in when clause

currently writing


(editorTextFocus && editorLangId == css) || (editorTextFocus && editorLangId == scss)

but

editorTextFocus && (editorLangId == css) || editorLangId == scss)

doesn't seem to work here

Solution

For your use case there is no real difference between resourceLangId and editorLangId. They both will have the active text editor's language ID. resourceLangId can additionally be used to indicate what resource, like a file or folder has been right-clicked on in the Explorer - the editorLangId will not give you that value.

So resourceLangId can be used in a context menu when clause when you want to know which file/folder was right-clicked on and whether to show a command in the resulting context menu.

You should continue to use editorLangId since you have no use of the extra functionality of resourceLangId.

This is the shortest when clause I could think of that works for what you want to do - the right side is a regular expression.

"when": "editorTextFocus && editorLangId =~ /^(css|scss|less)$/i"

This also works:

"when": "editorTextFocus && (editorLangId == css || editorLangId == scss || editorLangId = less)"