Language-tools: 自动导入在VSCode中不一致

创建于 2020-07-09 · 3评论 · 资料来源: sveltejs/language-tools

描述错误
这纯粹是审美。在 VScode 中自动导入文件或组件时，新导入不会正确添加到文件中。

它们被插入 _above_ 现有导入。
它们被插入到.ts和.svelte文件的不同位置。
它们忽略编辑器的 quoteStyle 首选项。
- 例如，在 VSCode 中使用typescript.preferences.quoteStyle: single ，导入仍将使用双引号。
他们没有缩进。

再现
从sveltejs/template创建新项目，创建一个空白的Test.svelte组件，并自动将其导入App.svelte 。在TypeScript项目中，您还可以看到来自.ts文件的导入被插入到script标签之后，没有换行符。

Example

预期行为
我希望自动导入能够像在普通的.ts文件中一样工作，但由于脚本标签而有一些缩进。

插入适当的缩进，特别是根据现有的进口。
在现有导入下方插入。
一致地插入所有文件类型。
如果可用，请使用编辑器的引用样式。

我的代码应该是这样的，无需任何手动操作：

<script lang="ts">
    import Test from './Test.svelte';
    import { testStore } from './test';

    export let name;
</script>

系统（请填写以下信息）：

操作系统：Windows 10
IDE：VSCode，1.46.1
插件/包：Svelte for VSCode，101.1.1

Fixed bug

资料来源

baileyherbert

所有3条评论

潜在的问题是在模板内部导入期间，svelte 编译器会抛出错误，因为此时代码无效。这样， svelte2tsx无法产生有效的tsx文件，因此我们只能使用脚本标签内容。如果解析器输出有效代码， svelte2tsx将生成一个转换后的tsx文件。这使得 TypeScript 在不同的点插入导入，我们从生成的tsx到原始svelte的映射在顶部导入它。我不确定我们如何才能以好的方式解决这些问题。不过，坚持用户偏好（引用风格）应该是可行的。作为一种解决方法，您可以使用“组织导入”命令，更漂亮的格式将处理缩进和引号样式。

dummdidumm 于 2020-07-09

👍1

感谢@dummdidumm的澄清和解决方法！ 😄

如果有一种方法可以将它们插入到现有的导入之下，那将比现在的工作方式有了巨大的改进。扩展会更像一些（就像在视频教程中一样），更重要的是，导入会感觉一致（在顶部寻找最新的导入是不寻常的）。

我刚刚用 Vetur 测试了三个导入（按顺序test ， test2 ， test3 ），它们被插入到正确的位置。以下是比较结果：

维图尔：

<script lang="ts">
  import Vue from 'vue';
import { testStore1 } from './test';
import { testStore2 } from './test2';
import { testStore3 } from './test3';

  export default Vue.extend({ /*...*/ });
</script>

VSCode 的苗条：

<script lang="ts">import { testStore3 } from "./test3";
import { testStore2 } from "./test2";

import { testStore } from "./test";


    export let name: string;

</script>

baileyherbert 于 2020-07-09

js/ts 有另一个问题。 sourcemap 无法将上次导入的下一行映射到其原始位置。

jasonlyu123 于 2020-07-14

👍1

此页面是否有帮助？

0 / 5 - 0 等级

Language-tools: 自动导入在VSCode中不一致

所有3条评论

相关问题