VSCode のスニペットファイルでディレクトリ名を整形してコンポーネント名を取り出す

解決したいこと

VSCode のスニペット機能を呼び出したディレクトリを整形してコンポーネント名にしたい。

例
your-project/src/components/Core/Button/Text/index.storeis.ts

というファイルにおいて、スニペットを呼び出したときに以下のような出力を得たい。

import type { Meta, StoryObj } from '@storybook/vue3';
import CoreButtonText from './index.vue';

const meta: Meta<typeof CoreButtonText> = {
  component: CoreButtonText,
  argTypes: {
    props: {
      control: 'text',
    },
  },
};
export default meta;

このとき、CoreButtonText のようにパスからコンポーネント名を生成するのにハマりました。

解決方法

下記のようにスニペットファイルで正規表現を書けば良い。

.vscode/test.code-snippets

{
  "test": {
    "prefix": "test",
    "body": ["${TM_DIRECTORY/.*components\\/|[^0-9a-z]*//gi}"],
    "description": "test"
  }
}

出力結果
your-project/src/components/Core/Button/Text/index.storeis.ts

CoreButtonText