VSCode formato de código personalizado e indención automática para el idioma (indención Django-Template)

Hice un montón de búsqueda para encontrar un lejos para crear o anular y la extensión existente de vscode para hacer la indención para django-template pero nada está ahí fuera y ningún éxito en la creación también. la mejor respuesta todavía utilizando esta configuración:

"files.associations": {
    "**/*.html": "html",
    "**/templates/**/*.html": "django-html",
}
"[django-html]": {
    "editor.defaultFormatter": "HookyQR.beautify",
}

"beautify.language": {
    "html": ["django-html"]
},

y estas extensiones: Dajngo (Baptiste Darthenay) " beautify. pero no hay indención para el lenguaje django-template y sólo las etiquetas HTML serán indentadas. Intenté anular el Djagno extensión para hacer posible, y sí insertaría alguna indención pero después de guardar el código, Beautify formateará automáticamente el código y eliminará esa indención, por lo que el resultado siempre es así:

    
    {% get_available_languages as languages %}
    {% for lang_code, lang_name in languages %}
    {% if lang_code != LANGUAGE_CODE %}
    {% language lang_code %}
    
  • 
      
        {{ lang_code|language_name_local }}
      
    
    • 
    {% endlanguage %}
    {% endif %}
    {% endfor %}

la fea plantilla. También proveí la regla de la indención necesaria, pero no pude encontrar una manera de forzar esta regla para los formatos de código vscode como beautificar o más.

  "indentationRules": {
      "increaseIndentPattern": "((\\<)(body|address|blockquote|dd|div|dl|dt|tr|tbody|thead|fieldset|form|frame|frameset|h1|h2|h3|h4|h5|h6|iframe|noframes|object|ol|p|ul|applet|center|dir|a|menu|pre|table|button|a|abbr|acronym|area|b|base|basefont|bdo|big|br|button|caption|cite|code|col|colgroup|del|dfn|em|font|head|html|i|img|input|ins|isindex|kbd|label|legend|li|link|map|meta|noscript|optgroup|option|param|q|s|samp|script|select|small|span|strike|strong|style|sub|sup|table|tbody|td|textarea|tfoot|th|thead|title|tr|tt|u|var))|(\\{\\%)\\s*(autoescape|block|blocktrans|blocktranslate|comment|for|empty|if|elif|else|ifchanged|ifequal|ifnotequal|from|low|regroup|ssi|spaceless|templatetag|widthratio|with|verbatim|thumbnail)",
      "decreaseIndentPattern": "((\\<\\/)(.*)*(\\>))|((\\{\\%)\\s*(empty|elif|else|end(autoescape|block|blocktrans|blocktranslate|comment|for|if|ifchanged|ifequal|ifnotequal|spaceless|with|verbatim|thumbnail)))"
      }

Pregunta hecha hace 3 años, 5 meses, 0 días - Por javajedi

5 Respuestas:

  • Tenía el mismo problema, encontré este proyecto útil https://github.com/Riverside-Healthcare/djlint

    Para instalarlo en vscode do (recomiendo instalarlo en un entorno virtual):

    pip install djlint

    Una vez hecho esto. Uso la extensión corren a salvo y añadir configuración similar en la configuración. json

    "emeraldwalk.runonsave": {
    "commands": [
        {
            "match": "\\.html$",
            "isAsync": true,
            "cmd": "./path/to/venv/bin/djlint ${file} --reformat --quiet" 
        }
    ]    
}

    Respondida el Dec 16, 2020 a las 09:16 - por techtrailblazer8d2c

    Votos positivos: 0 | Votos negativos: 0

  • A partir de ahora hay djlint1 [por monosanos] disponible tanto como un paquete que se puede instalar con pip y también como una extensión para vscode que necesita djlint2 para instalarse usando pip. Parece que djlint es un linter y formatter y podría ser utilizado de la siguiente manera:

    1- como paquete de pitón:

     python -m djlint --reformat --format-css --format-js --indent 2 --quiet --profile django .

    2- como una extensión vscode:

    "[django-html]": {
    "editor.defaultFormatter": "monosans.djlint",
    "editor.foldingStrategy": "indentation"
},
"djlint.formatCss": true,
"djlint.formatJs": true,
"djlint.preserveBlankLines": true,
    • Yo uso django extensión por Baptiste Darthenay

    Respondida el Dec 16, 2020 a las 09:22 - por byteninja8245

    Votos positivos: 0 | Votos negativos: 0

  • No sé cómo configurar Beautify.

    Centraré mi respuesta en formatear plantillas de django con VSCode.

    Resumen

    Uso nunjucks en lugar de django-html.

    Detalle

    1. Instala Nunjucks VSCode Extension Pack.

    2. En este punto, html los archivos no se tratan como nunjucks. Añada los siguientes ajustes .vscode/settings.json.

    "files.associations": {
    "*.html": "njk"
},
    1. Fijar la terminación de la etiqueta HTML ya no funciona. Si aún no ha instalado el Cierre automático Extensión, hacerlo aquí y añadir los siguientes ajustes adicionales.
    "auto-close-tag.activationOnLanguage": [
    "njk",
],
    1. opcional Finalmente, establecer el tema del icono. Si Tema del icono de material no ha sido instalado, instalarlo y añadir los siguientes ajustes.
    "material-icon-theme.files.associations": {
    "*.html": "nunjucks",
},

    Con el procedimiento anterior, ahora debe ser capaz de formatear y sintaxis resaltar plantillas de django.

    Respondida el Dec 16, 2020 a las 09:30 - por codecrusaderx58e2

    Votos positivos: 0 | Votos negativos: 0

  • El problema que estás experimentando parece ser que el formateador automático en Visual Studio Code está sobrescribiendo la indentación personalizada que estás intentando aplicar en el lenguaje de plantillas de Django.

    Una posible solución sería desactivar la opción de formatear automáticamente el código al guardar o al hacer otras acciones en el editor. Para hacer esto, puedes ir a la configuración de Visual Studio Code y añadir la siguiente configuración:

    json
"editor.formatOnSave": false,

    Además de esto, podrías probar a utilizar una extensión diferente que sea más compatible con la indentación específica de Django. Una opción que podrías considerar es la extensión "Django Template" de Lewis Kim, que proporciona soporte específico para la indentación en plantillas de Django.

    Espero que estos consejos te ayuden a resolver tu problema de indentación en Visual Studio Code con plantillas de Django. ¡Buena suerte!

    Respondida el Dec 17, 2020 a las 09:19 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Solución:

    Para crear un formato de código personalizado e indentación automática para Django-Template en VSCode, puedes utilizar los siguientes pasos:

    • Crea un archivo de configuración de idioma:
      <ul><li>Crea un nuevo archivo llamado `django-template.json` en la carpeta `.vscode` de tu proyecto.</li></ul>      <ul><li>Añade el siguiente contenido al archivo:</li></ul>
 <pre><code>json
 {
   "comments": {
     "lineComment": "{% <h3>",</h3>         "blockComment": ["{% comment ", " %}" ]
   },
   "brackets": [
     ["{%", "%}"],
     ["{{", "}}"],
     ["[[", "]]"]
   ],
   "autoClosingPairs": [
     { "open": "{%", "close": "%}" },
     { "open": "{{", "close": "}}" },
     { "open": "[[", "close": "]]" }
   ],
   "indentationRules": {
     "increaseIndentPattern": "((\\<)(body|address|blockquote|dd|div|dl|dt|tr|tbody|thead|fieldset|form|frame|frameset|h1|h2|h3|h4|h5|h6|iframe|noframes|object|ol|p|ul|applet|center|dir|a|menu|pre|table|button|a|abbr|acronym|area|b|base|basefont|bdo|big|br|button|caption|cite|code|col|colgroup|del|dfn|em|font|head|html|i|img|input|ins|isindex|kbd|label|legend|li|link|map|meta|noscript|optgroup|option|param|q|s|samp|script|select|small|span|strike|strong|style|sub|sup|table|tbody|td|textarea|tfoot|th|thead|title|tr|tt|u|var))|(\\{\\%)\\s<strong>(autoescape|block|blocktrans|blocktranslate|comment|for|empty|if|elif|else|ifchanged|ifequal|ifnotequal|from|low|regroup|ssi|spaceless|templatetag|widthratio|with|verbatim|thumbnail)",
     "decreaseIndentPattern": "((\\<\\/)(.</strong>)<strong>(\\>))|((\\{\\%)\\s</strong>(empty|elif|else|end(autoescape|block|blocktrans|blocktranslate|comment|for|if|ifchanged|ifequal|ifnotequal|spaceless|with|verbatim|thumbnail)))"
   }
 }
 </code></pre>
    • Configura las asociaciones de archivos:
      <ul><li>Abre la configuración de VSCode (`Ctrl` + `,` en Windows/Linux, `Cmd` + `,` en macOS).</li></ul>      <ul><li>Busca la configuración `"files.associations"`.</li></ul>      <ul><li>Añade la siguiente entrada a la lista de asociaciones:</li></ul>
 <pre><code>json
 "<strong>/templates/</strong>/<strong>.html": "django-template"
 </code></pre>
    • Configura el formateador:
      <ul><li>Busca la configuración `"editor.defaultFormatter"`.</li></ul>      <ul><li>Establece el valor en `"HookyQR.beautify"`.</li></ul>
    • Configura las reglas de embellecimiento:
      <ul><li>Busca la configuración `"beautify.language"`.</li></ul>      <ul><li>Añade la siguiente entrada a la lista de idiomas:</li></ul>
 <pre><code>json
 "django-template": ["django-html"]
 </code></pre>

    Notas:

    El valor de "editor.defaultFormatter" especifica el formateador que se utilizará para el idioma Django-Template.

    • El valor de `"files.associations"` asocia el lenguaje Django-Template con los archivos que terminan en `.html` dentro del directorio `templates`.

    Una vez que hayas completado estos pasos, VSCode aplicará el formato de código personalizado e indentación automática a los archivos de Django-Template dentro de tu proyecto.

    Respondida el Dec 17, 2020 a las 09:20 - por Gemini

    Votos positivos: 0 | Votos negativos: 0