vscode 片段 - 多个正则表达式转换文件路径+文件名答案

【问题标题】：vscode snippet - multiple regex transformation filepath+filenamevscode 片段 - 多个正则表达式转换文件路径+文件名
【发布时间】：2021-10-16 13:17:00
【问题描述】：

经过 1 周的搜索和尝试错误后，我提出了这个问题，希望有人愿意帮助我解决这个问题：

我的 VsCode Snippet 应该转换以下内容：

D:\FolderX\FolderY\src\Folder1\Folder2\Folder3

进入：

FOLDER1_FOLDER2_FOLDER3_FILENAMEBASE

Folder3 可以是可选的

如果到目前为止出现的是：

"body": [
    "${TM_DIRECTORY/^.+(src\\\\)(.*)$/${2:/upcase}${3:/upcase}/g}_${TM_FILENAME_BASE/(.*)/${1:/upcase}/}",
],

到目前为止的结果是：

FOLDER1\FODLER2\FOLDER3_FILENAMEBASE

所以我现在需要做的就是将\ 更改为_，但如果可能的话，我希望在一次转换中做到这一点..
有人对我的问题有想法或更好的解决方案吗？
非常感谢

【问题讨论】：

标签： regex visual-studio-code regexp-replace vscode-snippets

【解决方案1】：

你可以使用

"body": [
    "${TM_DIRECTORY/^(?:.*\\\\)?src\\\\|([^\\\\]+)|(\\\\)/${1:/upcase}${2:+_}/g}_${TM_FILENAME_BASE/.+/${0:/upcase}/}",
],

详情：

^ - 字符串开头
(?:.*\\\\)? - 任意零个或多个字符的可选序列，除了换行符，尽可能多的然后
src\\\\ - src\ 字符串
| - 或
([^\\\\]+) - 第 2 组：\ 以外的一个或多个字符
| - 或
(\\\\) - 第 3 组：\ 字符。

${1:/upcase}${2:+_} 替换意味着第 1 组始终以大写形式返回，如果第 2 组匹配（\ 字符），则将其替换为_ 字符。

${TM_FILENAME_BASE/.+/${0:/upcase}/} 被简化，因为有一个 $0 对整个匹配的反向引用，无需使用捕获组包装整个模式。

【讨论】：

嘿，到目前为止，这很好用，但我只是发现在 Linux 中有不同的路径字符。从我到目前为止所知道的，这应该有效：(\\\\) -> (\/)${TM_DIRECTORY/^(?:.*\/)?(src\/)|([^\/]+)|(\/)/${1:/upcase}${2:+_} 但 VSCode 没有显示正确的答案。路径示例：~/FolderX/FolderY/src/Folder1/Folder2/Folder3 \n 有帮助吗？谢谢
@MarcK 你只需要添加/，这样-^(?:.*[\\/\\\\])?src[\\/\\\\]|([^\\/\\\\]+)|([\\/\\\\])

【解决方案2】：

这个答案与问题没有直接关系，但是，由于@Wiktor Stribiżew 的回答，我在几个小时后设法让我的 sn-p 工作。

我正在从 dsznajder 修改标准 rfce sn-p - ES7+ React/Redux/React-Native sn-ps。

我在我的反应开发中使用以下结构：

src
|--components
|----NavBar
|------index.css
|------index.jsx

因此，在创建功能组件时，我需要使用文件夹的实际名称而不是文件名来创建它们。因此，下面是完整的 sn-p，我在自定义 javascriptReact sn-ps 中创建了它：

{
  "reactFunctionalExportComponent": {
    "prefix": "rfce_",
    "body": [
      "import './index.css';",
      "",
      "function ${1:${TM_DIRECTORY/^(?:.*\\\\)/$1/g}}() {",
      "  return(",
      "    <div>",
      "      <h1>${1:${TM_DIRECTORY/^(?:.*\\\\)/$1/g}}</h1>",
      "    </div>",
      "  );",
      "}",
      "",
      "export default ${1:${TM_DIRECTORY/^(?:.*\\\\)/$1/g}};",
      ""
    ],
    "description": "Creates a React Functional Component with ES7 module system"
  }
}

结果如下：

import "./index.css";

function NavBar() {
  return (
    <div>
      <h1>NavBar</h1>
    </div>
  );
}

export default NavBar;

我对类组件和箭头函数进行了类似的更改。

【讨论】：