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

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

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

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

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

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

// C:\Users\用户名\AppData\Roaming\Code\User\snippets\rcc.code-snippets 文件

{
	"React Class Component": {
		"scope": "javascript,typescript",
		"prefix": "rcc",
		"body": [
			"import React, { Component } from 'react';\n",
			"export default class ${1:${TM_FILENAME_BASE/(^[A-Z]\\w*$)/${1:- }/}}${2:${TM_DIRECTORY/^[C-H]:\\\\[\\S ]+\\\\([A-Z]\\w*)$/${1:- }/}} extends Component {",
			"  render () {",
			"    return (",
			"      <div>",
			"        ${3:${TM_FILEPATH/^[C-H]:\\\\[\\S ]+(\\\\src\\\\\\S+)$/$1/}}",
			"      </div>",
			"    );",
			"  }",
			"}\n"
		],
		"description": "生成React类组件"
	}

}

如果 文件名 和 目录名 都是大写开头，也没事，毕竟是嵌套在占位符里的，按 Tab 键可以快速定位，二选一，再按一下退格键就删了，也是因此两种类名的占位符之间我都没留空格，哈哈哈

稍微解释一下为什么那么多反斜杠 \ ，因为这是字符串，VS Code读取的时候就会进行转义一次，然后才是正则里需要的转义，所以就 4个 \ 才表示匹配一个 \ 。当然，我这正则不一定考虑的很周全，才疏学浅。

最后，也是最重要的，其实这个类名是无所谓的，可有可无，随便叫啥，我只是满足一下自己的细节强迫症，以及复习一下正则，万一有大佬看到此文，还请轻喷哈。