Enable Django-like template formatting support

[JeanMertz]

coc-html (via vscode-html-languageservice) supports Handlebars templates, e.g. this formats as expected:

{{ extends "index.html" }}

{{ block body }}
<div>hello world</div>
{{ endblock body }}

But when using Django-like templating by replacing {{ and }} with {% and %}, the formatter can't handle that:

{% extends "index.html" %} {% block body %}
<div>hello world</div>
{% endblock body %}

However, looking at the vscode-html-languageservice source code it appears that Django templating is supported as well.

Is there a way to make this work with coc-html?

[chemzqm]

Seems we need upgrade dependencies, PR welcome.

[JeanMertz]

Seems we need upgrade dependencies

Are you sure about that? From what I can tell, the commit that added this support was already available in 3.0.0, and coc-html is using 3.0.2 (see also the js-beautify 1.10 release notes).

Those release notes also mention:

All languages are off by default in Javascript and on by default in HTML

So I'm not sure why it isn't enabled by default in the case of coc-html.

Or did you mean some other dependency that needs to be upgraded?

[chemzqm]

I don't know how to enable it, you can help to look at the source code.

[BokilaLin]

Hi guys

I found the solution

just add "django" to to "html-filetypes" in coc-settings.json

ex:
"html.filetypes": [
"html",
"handlebars",
"django"
]

[AdrienLemaire]

Doesn't work for me.
According to https://code.djangoproject.com/wiki/UsingVimWithDjango#Syntaxfortemplates :

Vim 7.1 or newer includes support for "htmldjango" documents out of the box.

All my html files are auto-set to ft=htmldjango

coc-settings.json

{
  "html.enable": true,
  "html.filetypes": [
    "html",
    "handlebars",
    "django",
    "htmldjango"
  ],
  "html.format.enable": true
}

Tried with django only (and changing the file filetype=django) and htmldjango only, didn't change anything.
When running :call CocAction("format"), then check logs with :CocOpenLog, I see

2020-01-31T10:42:22.083 ERROR (pid:1853450) [languages] - Format provider not found for current document error

Not seeing any html format provider option available from coc-settings though:

After exporting NVIM_COC_LOG_LEVEL=debug and trying again, I'm getting these logs:

logs

2020-01-31T11:21:53.726 DEBUG (pid:2032980) [configurations] - checkFolderConfiguration: file:///home/dori/Projects/Work/project-v2/pro_report/apart/templates/apart/pro_page.html
2020-01-31T11:21:53.727 DEBUG (pid:2032980) [configurations] - checkFolderConfiguration: add folder setting file /home/dori/Projects/Work/project-v2/.vim/coc-settings.json
2020-01-31T11:21:53.734 DEBUG (pid:2032980) [workspace] - buffer created 1
2020-01-31T11:21:53.734 DEBUG (pid:2032980) [events] - Event: BufEnter [ 1 ]
2020-01-31T11:21:53.740 DEBUG (pid:2032980) [events] - Event: BufWinEnter [ 1, 1000 ]
2020-01-31T11:21:53.831 DEBUG (pid:2032980) [languages] - created service source snippets
2020-01-31T11:21:53.831 DEBUG (pid:2032980) [languages] - created service source snippets-source
2020-01-31T11:21:53.892 INFO (pid:2032980) [plugin] - coc 0.0.74-6700e7468d initialized with node: v13.7.0
2020-01-31T11:21:53.931 DEBUG (pid:2032980) [language-client-index] - createMessageTransports: server id = tailwindCSS, option = {"run":{"module":"/home/dori/.config/coc/extensions/node_modules/coc-tailwindcss/lsp/tailwindcss-language-server/dist/index.js","transport":1},"debug":{"module":"/home/dori/.config/coc/extensions/node_modules/coc-tailwindcss/lsp/tailwindcss-language-server/dist/index.js","transport":1,"options":{"execArgv":["--nolazy","--inspect=6012"]}}}
2020-01-31T11:21:53.935 INFO (pid:2032980) [language-client-index] - tailwindCSS started with 2032995
2020-01-31T11:21:53.937 DEBUG (pid:2032980) [language-client-client] - initialize: initializationOptions = undefined
2020-01-31T11:21:54.263 DEBUG (pid:2032980) [language-client-index] - [tailwindCSS] Without `from` option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to `undefined` to prevent this warning.

2020-01-31T11:21:54.439 DEBUG (pid:2032980) [events] - Event: CursorHold [ 1 ]
2020-01-31T11:21:55.089 DEBUG (pid:2032980) [language-client-index] - [tailwindCSS] []

2020-01-31T11:21:55.093 DEBUG (pid:2032980) [languages] - created service source tailwindCSS
2020-01-31T11:21:57.511 ERROR (pid:2032980) [languages] - Format provider not found for current document error
2020-01-31T11:21:57.827 DEBUG (pid:2032980) [events] - Event: CursorHold [ 1 ]
2020-01-31T11:22:01.352 DEBUG (pid:2032980) [events] - Event: BufWinLeave [ 1, 1000 ]
2020-01-31T11:22:01.352 DEBUG (pid:2032980) [events] - Event: BufUnload [ 1 ]
2020-01-31T11:22:01.353 DEBUG (pid:2032980) [workspace] - buffer unload 1

I couldn't figure out how to get languages to create a service source html

[chemzqm]

Checkout :h g:coc_filetype_map

[AdrienLemaire]

Thanks!
Still haven't figured out something satisfying.

~/.vimrc

let g:coc_filetype_map = {
  \ 'htmldjango': 'html',
  \ }

coc-settings.js

  "html.enable": true,
  "html.format.enable": true,
  "html.filetypes": [
    "html",
    "htmldjango"
  ],

Test code:

When I run ':Format' (command! -nargs=0 Format :call CocAction('format')), it says "Formatted by prettier" and the result is ugly (django template tags completely messed up)

If I add "prettier.formatterPriority": -1 in coc-settings, then try :Format again on the test code, I get

Looks like all the django stuff is just ignored and leaved as is.

What I wish the formatter to do is either one of the 2 following versions:

Any idea how to get there?

Note that I tried setting

let g:coc_filetype_map = {
  \ 'htmldjango': 'django',
  \ }

with
coc-settings.js

  "html.enable": true,
  "html.format.enable": true,
  "html.filetypes": [
    "django"
  ],

And :Format won't do anything. Actually, the coc-html server won't even start!
To verify that the bug is coc-html specific, I applied the same config to coc-tailwindcss

  "tailwindCSS.htmlLanguages": [
    "django"
  ],

After opening my file nvim file.html, I see:

$ ps auxw|grep node-ipc
dori     1006799 60.0  0.3 941200 115196 ?       Sl   11:43   0:01 /usr/bin/node /home/dori/.config/coc/extensions/node_modules/coc-tailwindcss/lsp/tailwindcss-language-server/dist/index.js --node-ipc --clientProcessId=1006784
dori     1006921  0.0  0.0   7628  2432 pts/4    S+   11:43   0:00 grep --color=auto node-ipc

tailwindcss server is started, but not the html one. @chemzqm any idea why?

What I understand is that I should map htmldjango to django for coc-html to apply django formatting to my file, but coc-html will only work with filetype html at the moment. And it lets prettier take over if coc-prettier is installed without any custom global or local settings.

[AdrienLemaire]

@chemzqm another issue: the filetype map conflicts with coc-snippets.

In coc-snippets, "django" filetype is associated to python files (models & co), while "htmldjango" filetype is associated to templates.

I think this makes sense.

Instead of remapping htmldjango to django for coc-html, it would make more sense to rename all occurences of "django" to "htmldjango" in coc-html's source code.

$ perl -p -i -e 's/django/htmldjango/g' ~/.config/coc/extensions/node_modules/coc-html/lib/server.js

[chemzqm]

Yes, PR welcome

[AdrienLemaire]

@chemzqm I would, but as said above, I can't even get coc-html ipc process to start

tailwindcss server is started, but not the html one. @chemzqm any idea why?

I can only get coc-html's client process started when the filetype is html, and I need to uninstall coc-prettier first.

[AdrienLemaire]

Thanks for updating the plugin. Unfortunately, the formatting is still quite unsatisfactory:

test:

<span class="flex items-center mt-3">
{%for _ in '12345'|make_list %}
{% if forloop.counter <= page.rating %}
<span class="mr-3 text-{{ current_category.color }}-400">
{% include 'svg/rating-star.svg' %}
</span>
{% else %}
<span class="mr-3">
{% include 'svg/rating-star-empty.svg' %}
</span>
{% endif %}
{% endfor %}
</span>

coc-html :Format

<span class="flex items-center mt-3">
    {%for _ in '12345'|make_list %}
    {% if forloop.counter <= page.rating %}
    <span class="mr-3 text-{{ current_category.color }}-400">
        {% include 'svg/rating-star.svg' %}
    </span>
    {% else %}
    <span class="mr-3">
        {% include 'svg/rating-star-empty.svg' %}
    </span>
    {% endif %}
    {% endfor %}
</span>

vim visual selection and =

<span class="flex items-center mt-3">
    {%for _ in '12345'|make_list %}
        {% if forloop.counter <= page.rating %}
            <span class="mr-3 text-{{ current_category.color }}-400">
                {% include 'svg/rating-star.svg' %}
            </span>
        {% else %}
            <span class="mr-3">
                {% include 'svg/rating-star-empty.svg' %}
            </span>
        {% endif %}
    {% endfor %}
</span>

= is much better already.

Also, nothing will auto-add spaces in tags {%for => {% for.

I looked around, but neither js-beautify nor prettier have support for django template formatting at the moment, it seems.

[chemzqm]

Same as VSCode, it's formatted by https://github.com/Microsoft/vscode-html-languageservice, you can send feature request there

[luisiacc]

Could someone integrate this library https://pypi.org/project/djhtml/1.2.0/ with this plugin? Reopen maybe ?

[oren0e]

Django templates syntax support is still not present, can it be changed?

[chemzqm]

Django templates syntax support is still not present, can it be changed?

You should use vim syntax plugin for that.

[chemzqm]

Could someone integrate this library https://pypi.org/project/djhtml/1.2.0/ with this plugin? Reopen maybe ?

It's python package, you can use vim plugin that make use of it or simply write a command yourself.

[AlanJui]

Provide reference information for carers: try coc-htmldjango