Vscode Jsx2less

如何使用

1. 复制 jsx 代码
2. 切到 less 文件
3. 光标换到你要生成 less 的地方
4. 右键选 jsx2less 或者 command + shift + p 选 jsx2less 或者 command + option + L
5. 代码格式化一下

配置说明

propertyName（默认值：className）

说明：要取的属性名

效果

export default () => {
  return (
    <div className={s.page}>
      <div className={s.title}></div>
    </div>
    <div className={s.page}>
      <div className={s.title}></div>
    </div>
  )
}

转换后

.page {
  .title;
}

.page {
  .title;
}

todo

• [ ] 兼容 className={${s.item} ${s.active}}这种。现在只支持 className={s.page} 这种纯洁 className