vscode扩展之根据Vue模板自动生成Sass结构

某次小组内开周会，提到开发效率的问题，有个小伙伴提到写新页面的时候，template大概布局写完后，对着 template结构写 scss是件比较耗时耗力的事情，如果能作出一个自动依据 template结构生成 scss文件的 vscode插件就好了

我当时也没在意，后来周会结束后觉得这事情可以做一下，于是抽空看了下 vscode扩展的开发文档，就上手 code了，做出来后效果还不错，最起码不用再做人工对着 template写 scss这种没技术含量的事情了，写好了一大堆 template之后，一键转换，还是挺爽的

插件已经发布到 vscode扩展市场，可以在vscode插件市场查找安装，或者 vscode上直接搜索 AutoScssStruct4Vue 安装

插件的源码已经上传到 Github ，需要的可自取，如果有问题，直接提 issue 即可

模板解析

scss文件的关键就是选择器，能在模板上体现出来的选择器属性有 class、id和标签名，所以必须要从模板中取得所有的选择器

模板的处理实际上就是字符串的处理，通过正则表达式从 <template>...</template>中提取所需的选择器名，既然是 vue，我第一个就想到直接从 vue源码中将 vue处理 template的部分抄过来，不过后来看了一下源码，想法可行，但是性价比不高

vue将 template解析成 ast的部分，与其他的一些处理逻辑耦合在一起了，而且处理了很多我并不需要的东西，比如指令、组件这些，我只是想取个选择器属性而已，所以这个想法就放弃了

再仔细一想，抛开 vue的那些东西来看（比如指令处理这些），其实处理 template跟处理普通的 html片段没太大区别，于是问题就变成了将html片段转为 ast，这个就容易很多了

不过还是有些差别，毕竟 vue的 template和普通 html片段之间的处理方式还是有点不同的，差异点在于 vue的一些特性，例如 v-bind语法，以及组件标签

v-bind

以下以 class这个选择器属性为例，id同此

因为考虑到 v-bind语法，所以在 parse模板时，正则表达式需要将这个考虑进去，属性匹配正则为：

const attrRE = /((:|v-bind:)?[\w$\-]+)|(?<word>["'"]){1}[\s\S]*?\k<word>/g;

这个正则会将标签的属性全都匹配，因为vue 的class属性有三种写法：

• 字符串
• 数组
• 对象

所以转换为 ast后，可能的结构有：

{
   
  attrs: {
   
    class: 'box1 box2'
  },
  bindAttrs: {
   
    class: "['box1', name]"
  }