如何将命名导入转换为VSCode中的默认导入？

Question

我正在使用VSCode并尝试将项目中跨多个文件的导入写入方式更正为更高性能的格式——VSCode是否具有促进这一点的功能？它可以通过内置的查找和替换来完成吗？或者其他一些VSCode功能能够做到这一点吗？

我得到的导入看起来是这样的（＜code＞substance ux＜/code＞是真实模块名的模糊版本，因为我不需要特定于模块的答案）：

import { Foo, Bar as BarBar } from '@substance-ux/glyphs';

或者也许：

import {
  GlyphWithLongName as LongName,
  GlyphWithExtraLongName as ExtraLong
} from '@substance-ux/glyphs';

我需要将其转换为这种样式，以匹配我们项目中其他地方的导入：

import Foo from '@substance-ux/glyphs/Foo';
import BarBar from '@substance-ux/glyphs/Bar';

或者这个：

import LongName from '@substance-ux/glyphs/GlyphWithLongName';
import ExtraLong from '@substance-ux/glyphs/GlyphWithExtraLongName';

(顺便说一句，像< code > ' @ substance-UX/glyphs/GlyphWithExtraLongName ' 这样的文件已经存在，包的文档说< code > @ substance-UX/glyphs 模块在导入时运行大量代码，这减慢了开发构建。)

现在，如果我知道我有一种或另一种格式，或者我知道有多少，那么我可以依靠查找和替换，例如，我可以使用一些正则表达式（查找：导入 \{ (. *), (.*) } 从'（@usent-ux/字形）'；替换从'3美元/1美元'导入1美元；\n从'3美元/2美元'导入2美元；）和VSCode中的查找和替换功能。

但是如果我有可变数量的导入，或者混合风格(有些是“as ”,有些不是),如果我试图一次完成，我会变得完全混乱。

我知道snippets可以使用TextMate语法进行正则表达式捕获和一些聪明的替换，但我不认为它们可以处理可变数量的捕获组？或者他们可以吗？

在没有扩展等的VSCode中，这是否可以实现？

Answer 1

我不明白vscode程序与你的代码有什么关系。该程序不会主动更改代码的结构，您必须手动执行此操作：

你有这个：

import { Foo, Bar as BarBar } from '@substance-ux/glyphs';

你想要这个：

import Foo from '@substance-ux/glyphs/Foo';
import BarBar from '@substance-ux/glyphs/Bar';

@substance-ux/glyphs文件中有多个命名导出，因此如果您想要拆分东西，您将需要创建导出＜code＞默认值文件，其中＜code＞导出默认Foo以及更多来自@substance-ux/glyphs的所有代码，这些代码与Foo，都与新文件相关，或者只从Foo中导入。js并重新公开为默认值：

import { Foo } from '@substance-ux/glyphs';
export default Foo;

import { Bar } from '@substance-ux/glyphs';
export default Bar;

您可以按所需的任何名称导入任何默认导出的事物：

import Banana from '@substance-ux/glyphs/Bar';

但我不明白你为什么要这样做……你没有向我们解释从一个文件中导入多个东西有什么坏处。爬树？

Answer 2

片段可以处理数量可变的参数 - 我已经回答了许多SO问题 - 但我认为它们不会与您的格式一起使用，因为参数已经存在，而不是作为片段的一部分输入。我真的不认为有一个非扩展或非脚本的解决方案来解决你的情况。

使用我编写的扩展Find和Transform，您可以在键绑定或设置中编写javascript。

这个keybinding -在您的< code>keybindings.json中-将执行您想要的操作(它也可以是一个设置，以便命令出现在命令面板中):

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

如演示所示，这将适用于整个文件。如果您想测试它或只是让它执行您选择的行，请启用“restrictFind”：“line”。