CODEWITHSUNDEEP
regexvisual-studio-coderegexp-replacevscode-snippets
Marc K
Marc K

Reputation: 23

vscode snippet - multiple regex transformation filepath+filename

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

Upvotes: 2

Views: 385

Answers (2)

NewPythonUser1983
NewPythonUser1983

Reputation: 3

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.

Upvotes: 0

Wiktor Stribiżew
Wiktor Stribiżew

Reputation: 627468

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.

Upvotes: 2

Related Questions