0
181
Views¿Cómo puedo convertir importaciones con nombre en importaciones predeterminadas en VSCode?
Estoy usando VSCode y trato de corregir la forma en que se escriben las importaciones en varios archivos en mi proyecto a un formato de mayor rendimiento. ¿VSCode tiene una funcionalidad que facilitaría esto? ¿Podría hacerse con la búsqueda y el reemplazo incorporados? ¿O alguna otra característica de VSCode puede hacer esto?
Las importaciones que tengo se ven así ( substance-ux es una versión ofuscada de un nombre de módulo real, ya que no quiero respuestas específicas del módulo):
import { Foo, Bar as BarBar } from '@substance-ux/glyphs';O tal vez:
import { GlyphWithLongName as LongName, GlyphWithExtraLongName as ExtraLong } from '@substance-ux/glyphs';Y necesito convertirlo a este estilo, haciendo coincidir las importaciones en otras partes de nuestro proyecto:
import Foo from '@substance-ux/glyphs/Foo'; import BarBar from '@substance-ux/glyphs/Bar';O esto:
import LongName from '@substance-ux/glyphs/GlyphWithLongName'; import ExtraLong from '@substance-ux/glyphs/GlyphWithExtraLongName'; (Aparte, los archivos como '@substance-ux/glyphs/GlyphWithExtraLongName' ya existen y los documentos del paquete dicen que el módulo @substance-ux/glyphs ejecuta una gran cantidad de código en la importación, lo que ralentiza las compilaciones de desarrollo. )
Ahora, si sé que tengo un formato u otro, o sé cuántos, puedo confiar en buscar y reemplazar, por ejemplo, puedo usar un poco de expresiones regulares (buscar: import \{ (.*), (.*) } from '(@substance-ux/glyphs)'; reemplace import $1 from '$3/$1';\nimport $2 from '$3/$2'; ) y la función Buscar y reemplazar en VSCode .
Pero si tengo un número variable de importaciones, o un estilo mixto (algunos 'como' otros no), me desataré por completo, si trato de hacer esto de una sola vez.
Sé que los fragmentos pueden capturar expresiones regulares y algunos reemplazos inteligentes usando la sintaxis de TextMate, pero no creo que puedan manejar un número variable de grupos de captura. ¿O pueden?
¿Es esto posible en VSCode sin extensiones, etc.?
2 answers
Answer question0
Los fragmentos pueden manejar una cantidad variable de argumentos; he respondido una serie de preguntas SO que muestran eso, pero no creo que funcionen con su formato donde los argumentos ya están allí en lugar de ingresarse como parte del fragmento. Realmente no creo que haya una solución sin extensión o sin guión para su situación.
Usando una extensión que escribí, Find and Transform , puede escribir javascript en una combinación de teclas o una configuración.
Esta combinación de teclas, en su keybindings.json , hará lo que desee (también podría ser una configuración para que el comando aparezca en la Paleta de comandos):
{ "key": "alt+f", // whatever keybinding you want "command": "findInCurrentFile", "args": { "find": "(import\\s*{\\s*)([^}]+?)(\\s*}\\s*from\\s*')([^']+)';", "replace": [ "$${", "const from = `$4`;", // capture group 4 from the find // using capture group 2 from the find regex // note backticks around $2 below because it could contain newlines "const splitImports = [...`$2`.matchAll(/(\\w+)(?:$|,)|(\\w+)\\s?as\\s?(\\w+)/g)];", "let str = '';", "splitImports.forEach((match, index) => { ", // don't add a newline if last match "let newline = '';", "if (index < splitImports.length - 1) newline = '\\n';", // note double-escapes necessary "if (match[1]) str += `import ${match[1]} from \\'${from}/${match[1]}\\';${newline}`;", "if (match[2]) str += `import ${match[3]} from \\'${from}/${match[2]}\\';${newline}`;", "}); ", "return str;", "}$$" ], "isRegex": true, // "restrictFind": "line", }, // "when": "editorLangId == javascript" // if you want it } Esto funcionaría en todo el archivo como muestra la demostración. Si desea probarlo o simplemente hacer que haga las líneas que seleccione, habilite "restrictFind": "line" .
0
No entiendo qué tiene que ver el programa vscode con su código. El programa no cambiará activamente la estructura de su código, tendrá que hacerlo manualmente:
Tu tienes esto:
import { Foo, Bar as BarBar } from '@substance-ux/glyphs';Y quieres esto:
import Foo from '@substance-ux/glyphs/Foo'; import BarBar from '@substance-ux/glyphs/Bar'; El archivo @substance-ux/glyphs múltiples exportaciones con nombre , por lo que si desea dividir las cosas, deberá crear archivos dedicados que exporten default , así que cree un archivo Foo.js que export default Foo; y más todo el código de @substance-ux/glyphs que es relevante para Foo en el nuevo archivo, o simplemente importe desde Foo.js y vuelva a exponerlo como predeterminado :
Nuevo archivo Foo.js :
import { Foo } from '@substance-ux/glyphs'; export default Foo; Nuevo archivo Bar.js :
import { Bar } from '@substance-ux/glyphs'; export default Bar;Puede importar cualquier cosa exportada por defecto con el nombre que desee:
import Banana from '@substance-ux/glyphs/Bar';Pero no veo por qué querrías hacer esto... No nos explicaste qué tiene de malo importar varias cosas de un solo archivo. ¿Sacudiendo árboles?