vscode snippet - multiple regex transformation filepath+filename

Question

after 1 week of searching and try&error I'm creating this question in the hope of someone willing to help me out on this one:

My VsCode Snippet should transform the following:

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

into:

FOLDER1_FOLDER2_FOLDER3_FILENAMEBASE

Folder3 could be optional

what if come up so far is:

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

and the result so far is:

FOLDER1\FODLER2\FOLDER3_FILENAMEBASE

so all I need to do now is change the \ to _ but I want that in one transformation if it's possible..
Anyone have an idea or better solution for my problem?
Thanks alot

score 1 · Accepted Answer · answered Aug 13 '21 at 09:45

1

You can use

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

Details:

^ - start of string
(?:.*\\\\)? - an optional sequence of any zero or more chars other than line break chars as many as possible and then
src\\\\ - src\ string
| - or
([^\\\\]+) - Group 2: one or more chars other than \
| - or
(\\\\) - Group 3: a \ char.

The ${1:/upcase}${2:+_} replacement means that Group 1 is always returned uppercased, and if Group 2 matches (a \ char), it is replaced with a _ char.

The ${TM_FILENAME_BASE/.+/${0:/upcase}/} is simplified as there is a $0 backreference to the whole match, no need to wrap the whole pattern with a capturing group.

answered Aug 13 '21 at 09:45

Wiktor Stribiżew

607,720
39
448
563

Hey there, until now this worked great but I just figured that in Linux there are different path characters. From what I've figured out so far, this should work: `(\\\\) -> (\/)` `${TM_DIRECTORY/^(?:.*\/)?(src\/)|([^\/]+)|(\/)/${1:/upcase}${2:+_}` but VSCode doesn't show the correct answer. Example of path: `~/FolderX/FolderY/src/Folder1/Folder2/Folder3` \n Any help? Thanks – Marc K Aug 25 '21 at 14:18
1

@MarcK You need to just add `/`, this way - `^(?:.*[\\/\\\\])?src[\\/\\\\]|([^\\/\\\\]+)|([\\/\\\\])` – Wiktor Stribiżew Aug 25 '21 at 14:27

score 0 · Answer 2 · edited Jan 31 '22 at 18:32

This answer is not directly related to question, however, it is because of the answer from @Wiktor Stribiżew, that I managed to make my snippet work, after a couple of hours on this.

I am modifying the standard rfce snippet from dsznajder - ES7+ React/Redux/React-Native snippets.

I work with the following structure in my react dev:

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

So, when creating the functional components, I need to create them with the actual name of the folder, and not the file name. Therefore, below is the full snippet, and I created this in the custom javascriptReact snippets:

{
  "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"
  }
}

The result looks like this:

import "./index.css";

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

export default NavBar;

I have made similar changes for class components and also arrow functions.

vscode snippet - multiple regex transformation filepath+filename

2 Answers2

Linked