VSCode 片段中用于删除文件扩展名的正则表达式语句

Question

我想创建一个 VS-Code 片段，用于将 css 导入到 React 组件中。如果我在“MyComponent.tsx”中使用代码片段，那么我希望代码片段为组件导入关联的 css 文件：

import "./MyComponent.css";

组件及其 css 将始终位于同一目录中。

我认为以下代码片段可以做到这一点：

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

但这会导致：

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

正确的做法是什么？

Answer 1

您可以使用

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

${TM_FILENAME_BASE} 变量保存没有路径的文件名， ^(.*)\..* 正则表达式匹配并捕获最后一个 . 之前的所有内容，同时只匹配扩展名，并且只匹配由于替换模式（指第 1 组值），捕获的部分仍然存在。

Answer 2

"import component css": {
    "prefix": "icss2",
    "body": [
        "import \"./${TM_FILENAME_BASE}.css\";"
    ],
    "description": ""
}

TM_FILENAME_BASE The filename of the current document without its extensions

来自 snippet variables documentation.

因此无需通过转换删除 .tsx 扩展 - 它已经为您完成。

更有趣的问题是，如果你有一个像

这样的文件怎么办？

myComponent.next.tsx // 最后的结果应该是什么？

${TM_FILENAME_BASE} 只会去掉最后的 .tsx 导致 import "./myComponent.next.css";

@Wiktor 在 import "./myComponent.css";

中的结果

你的情况哪个是正确的？ myComponent.next.tsx 之类的情况是否适合您？如果不只是使用 ${TM_FILENAME_BASE} 而不需要转换。

VSCode 片段中用于删除文件扩展名的正则表达式语句

Regex Statement in VSCode snippet for removing file extension

regex

code-snippets

vscode-snippets