Búsqueda de sitios web

javascript - VsCode no formatea archivos TS/JS con comillas simples


Después de una de las últimas actualizaciones de VS Code, al presionar Ctrl+Shift+F en Windows, está formateando automáticamente todo mi código con comillas dobles en lugar de comillas simples a pesar de que lo configuré para usar solo comillas simples.

Aquí está mi archivo de configuración:

{
"[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"typescript.updateImportsOnFileMove.enabled": "always",
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"atlascode.jira.workingSite": {
    "baseUrlSuffix": "atlassian.net"
},
"yaml.schemas": {
    "file:///c%3A/Users/kevin/.vscode/extensions/atlassian.atlascode-2.1.5/resources/schemas/pipelines-schema.json": "bitbucket-pipelines.yml"
},
"window.zoomLevel": -1,
"[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"git.autofetch": true,
"javascript.preferences.quoteStyle": "single",
"typescript.preferences.quoteStyle": "single",
"prettier.jsxSingleQuote": true,
"prettier.singleQuote": true

}

¿Alguien más está lidiando con esto?

¡Gracias!!!

Respuesta #1

Por tu archivo de configuración, parece que estás usando prettier para el formateo de código. En la última actualización, prettier cambió la lectura de la configuración de un archivo de configuraciones comunes a un archivo dedicado para la configuración de prettier. Puedes configurar prettier a través de muchas opciones que ellos han proporcionado.

https://prettier.io/docs/en/configuration.html

Ejemplo (JSON):

Crea un archivo .prettierrc, escrito en JSON o YAML, con extensiones opcionales: .json/.yaml/.yml (sin extensión tiene prioridad).

.prettierrc

{
  "singleQuote": true
}

Luego proporciona la ruta absoluta del archivo .prettierrc en settings.json (archivo de configuración de vscode).

settings.json

...
"prettier.configPath": "./.prettierrc"
...

¡Espero que esto ayude!

Respuesta #2

La respuesta de Jins Thomas Shaji es muy útil. Pero además de lo que él dijo, también necesitas añadir una línea en .prettierrc

"jsxSingleQuote": true

Entonces, conclusión:

.prettierrc

{
"singleQuote": true, 
"jsxSingleQuote": true,
}

configuración.json

"prettier.configPath": "./.prettierrc"