TypeScript-Plugin-Styled-Components样式组件调试增强插件
TypeScript 的样式组件调试小助手，typescript-plugin-styled-components 是个挺实用的小插件。主要用在你写 styled-components 的时候，能把组件名编译进去，调试时看到的名字更清晰，不会全是匿名函数那一堆。用过 Babel 插件那一套的同学应该挺熟悉这个思路，不过这款是专门给 TypeScript 用的。
这玩意儿对你有用的前提是：你得用 tsc、ts-loader 或 awesome-typescript-loader 来编译。用 babel + ts 的话，这插件不生效，建议还是继续用 babel-plugin-styled-components 就行。
安装也简单，开发依赖里加一下：
npm install --save-dev typescript-plugin-styled-components记得在 tsconfig.json 里配置下 plugins 字段，不然它不会生效哦：
{
"compilerOptions": {
"plugins": [
{ "transform": "typescript-plugin-styled-components" }
]
}
}实际体验还不错，组件名出来得干净，配合 VSCode 的高亮插件用着更顺手。调试的时候也更直观，尤其是样式出问题的时候，不用一层层扒。
如果你平时用 React + TypeScript + styled-components 开发，挺推荐装一个。可以看看下面这些相关文章，都是实战方向的：
- POC Styled Components with TypeScript
- VSCode Styled Components：优雅突显组件样式语法
- React 开发模板：TypeScript、Styled-Components 等
- TypeScript、ReactJS、NextJS 和样式化组件样板
如果你项目里还没加，那下次调样式头疼的时候，就会想起它了～
文件大小：177.76KB
评论区