/const meta = ([\s\S]*?) satisfies (Meta(.+));/g with a replace of const meta: $2 = $1; seems to be what I want, according to certain systems (e.g. regex101).

But it doesn't work in VSCode.

Example text to search:

const meta = {
  args: {
    description: 'This is a test alert for interaction testing.',
  },
  argTypes: {
    hasBackground: {
      control: 'boolean',
    },
    variant: {
      control: { type: 'select' },
    },
  },
  component: Alert,
  parameters: {
    design: {
      type: 'figma',
    },
  },
  title: 'Component/Alert',
} satisfies Meta<typeof Alert>;


const meta = {
  argTypes: {
    number: {
      if: { arg: 'size', eq: 'lg' },
    },
    size: {
      options: ['sm', 'md', 'lg'],
    },
    variant: {
      control: 'select',
    },
  },
  component: Badge,
  parameters: {
    design: {
      type: 'figma',
    },
  },
  title: 'Component/Badge',
} satisfies Meta<typeof Badge>;

Successful replacement:

How can I accomplish this regex find-and-replace in VSC across all my project's files?

Or is there some other tool I should use?

/const meta = ([\s\S]*?) satisfies (Meta(.+));/g with a replace of const meta: $2 = $1; seems to be what I want, according to certain systems (e.g. regex101).

But it doesn't work in VSCode.

Example text to search:

const meta = {
  args: {
    description: 'This is a test alert for interaction testing.',
  },
  argTypes: {
    hasBackground: {
      control: 'boolean',
    },
    variant: {
      control: { type: 'select' },
    },
  },
  component: Alert,
  parameters: {
    design: {
      type: 'figma',
    },
  },
  title: 'Component/Alert',
} satisfies Meta<typeof Alert>;


const meta = {
  argTypes: {
    number: {
      if: { arg: 'size', eq: 'lg' },
    },
    size: {
      options: ['sm', 'md', 'lg'],
    },
    variant: {
      control: 'select',
    },
  },
  component: Badge,
  parameters: {
    design: {
      type: 'figma',
    },
  },
  title: 'Component/Badge',
} satisfies Meta<typeof Badge>;

Successful replacement:

How can I accomplish this regex find-and-replace in VSC across all my project's files?

Or is there some other tool I should use?

• regex
• visual-studio-code
• replace

• 1 [\s\S] doesn't include newlines in VSCode's standard regex find and replace - adding \n to the character set makes it work: [\n\s\S] – mjsqu Commented Feb 4 at 0:14
• Thanks @mjsqu for the suggestion of adding \n into [\s\S] to solve the problem. But I don't really understand it, because VSCode does include newlines in \s. I often use [\s\S]* instead of .* as VSCode doesn't have the s = Dot all regex flag. Typically, we can see that it works with const meta = ([\s\S]+?\n\}) satisfies (Meta(.*?));. I can't really explain it, but would be interested to understand why. To avoid matching to far and having one single match instead of several matches, I would make it ungreedy like this: const meta = ([\s\S\n]+?) satisfies (Meta(.+?)); – Patrick Janser Commented Feb 4 at 11:28
• @mjsqu Wow! This worked! Thank you! If you write it as an answer, I'll accept it. I really appreciate your help. Like Patrick Janser, I would have guessed that \s\S would have been enough. – Ryan Commented Feb 4 at 13:28
• 1 I think I now understand a bit better: VSCode's inline search engine runs with JavaScript flavour and seems to have the multiline flag enabled and the s Dot all flag disabled. [\s\S]+ will match all non-empty lines, but what is confusing is that const [\s\S]+\n suddenly changes how it reacts and [\s\S]+ will "consume" all characters until the last \n of the file. Quite surprising! – Patrick Janser Commented Feb 4 at 13:55
• 1 Not sure why your question was downvoted - sounds like @PatrickJanser understands the 'why' of this more than me - thanks for that! I can write an answer borrowing from his findings... – mjsqu Commented Feb 4 at 21:50

1 Answer 1

Regex Multiline searches in VSCode

VSCode only includes newlines in search when a \n literal is included (see further reading section), so a potential solution here is to add \n to the character set (within [\S\s])

The 'find' pattern should be updated to:

/const meta = ([\n\s\S]*?) satisfies (Meta(.+));/g

The replace pattern is fine as suggested in the original question.

Further reading

Multiline regular expression search in Visual Studio Code https://code.visualstudio/updates/v1_29#_multiline-search