时间戳

首页 > 解决方案 > VS Code 搜索替换和更改行顺序 Vuejs

regex - VS Code 搜索替换和更改行顺序 Vuejs

问题描述

我有这个标签出现在多个文件中 - 相同的路径但具有不同的图像文件：

<img 
        id="logo"            
        style="margin-left:170px;margin-top:8px;width:85px"
        class="shrunk"
        src="~/static/img/poweredby-grey.png"
        alt=" logo" 
      >

我想在任何地方替换 src 行，但我还需要按顺序移动新的 :src 行，因为 Vue js linter 会说 :src 需要在类和样式之前。

<img 
        id="logo"
        :src="require('~/static/' + imgURL + '/poweredby-grey.png')"            
        style="margin-left:170px;margin-top:8px;width:85px"
        class="shrunk"             
        alt=" logo" 
      >

我使用了正则表达式替换，并且能够将 src 行替换为正确的 :src 行。鉴于我有大约 100 个文件要执行此操作，我如何在 VS Code 中快速执行此操作？

我当前的搜索和替换正则表达式是：

 src="~/static/img/(.+?)"
 :src="require('~/static/' + imgURL + '/$1')"

如何调整两个正则表达式以搜索和替换整个<img>标签 - 这样在我的替换正则表达式中我同时更正了行顺序。

非常感谢。

标签： regexvue.jsvisual-studio-code

解决方案

我想多行搜索可以在这里为您提供帮助。您可以为不同的属性创建组，然后重新排列它。VS Code 的搜索编辑器功能与此实验性插件相结合可能会有所帮助。

但是，如果有替代方法，我不建议使用正则表达式进行此类转换。最好的方法是使用规则的自动修复选项（如果有的话）。我怀疑是这条规则给你一个错误：attributes-order。在这种情况下，您可以简单地eslint使用--fix标志运行，它会自动重新排序道具。

推荐阅读