VSCode reemplazo automático de comillas simples a dobles

109

Cuando ejecuto un Format Documentcomando en un archivo Vue Component.vue, VSCode reemplaza todas las cadenas entre comillas simples con cadenas entre comillas dobles.

En mi caso específico, esta regla entra en conflicto con la configuración de pelusa electron-vue que requiere una cita única.

No tengo instaladas extensiones más bonitas (no prettier.singleQuoteen mi configuración)

¿Cómo personalizar VSCode para evitar esto?

attdona
fuente

Respuestas:

137

No tengo la prettierextensión instalada, pero después de leer la posible respuesta duplicada que agregué desde cero en mi Configuración de usuario ( UserSetting.json, Ctrl +, acceso directo):

"prettier.singleQuote": true

Una parte de una advertencia verde ( Unknown configuration setting) las comillas simples ya no se reemplazan.

Sospecho que la extensión más bonita no es visible pero está incrustada dentro de la extensión Vetur .

attdona
fuente
2
Esto no funcionó para mí. Tuve que usar vetur.format.defaultFormatterOptionsen su lugar. Consulte https://vuejs.github.io/vetur/formatting.html#settings .
user1620220
Después de abrir la búsqueda rápida, escriba "> configuración de usuario" y haga clic en "Preferencias: Abrir configuración de usuario". En el cuadro de búsqueda de sus preferencias, escriba "prettier.singleQuote" y haga clic en la casilla de verificación para una cita simple más bonita.
Kody
5
Esto no funcionó para mí, quote_type = singleen la [*.myDesiredFileExtension]sección dentro del .editorconfigarchivo, fue la solución.
Solitario
82

Bueno, como mencionó el chico (@ user2982122), pero en lugar de Archivo, vaya a Código -> Preferencias -> Configuración, luego busque Cotización , seleccione Más bonito y marque ambas casillas

ingrese la descripción de la imagen aquí ingrese la descripción de la imagen aquí

mustapha mekhatria
fuente
1
¿Tiene que volver a cargar estos ajustes para que surtan efecto? Tengo los dos marcados, pero cuando guardo mi archivo .jsx, las comillas dobles no cambian a simples.
J Woodchuck
Eso es extraño, estoy usando esta versión: Release 1.14 build 1.14.0-17740
mustapha mekhatria
58

Para proyectos que utilizan .editorconfigarchivo de forma predeterminada. El formateador ignorará las reglas en la configuración y usará las reglas en .editorconfig, luego puede:

  • Elimine el .editorconfigarchivo y use la configuración de VSCode.
  • Agregue quote_type = singleal .editorconfigarchivo con respecto a su tipo de archivo. También puede establecer un quote_typevalor en doubleo auto.
Gary Lamb
fuente
1
Hice esto y no funcionó independientemente de si instalé editorconfig globalmente o si trato de demandar al editorconfig para VS Code. :(
acarlstein
Gracias, mi aplicación Angular se usa .editorconfigde forma predeterminada (no lo sabía) y su solución solucionó mi problema
benshabatnoam
tenga en cuenta: no puede eliminar .editorconfigsi es un proyecto con versión común
Solitario
36

Parece que hay un error abierto para este problema: Prettier Bug

Ninguna de las soluciones anteriores funcionó para mí. Lo único que funcionó fue agregar esta línea de código en package.json:

"prettier": {
    "singleQuote": true
  },
Avjol Sakaj
fuente
30

Desde la página de problemas de vuejs / vetur https://github.com/vuejs/vetur/issues/986# Esta solución funcionó para mí.

En el settings.jsonarchivo VSCodes agregue esta entrada

"vetur.format.defaultFormatterOptions": {
    "prettier": {
        "singleQuote": true
    }
},
Dave Pile
fuente
16

por favor considere .editorconfigsobrescribir todo, use:

[*]
quote_type = single
Solitario
fuente
Esta fue la única solución funcional. ¡Gracias amigo!
Donald Shahini
De nada @DonaldShahini;)
Lonely
12

Solución correcta:

Agrego el archivo .prettierrc.js en mi proyecto raíz principal y escribo

module.exports = {
    singleQuote: true
  };
Omar Hasan
fuente
Intenté esto pero arroja un error: "ESLint: No se pudo cargar la configuración" defaults / configurations / eslint "para extender." Lo mejor sería agregar esto en package.json. Solución
Avjol Sakaj
¿Pusiste tu archivo .prettierrc.js en la raíz del proyecto?
Omar Hasan
8

Para novatos como yo:

Desde la barra de navegación del menú en la parte superior: seleccione Archivo -> Preferencias -> Configuración. En el cuadro de texto de búsqueda, escriba Cita. En la lista filtrada que aparece a continuación, busque el icono de engranaje y, al lado, "Más bonito". Haga clic en la casilla de verificación para habilitar "Más bonita: Cotización única"

user2982122
fuente
7

Instale una extensión más bonita y pegue el código a continuación en su settings.jsonarchivo VSCode

 "prettier.useEditorConfig": false,
 "prettier.singleQuote": true

esto ignorará la .editorconfigconfiguración de su archivo.

Md. Mustafizur Rahman
fuente
6

Como señaló @attdona, la extensión Vetur incluye más bonitas.

Si bien puede cambiar la configuración más bonita, según la respuesta aceptada, también puede cambiar el formateador para regiones específicas de un componente de vue.

Aquí, por ejemplo, configuré Vetur para usar el formateador vscode-typecript ya que usa comillas simples por defecto:

configuración de vscode vetur

Richard Banks
fuente
6

Tuve el mismo problema en vscode. Simplemente cree un archivo .prettierrc en su directorio raíz y agregue el siguiente archivo json. Para comillas simples, agregue:

{
  "singleQuote": true
}

Para comillas dobles, agregue:

  {
      "singleQuote": false
  }
Hamfri
fuente
6

Prueba una de estas soluciones

  1. En el archivo vscode settings.json agregue esta entrada "prettier.singleQuote": true
  2. En vscode si tiene un .editorconfigarchivo, agregue esta línea debajo del símbolo raíz [*]quote_type = single
  3. En vscode si tiene un .prettierrcarchivo, agregue esta línea
{
    "singleQuote": true,
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "singleQuote": true
        }
    }
}
javidabd
fuente
1
La segunda opción funcionó, desafortunadamente las otras respuestas en esta página no funcionaron
Lunes
5

Solo hay una solución que funcionó para mí: y solo para proyectos angulares:

Simplemente ingrese al archivo ".editorconfig" de su proyecto y pegue 'quote_type = single'. Espero que también funcione para ti.

Muhammad Waqas
fuente
4

Agregué un archivo llamado .prettierrcen la carpeta de mi proyecto. Contenido del archivo:

{
    "singleQuote": true,
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "singleQuote": true
        }
    }
}
0lukasz0
fuente
2

Puede usar esto en settings.json

"javascript.preferences.quoteStyle": "single"
mperk
fuente
2

Para uso JSX:

{"jsxSingleQuote": false}
Juan Angel
fuente
1

Me funciona para verificar comillas simples en Prettier y tslint.autoFixOnSave as true

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

Rudra
fuente