VS Code search and replace and change line order Vuejs

Question

I have this tag occurring in multiple files - same path but with different image files:

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

I want to replace the src line everywhere BUT I also need to move the new:src line up in order because the Vue js linter will say the:src needs to be before class and style.

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

I used regex replace and was able to replace the src line to the correct:src line. Given I have about 100 files to do this how can i do this quickly in VS Code?

My current search and replace regex is:

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

How can I adapt the two regex to search and replace across the whole <img> tag - this way in my replace regex I correct the line order at the same time.

Thanks a lot.

Answer 1

I guess that Multiline search can help you here. You can create group for different properties and then rearrange it. Also Search Editor feature of VS Code in combination with this experimental plugin might help.

However I'd not recommend to use regexp for such transformation, if there is alternative. The best possible way is to use autofix option of the rule (if it has it). I suspect that it is this rule that gives you an error: attributes-order . In this case you can simply run eslint with --fix flag, and it'll reorder props automatically.

Answer 2

One way to do it that keep your regex's a little simpler is to run two find and replaces in series. Using an extension like Replace Rules you can do this.

In your settings.json:

  "replacerules.rules": {

    "editImgSrc": {
      "find": "src=\"~/static/img/(.*?)\"",
      "replace": ":src=\"require('~/static/' + imgURL + '/$1')\""
    },
     "reorder vueImgSrc": {
                                              // get the src line and the two preceding lines
      "find": "((.*\r?\n){2})( *:src=\"require.*\r?\n)", 
      "replace": "$3$1"                                       // reorder them
    },
  },

  "replacerules.rulesets": {                // bundle the 2 find/replaces into one ruleset
  
    "Replace with vueImgSrc and reorder": {
      "rules": [
        "editImgSrc",
        "reorder vueImgSrc"
      ]
    }
  },

and then a keybinding to run that (in keybindings.json):

  {
    "key": "alt+w",                         // whatever keybinding you want
    "command": "replacerules.runRuleset",
    "when": "editorTextFocus && !editorReadonly",
    "args": {
        "rulesetName": "Replace with vueImgSrc and reorder"
    }
  },

---