VS Code BEMIT组件代码片段链式正则转换异常排查求助

Let's break down what went wrong with your regex chain and fix it step by step.

What Was Wrong #

Your original attempt at chained regex had two key issues:

1. Invalid regex syntax: The \(?!_\w\b) part had unnecessary escaped parentheses, and your grouping didn't properly target the component name after _c-.
2. Incorrect VS Code snippet transformation format: VS Code uses a strict syntax for nested transformations, and you mixed multiple operations in a way the editor couldn't parse—hence the unprocessed ${...} string in your output.

Correct Snippet Configuration #

Here's the fixed version that generates the exact output you want, with the component name converted to uppercase:

"New BEMIT Component": {
    "prefix": "new-bemit-component",
    "body": [
        "/* ========================================================================================= */",
        "/* COMPONENT - C ${TM_FILENAME_BASE/^_c-(.*)/${1:/uppercase}/} */",
        "/* ========================================================================================= */",
        "",
        ".${TM_FILENAME_BASE/[\\_]//}{",
        "",
        "}",
        "",
        "/* ========================================================================================= */",
        "/* END COMPONENT - C ${TM_FILENAME_BASE/^_c-(.*)/${1:/uppercase}/} */",
        "/* ========================================================================================= */"
    ],
    "description": "Create a BEMIT component structure with uppercase component name"
}

How It Works #

Let's break down the critical transformation part:

• ^_c-(.*): This regex matches the start of the filename base (^), skips the _c- prefix, then captures everything after it into group $1 (your component name, like indice).
• ${1:/uppercase}: This takes the captured group $1 and converts it to full uppercase, turning indice into INDICE.

For the selector line (.c-indice{), your original [\\_]// works perfectly—it removes the underscore from _c-indice to leave the valid BEM selector.

Testing It #

When you use the snippet in a file named _c-indice (with any extension), it will output exactly what you wanted:

/* ========================================================================================= */
/* COMPONENT - C INDICE */
/* ========================================================================================= */
.c-indice{

}

/* ========================================================================================= */
/* END COMPONENT - C INDICE */
/* ========================================================================================= */

If you prefer title case (e.g., Indice instead of INDICE) instead, just replace /uppercase with /capitalize in the transformation.

内容的提问来源于stack exchange，提问作者David Pinedo Solano