Código de Visual Studio: ajuste la configuración de cotización de importación

85

Al trabajar en TypeScript en Visual Studio Code, la sugerencia de importación en un tipo (activada por espacio + punto) generará una importación usando comillas dobles.

Nuestro linter de TypeScript verifica que se utilicen comillas simples siempre que sea posible.

Como puede ver a continuación, la sugerencia tiene comillas dobles ("@angular / ...") Importar sugerencia con comillas dobles

¿Cómo puedo ajustar la configuración de la importación?

Boris van Katwijk
fuente
marketplace.visualstudio.com/…
Иван Грозный

Respuestas:

85

A partir de VSCode 1.10, esto (lamentablemente) aún no es posible. Pero es un problema para una gran cantidad de usuarios, como parece. El tema VSCode es consciente de este problema y puede seguirlo para saber cuándo se implementa: https://github.com/Microsoft/TypeScript/issues/13270


Actualización de junio de 2018

¡Desde VSCode 1.24 (junio de 2018) hay una opción para esto!

"typescript.preferences.quoteStyle": "single"

Para obtener más información, consulte:

https://code.visualstudio.com/updates/v1_24#_preferences-for-auto-imports-and-generated-code

Sebastián Sebald
fuente
22
"typescript.preferences.quoteStyle": "single"
Niko
7
Esto no parece tener efecto para mí. Sigo recibiendo comillas dobles de sugerencias y fragmentos.
John Knoop
Lo mismo para mí, cambiado en todos los niveles posibles (usuario, espacio de trabajo, proyecto) y todavía tengo comillas dobles :(
Kostanos
No sé qué idioma están usando ustedes dos, pero hay configuraciones separadas para javascript y mecanografiado. Me preguntaba lo mismo, pero configuré la configuración del código javascript y no mecanografiado.
GhostBytes
53

También puede configurar la siguiente línea en la configuración de usuario de vscode para ajustar esta configuración.

"prettier.singleQuote": true
abdllhbyrktr
fuente
3
más bonita es una extensión, no todos la usan
caub
1
Es frustrante que la gente asuma que tienes o quieres usar Prettier. A menos que alguien pregunte "cómo estoy con Prettier", creo que es mejor no responder asumiendo que lo tienen.
Tsar Bomba
@TsarBomba Tienes razón. Esta configuración requiere una extensión más bonita para ajustar la cotización. marketplace.visualstudio.com/…
abdllhbyrktr
15

Lo arreglé usando la configuración del Editor , abra su archivo .editorconfig en el directorio raíz de su proyecto (si no lo tiene, cree ese archivo) y agregue esta línea después de [*]

[*]
...
quote_type = single

En la wiki puedes ver la lista completa de propiedades.

Joel Jacquez
fuente
Voto a favor. Restringe los cambios solo en el proyecto en el que está trabajando frente a todo el mundo. Nota adicional: reinicie VS Code para que los cambios entren en vigor.
EdSF
Solo para comentar, en VS Code también puede establecer configuraciones de espacio de trabajo que sean específicas para ese proyecto. Esto le permitirá usar comillas simples / dobles específicamente en la importación si desea usar el otro tipo en otro lugar dentro de los archivos. El cambio .editorconfig afectará a todo el proyecto.
Cruril
12

A partir de VS Code 1.21.1, debe editar

/usr/share/code/resources/app/extensions/typescript-basics/snippets/typescript.json

En Windows

/ Aplicaciones / Visual Studio Code.app/Contents/Resources/app/extensions/typescript-basics/snippets/typescript.json .

En Windows 10 (vscode versión 1.30. * (Configuración de usuario) más adelante)

* C: \ Users \ <yourusername> \ AppData \ Local \ Programs \ Microsoft VS Code \ resources \ app \ extensions \ typescript-basics \ snippets \ typescript.json

En la sección 'Importar módulo externo' de ese archivo, haga que la propiedad de la matriz del cuerpo sea el valor.La "import { $0 } from '${1:module}';"sección se verá así:

"Import external module.": {
    "prefix": "import statement",
    "body": [
        "import { $0 } from '${1:module}';"
    ],
    "description": "Import external module."
},
cdoremus
fuente
1
Esta solución funcionó para mí. Literalmente probé todo, pero solo esto lo solucionó.
Sosa
8

Una alternativa que admite esta configuración es TypeScript Toolbox .

Se puede configurar mediante la configuración genGetSet.pathStringDelimiter, que ya tiene la importación de comillas simples como predeterminada.

Boris van Katwijk
fuente
2
¡Gracias por esto! Vale la pena señalar la genGetSet.spacedImportLineconfiguración también para que las nuevas líneas de importación se vean como en import { Router }....lugar de las predeterminadasimport {Router}...
FLGMwt
1
¡Tanto la respuesta como el comentario anterior son una gran información! ¡Gracias a los dos!
Kris Boyd
7

Vaya a "Archivo> Preferencias> Configuración" y luego agregue esto en la configuración del usuario:

"typescript.preferences.quoteStyle": "single",
"javascript.preferences.quoteStyle": "single"
Wagner Danda da Silva Filho
fuente
¡Funciona para mí, gracias! Por cierto, puede agregar un enlace a la configuración predeterminada que presenta estas opciones: code.visualstudio.com/docs/getstarted/settings . // Preferred quote style to use for quick fixes: 'single' quotes, 'double' quotes, or 'auto' infer quote type from existing imports. Requires using TypeScript 2.9 or newer in the workspace.
Mosh Feu
3

A partir de TypeScript 2.5, se analizará la primera declaración de importación o exportación del archivo para determinar si se utilizan comillas simples o dobles al utilizar sugerencias de importación.

https://github.com/Microsoft/TypeScript/pull/17750

Trevor Daniels
fuente
2

También puede configurar la siguiente línea en la configuración de usuario de vscode para permitir comillas simples en la cadena.

Vaya a Preferencias> Configuración de usuario

"prettier.singleQuote": true

Esto permitirá comillas simples en String. De lo contrario, si cambia manualmente todas las comillas dobles a comillas simples, se revertirá al guardar. Además, agregue

"tslint.autoFixOnSave": true

para autocorregir mientras guarda.

anirban8611
fuente
1

¡Esto ya está implementado (como se mencionó en otra respuesta)! Pero probablemente aún no tenga la última versión de TypeScript.

La solución es simple:

Haga clic en el número de versión de TypeScript (por ejemplo 2.3.4) entre "TypeScript" y una carita sonriente en la esquina inferior derecha. Luego cambie a la versión incorporada de Visual Studio Code (2.5.3 en este momento).

Después de este código de Visual Studio, se deducirá el estilo de cotización de importación observando la primera declaración de importación . Tenga en cuenta que una pequeña etiqueta emergente seguirá mostrando comillas dobles de todos modos.

Informe de error

Solicitud de extracción relevante :

Esto agrega la capacidad de determinar si se deben usar comillas simples o dobles para las nuevas importaciones agregadas mediante correcciones de código. Cuando se agrega una nueva importación, escaneamos las declaraciones más altas del archivo de origen en busca de declaraciones de importación o exportación existentes con especificadores de módulo. Luego usamos el estilo de cita del primero que encontramos. Si no hay importaciones existentes en el archivo, recurrimos a comillas dobles.

Andrei Sinitson
fuente
0

Las soluciones anteriores no funcionaron para mí

Así que aquí está mi trabajo, en el uso de vscode,: "tslint.autoFixOnSave"true en su settings.jsonarreglará automáticamente estas citas de importación cuando guarde el archivo.

Varun Sukheja
fuente
DiceUnknown Configuration Setting
Edgar Quintero