Сопоставление регулярных выражений для изменения импорта модуля ES на прямой импорт

У меня есть пакет библиотеки компонентов, и он используется во многих таких файлах:

import { Grid, Heading, Button } from 'component-library'

Я хочу изменить весь свой импорт примерно так:

import { Grid } from 'component-library/lib/Grid'
import { Heading } from 'component-library/lib/Heading'
import { Button } from 'component-library/lib/Button'

Я нашел в VSCode расширение для этого:
https://marketplace.visualstudio.com/items?itemName=angelomollame.batch-replacer&ssr=false#overview

И, похоже, он тоже принимает регулярное выражение. Я попытался написать регулярное выражение, чтобы найти замену старого импорта на новый, но мое регулярное выражение не работает. Это мое текущее регулярное выражение:

(?:import)\s+([\w,{}\s\*]+)\s+(?:from)?\s*(?:["'])?([@\w\s\\\/.-]+)(?:["'])?\s*

Вы можете помочь мне это исправить?


visual-studio-code javascript regex regexp-replace regex-group
person Babak Haj Azim Zanjani    schedule 01.07.2020    source источник
comment
(/^\s*import\s*\{((?:\s*\w+,*)+)\s*\}\s*from\s*(['"])([^'"]*)\2\s*;*\s*$/gm) ... даст вам для группы [1] = ›'Сетка, заголовок, кнопка 'и для группы [3] = ›' component-library '... таким образом, нужно разделить пространства имен модулей первой сопоставленной группы, обрезать каждое пространство имен и предоставить синтаксис импорта для имени модуля, которое сопоставлено в 3-й группе ... Не знаю, поддерживает ли плагин возможность кастомной замены.   -  person Peter Seliger    schedule 01.07.2020
comment
с помощью marketplace.visualstudio.com/items?itemName=draivin.hsnips вы можете добавить javascript в сниппет   -  person rioV8    schedule 01.07.2020

Ответы (2)


arrow_upward
0
arrow_downward

Без каких-либо расширений просто используйте регулярное выражение столько раз, сколько есть совпадение:

Находить:

(import\s*{\s*)(\w+)\s*,([\w\s,*]+?)(\s*}(?:\s*from)?\s*)(["'])?([@\w\s\\/.-]*?)\5

Заменять:

$1$2$4$5$6$5\n$1$3$4$5$6$5

См. демонстрацию регулярных выражений

Узор будет соответствовать и захватывать части узора в отдельные группы. Каждый раз будет захвачено только первое слово в круглых скобках, и будет выводиться строка только с этим словом + новая строка и строка, содержащая другие слова внутри скобок.

Вот почему вам нужно запускать поиск и замену до тех пор, пока совпадения не будут найдены.

person Ryszard Czech    schedule 01.07.2020

arrow_upward
0
arrow_downward

Вы можете сделать это за два шага (как и мое regex-fu).

Шаг 1:

(import \{ )?((\w+)[, ]+)(?=.*?(\} from '(.*)')) Поиск по регулярному выражению

import { $3 } from '$5/lib/$3'\n Найти регулярное выражение

Regex101

Это оставляет одну случайную } from 'great-library'; для каждой исходной import строки (возможно, кто-то может улучшить регулярное выражение, чтобы этого избежать), поэтому удалите ее с помощью:

^\} from.*$ Поиск

Ничего не заменить.

Существует несколько расширений для замены нескольких регулярных выражений, в которых вы можете объединить эти два шага в один. Например, используя Batch Replacer, попробуйте следующий сценарий:

replace-regex "(import { )?((\w+)[, ]+)(?=.*?(} from '(.*)'))"
with "import { $3 } from '$5/lib/$3'\n"

replace-regex "(?<!.)} from.*\r?\n?"
with ""

Демонстрация пакетной замены

person Mark    schedule 08.07.2020