介绍
大家好，我是子柒，今天分享一个之前我自己开发的一个插件cssCodeReplacer。
开发背景
开发这个插件的背景是，以前我们react项目要把行间style全部改写为css样式，然后开始就傻傻的写了很多重复代码，一个个style进行手写转换，很麻烦。后面觉得有个这样的vscode插件就好了，好像找遍了没有，就只能自己写。
插件使用
功能点
以下介绍下实现的功能点：
- 将 css 样式转换为 react 的 style 行间样式
- 将 react 的 style 行间样式转换为 css 样式
- 将 classNames 里的横杠 css 类型转换为 styles 的写法,如：className='test-name'=>className={Styles.testName}
- 将 styles 写法转换为横杠的类名,如：className={styles.testName}=>className='test-name'。
- 将 css 名称（横杠连接）转换为小驼峰样式，例如：.css-name｛｝=>.cssName｛｝。
- 将驼峰样式转换为横杠连接的 css 样式，例如：.cssName｛｝=>.css-name｛｝。
所有命令
- cssToStyle:将css/less转换为react行间样式。
- styleToCss：将react行间样式转换为Css，这是第一个命令的相反过程。
- classNameToStyles：将ClassName转换为react styles样式，将类名转换为Styles.ClassName 例如：className='test-name'=>className={styles.testName}。
- stylesToClassName：将样式转换为ClassName，这是第三个命令的反向过程， 例如：className={styles.testName}=>className='test-name'。
- cssToCamel：将css横杠写法转换为驼峰样式，例如：.css-name｛｝=>.cssName｛｝。
- camelToSs：将驼峰名称转换为正常横杠名称，这是第五种用法的相反过程，例如：.cssName｛｝=>.css-name｛｝。
使用方法
使用alt+shift+s键将css/less代码转换为styles格式（cssToStyle）（对于mac：option+shift+s）。使用alt+shift+c键将styles代码转换为css（styleToCss）（对于mac：option+shift+c）。或者使用shift+command+P键转换代码，然后选择要转换的命令，可以自己设置快捷键。
写在最后
如果有可以优化或者有问题的地方，欢迎提出来，一起交流一下。
