VS Code 搜索替換和更改行順序 Vuejs

Question

我有這個標簽出現在多個文件中 - 相同的路徑但具有不同的圖像文件：

<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 需要在 class 和樣式之前。

<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>標記中進行搜索和替換 - 這樣在我的替換正則表達式中我同時更正了行順序。

非常感謝。

Answer 1

我想 多行搜索可以在這里為您提供幫助。 您可以為不同的屬性創建組，然后重新排列它。 VS Code 的搜索編輯器功能與此實驗性插件相結合可能會有所幫助。

但是，如果有替代方法，我不建議使用正則表達式進行此類轉換。 最好的方法是使用規則的自動修復選項（如果有的話）。 我懷疑是這條規則給你一個錯誤： attributes-order 。 在這種情況下，您可以簡單地使用--fix標志運行eslint ，它會自動重新排序道具。

Answer 2

使您的正則表達式更簡單的一種方法是連續運行兩個查找和替換。 使用像替換規則這樣的擴展，你可以做到這一點。

在您的 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"
      ]
    }
  },

然后是一個鍵綁定來運行它（在 keybindings.json 中）：

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

---