VSCode snippet导入React组件CSS时正则去除文件扩展名的正确写法

问题原因 #

你原有写法的问题是没有正确使用VS Code Snippet的变量语法，错误地把正则表达式直接写在了变量插值位置，没有遵循变量正则替换的格式要求。

正确配置 #

VS Code 内置了TM_FILENAME_BASE预定义变量，直接对应「去掉最后一个扩展名的当前文件名」，完全匹配你的需求，不需要额外写正则，配置如下：

// typescriptreact.json
"import component css": {
  "prefix": "icss2",
  "body": [
    "import \"./${TM_FILENAME_BASE}.css\";"
  ],
  "description": "导入当前组件对应的同目录CSS文件"
}

可选正则写法 #

如果你需要自定义处理文件名规则（比如适配多后缀场景），可以用标准的变量正则替换语法${变量/匹配正则/替换内容/标志位}，和上面写法效果一致的正则版本如下：

"import component css": {
  "prefix": "icss2",
  "body": [
    "import \"./${TM_FILENAME/^(.+)\\.[^.]+$/$1/}.css\";"
  ],
  "description": "导入当前组件对应的同目录CSS文件"
}

以上两种写法在MyComponent.tsx文件中触发后，都会输出你预期的import "./MyComponent.css";。

内容的提问来源于stack exchange，提问作者ANimator120