正则改造VS Code里React类组件的自定义snippet

我目前都习惯用 JS JSX Snippets 这个 VS Code 插件来快速编写 React 组件，然后发现快速生成类组件的 rcc 其中的类名可以跟着当前文件名自动变化，于是就研究了一下。

最后找到这篇非常棒的教程 https://blog.csdn.net/maokelong95/article/details/54379046 ，讲解得非常清楚。

但是，还有点细节让我的强迫症不爽：有些组件直接用一个JS文件，如 App.js ，这样里面使用 rcc 能自动生成 App 这个类名，但是，还有很多组件是用一个文件夹的，因为它的样式、以及一些子组件要放一起，如 \News\index.js ，这时使用 rcc 就只能生成 index 这个不合适的类名了，但显然我想要的是 News 做类名。

看到 snippets 变量转换的语法里，可以使用正则提取，并进一步格式化，那正好我复习一下正则，开搞。

期间各种心酸苦楚就不赘述了。就是发现只有占位符可以嵌套，可选项不能嵌套，变量转换的 if else 输出语法也不能嵌套，哎。。。最后思路改为，分别对 文件名 和 路径 进行正则匹配和提取，如果是 大写开头的 就提取成功，否则就只输出空格。所以代码风格很重要，组件就该用 Pascal 命名法。

<