公司最近在搞开源代码扫描，前端使用Vue+Element作为主要的技术栈，Vue模板中代码成为了重灾区，尤其是在标签嵌套比较多的时候，尾部的标签很容易被判为重复，比如：
<div class="...">
<el-row>
<el-col>
<p>
<span>
....
<!-- 这部分代码很容易别判为重复 -->
</span>
</p>
</el-col>
</el-row>
</div>
<!-- 这部分代码很容易别判为重复 -->
起初的解决方法是在被扫到的代码中插入无实际意义，只是用来占位的自定义组件，如下：
<div class="...">
<el-row>
<el-col>
<p>
<span>
....
</span>
</p>
<!-- 使用自定义组件来分隔，组件没有实际作用，只是用来分隔开源重复代码 -->
<my-custom-compoennt/>
</el-col>
</el-row>
</div>
但是这种方式确实挺恶心的，一是搞乱了代码结构。二是在新的代码中你不确认哪些代码是重复的，只有每次通过扫描后，才被动的去修改。
于是决定使用修改标签名的方法，给模板标签名前面加上个有意义的前缀，比如项目名缩写、公司名缩写等等。比如下面的形式：
<my-div class="...">
<my-el-row>
<my-el-col>
<my-p>
<my-span>
....
</my-span>
</my-p>
</my-el-col>
</my-el-row>
</my-div>
像div、span这基本标签我们很容易写一个自定义组件来代替。但是像el-button、el-form这些element组件就不太容易替换掉了，于是自己就写了两个小小的Vue插件，分别为Element Plus、Element UI进行组件重命名。 具体使用方法可以查看下面的连接
最后我们需要修改原来的代码，来重命名标签。 借助VsCode强大正则替换功能，一键将所有标签重命名，非常方便。具体方法如下
- 点击VsCode菜单, 如下图所示
- 点击输入框右侧正则表达式按钮，输入
(<\/?)el, 该表达式会匹配所有<el、</el的文本，在下面输入框中输入你要改变的前缀，比如$1my-el-。然后点击全部替换按钮，这样代码中的<el-就替换成了<my-el-。</el-替换成了</my-el-
