Regex Statement in VSCode snippet for removing file extension

Question

I'd like to create a VS-Code snippet for importing css into a react component. If I'm using the snippet in "MyComponent.tsx", then I'd like the snippet to import the associated css file for the component:

import "./MyComponent.css";

The component and it's css will always be located in the same directory.

I thought that the following snippet would be able to do this:

//typescriptreact.json
      "import componet css": {
        "prefix": "icss2",
        "body": [
          "import \"./${1:$TM_FILENAME/^(.+)(\.[^ .]+)?$/}.css\";"
        ],
        "description": ""
      },

But this results in:

import "./MyComponent.tsx/^(.+)([^ .]+)?$/.css";

What's the correct way to do this?

Answer 1

You can use

"import componet css": {
    "prefix": "icss2",
    "body": [
      "import \"./${TM_FILENAME_BASE/^(.*)\\..*/$1/}.css\";"
    ],
    "description": ""
}

The ${TM_FILENAME_BASE} variable holds the file name without the path, and the ^(.*)\\..* regex matches and captures all up to the last . while just matching the extension, and only the captured part remains due to the $1 replacement pattern (that refers to Group 1 value).