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" 
      >

Я хочу везде заменить строку sr c, НО мне также нужно переместить новый: sr c выстраиваются по порядку, потому что линтер Vue js скажет, что: sr c должен быть перед классом и стилем.

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

Я использовал замену регулярного выражения и смог заменить строку sr c на правильную строку: sr c. Учитывая, что у меня есть около 100 файлов для этого, как я могу сделать это быстро в VS Code?

Мой текущий поиск и замена регулярного выражения:

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

Как я могу адаптировать два регулярных выражения к искать и заменять по всему тегу <img> - таким образом в моем регулярном выражении замены я исправляю порядок строк одновременно.

Большое спасибо.

Answer 1

Думаю, здесь вам может помочь Многострочный поиск . Вы можете создать группу для разных свойств, а затем изменить ее порядок. Также может помочь Редактор поиска функция VS Code в сочетании с этим экспериментальным плагином .

Однако я бы не рекомендовал использовать регулярное выражение для такого преобразования, если есть альтернатива. Лучше всего использовать опцию автофиксации правила (если она есть). Я подозреваю, что именно это правило выдает ошибку: атрибут-порядок . В этом случае вы можете просто запустить eslint с флагом --fix, и он автоматически изменит порядок свойств.

Answer 2

Один из способов сделать это, чтобы ваше регулярное выражение было немного проще, - запустить два поиска и заменить последовательно. Вы можете сделать это с помощью расширения, например Replace Rules .

В ваших настройках. 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"
      ]
    }
  },

, а затем привязку клавиш для ее запуска (в привязках клавиш . json):

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

vue img sr c заказать демоверсию