How to change TM_FILENAME_BASE when creating snippets in vs code?

Question

I have a file named "Card.styled.js"

I want to create a snippet to write easier the styled component:

"styled": {
  "prefix": "styled",
  "body": [
    "import styled from \"styled-components\"",
    "",
    "export const ${1:${TM_FILENAME_BASE}} = styled.$2`",
    "",
    "${3}",
    "`"
  ]
}

But ${1:${TM_FILENAME_BASE}} is returning me Card.styled.

I want to return only Card in this case.

Answer 1

Card.styled is the correct TM_FILENAME_BASE of Card.styled.js. You will have to modify it further.

You want something like this:

  "styled": {
    "prefix": "styled",
    "body": [
      "import styled from \"styled-components\"",
      "",
      "export const ${1:${TM_FILENAME_BASE/(.*?)\\..*/$1/}} = styled.$2`",
      "",
      "${3}",
      "`"
    ]  
  } 

(.*?)\\..* get everything before the first . into capture group 1

Match the entire filename_base and replace it with only capture group 1 .