es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

VSCode Prettier en guardar – para Vue.js

14 Jun, 2023 Programación

Tenía

estos ajustes para mi VSCode

settings.json

{
    "workbench.sideBar.location": "left",
    "window.zoomLevel": 1,
    "workbench.colorTheme": "Monokai Pro",
    "workbench.iconTheme": "Monokai Pro Icons",
    "editor.formatOnSave": true,
    "editor.renderWhitespace": "none",
    "breadcrumbs.enabled": true,
    "editor.minimap.enabled": false,
    "prettier.tabWidth": 4,
    "prettier.vueIndentScriptAndStyle": true,
    "prettier.useTabs": true,
    "prettier.configPath": "/Users/alpha/Sites/notes/VSCode/.prettierrc",
    "[javascript, vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },
    "redhat.telemetry.enabled": true,
    "liveServer.settings.donotShowInfoMsg": true,
    "explorer.confirmDelete": false,
    "editor.tabSize": 4,
    "emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "vue-html": "html",
        "vue": "html"
    }
}

.prettierrc

{
    "semi": false,
    "singleQuote": false,
    "useTabs": true,
    "trailingComma": "none",
    "printWidth": 80,
    "tabWidth": 4
}

En este momento, el formateo automático funciona al guardar archivos JS y HTML perfectamente. ✨

enter image description here

Quiero

hacer que funcione con Vue.js.

Intenté

añadir vue –> "[javascript, vue]":

No está funcionando.

¿Cómo se hace con Vue.js?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución

    Para habilitar prettier para dar formato a archivos Vue.js en VSCode, debe modificar el archivo settings.json agregando la siguiente configuración:

    "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
}

    Esta configuración establece esbenp.prettier-vscode como el formateador predeterminado para archivos Vue.js y habilita el formateo automático al guardar.

    Después de agregar esta configuración, debería poder ver que sus archivos Vue.js se formatean automáticamente al guardar.

    Nota: asegúrese de tener las extensiones `prettier` y `prettier-vscode` instaladas en su editor VSCode.

    Aquí está el archivo settings.json actualizado para su referencia:

    {
    "workbench.sideBar.location": "left",
    "window.zoomLevel": 1,
    "workbench.colorTheme": "Monokai Pro",
    "workbench.iconTheme": "Monokai Pro Icons",
    "editor.formatOnSave": true,
    "editor.renderWhitespace": "none",
    "breadcrumbs.enabled": true,
    "editor.minimap.enabled": false,
    "prettier.tabWidth": 4,
    "prettier.vueIndentScriptAndStyle": true,
    "prettier.useTabs": true,
    "prettier.configPath": "/Users/alpha/Sites/notes/VSCode/.prettierrc",
    "[javascript, vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },
    "redhat.telemetry.enabled": true,
    "liveServer.settings.donotShowInfoMsg": true,
    "explorer.confirmDelete": false,
    "editor.tabSize": 4,
    "emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "vue-html": "html",
        "vue": "html"
    }
}

    ¡Espero que esto ayude!

Comments are closed.