Language-tools: Las importaciones automáticas son inconsistentes en VSCode

Creado en 9 jul. 2020 · 3Comentarios · Fuente: sveltejs/language-tools

Describe el error
Esto es puramente estético. Al importar automáticamente un archivo o componente en VScode, las nuevas importaciones no se agregan a los archivos correctamente.

Se insertan _por encima_ de las importaciones existentes.
Se insertan en diferentes posiciones para archivos .ts y .svelte .
Ignoran las preferencias quoteStyle del editor.
- Por ejemplo, con typescript.preferences.quoteStyle: single en VSCode, las importaciones seguirán usando comillas dobles.
Carecen de sangría.

Reproducir
Cree un nuevo proyecto desde sveltejs/template , cree un componente Test.svelte blanco e impórtelo automáticamente a App.svelte . En los proyectos de TypeScript, también puede ver que las importaciones de archivos .ts se insertan inmediatamente después de la etiqueta de script sin nueva línea.

Example

Comportamiento esperado
Espero que la importación automática funcione exactamente como lo haría en un archivo .ts normal, pero con algo de sangría debido a la etiqueta del script.

Insértelo con la sangría adecuada, especialmente de acuerdo con las importaciones existentes.
Insertar debajo de las importaciones existentes.
Insertar de forma coherente para todos los tipos de archivos.
Utilice el estilo de cita del editor si está disponible.

Mi código debería haberse visto así sin ningún trabajo manual:

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

    export let name;
</script>

Sistema (complete la siguiente información):

SO: Windows 10
IDE: VSCode, 1.46.1
Complemento / Paquete: Svelte para VSCode, 101.1.1

Fixed bug

Fuente

baileyherbert

Todos 3 comentarios

El problema subyacente es que durante la importación dentro de la plantilla, el compilador esbelto arrojará errores porque en ese punto el código no es válido. De esa manera, svelte2tsx no puede producir un archivo tsx válido, por lo que recurrimos a usar solo el contenido de la etiqueta de secuencia de comandos. Si el analizador genera un código válido, svelte2tsx producirá un archivo tsx convertido. Esto hace que las importaciones mecanografiado inserto en un punto diferente y nuestra asignación de la generada tsx a originales svelte importaciones que en la parte superior. No estoy seguro de cómo podemos solucionar estos problemas de una buena manera. Sin embargo, debería ser factible adherirse a las preferencias del usuario (estilo de cotización). Como solución alternativa, puede utilizar el comando "Organizar importaciones" y el formato más bonito se encargará de los estilos de sangría y comillas.

dummdidumm en 9 jul. 2020

👍1

¡Gracias @dummdidumm por la aclaración y la solución! 😄

Si hay una forma de insertarlos debajo de las importaciones existentes, sería una mejora enorme con respecto a cómo funciona en este momento. La extensión sería un poco más presentable (como en los tutoriales en video) y, lo que es más importante, las importaciones se sentirían consistentes (es inusual buscar la importación más reciente en la parte superior).

Acabo de probar tres importaciones ( test , test2 , test3 en ese orden) con Vetur y se insertaron en las posiciones correctas. Aquí están los resultados para comparar:

Vetur:

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

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

Svelte para VSCode:

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

import { testStore } from "./test";


    export let name: string;

</script>

baileyherbert en 9 jul. 2020

El js / ts tiene otro problema. El mapa de origen no puede asignar la siguiente línea de la última importación a su posición original.