CODEWITHSUNDEEP
vimprettier
Rohit
Rohit

Reputation: 4158

Jinja html templates formatting with ALE and Prettier in Vim

I am using NVIM v0.3.2-208-g2841e89 on Ubuntu 16.04 LTS and using ALE as my Linting Engine plugin. I am having issue with formatting for jinja template html files with prettier.

The html files which start with <html> tag and contains jinja code are not being formatted at all. When i run ALEFix on these files nothing happens.

The html files that start with {% extends %} line are getting formatted but not the correct way. When i run ALEFix on these files, this is how the code starts to look.

Original File

{% extends "home.html" %}
{% block body %}
<div class="jumbotron">
<p>Thank you {{ session['username'] }} for signing up !!</p>
</div>

{% endblock %}

Formatted File

{% extends "home.html" %} {% block body %}
<div class="jumbotron">
  <p>Thank you {{ session['username'] }} for signing up !!</p>
</div>

{% endblock %}

Here is another example.

Original File

 {% extends "home.html" %}
{% block body %}
<form method="POST">
    {{ form.hidden_tag() }}
    {{ form.username.label }} {{ form.username }}
    {{ form.password.label }} {{ form.password }}
    {{ form.submit }}
</form>
{% endblock %}

Formatted File

{% extends "home.html" %} {% block body %}
<form method="POST">
  {{ form.hidden_tag() }} {{ form.username.label }} {{ form.username }} {{
  form.password.label }} {{ form.password }} {{ form.submit }}
</form>
{% endblock %}

I am not sure if this is the correct formatting of the jinja file but it does not look very readable.

This is how my config looks

let g:ale_fixers = {
                    \ '*': ['remove_trailing_lines', 'trim_whitespace'],
                    \ 'html': ['prettier'],
                    \ 'javascript': ['eslint', 'prettier'],
                    \ 'css' : ['stylelint', 'prettier'],
                    \ 'python' : ['yapf', 'isort', 'autopep8']
                    \ }

Below is what ALEInfo reports for a jinja template file.

 Current Filetype: jinja.html                                                                                                                                                                                      
Available Linters: ['alex', 'htmlhint', 'proselint', 'stylelint', 'tidy', 'writegood']                                                                                                                             
   Linter Aliases:                                                                                                                                                                                                 
'writegood' -> ['write-good']                                                                                                                                                                                      
  Enabled Linters: ['alex', 'htmlhint', 'proselint', 'stylelint', 'tidy', 'writegood']                                                                                                                             
 Suggested Fixers:                                                                                                                                                                                                 
  'prettier' - Apply prettier to a file.                                                                                                                                                                           
  'remove_trailing_lines' - Remove all blank lines at the end of a file.                                                                                                                                           
  'tidy' - Fix HTML files with tidy.                                                                                                                                                                               
  'trim_whitespace' - Remove all trailing whitespace characters at the end of every line.                                                                                                                          
 Linter Variables:                                                                                                                                                                                                 
let g:ale_html_htmlhint_executable = 'htmlhint'                                                                                                                                                                    
let g:ale_html_htmlhint_options = ''                                                                                                                                                                               
let g:ale_html_htmlhint_use_global = 0                                                                                                                                                                             
let g:ale_html_stylelint_executable = 'stylelint'                                                                                                                                                                  
let g:ale_html_stylelint_options = ''                                                                                                                                                                              
let g:ale_html_stylelint_use_global = 0                                                                                                                                                                            
let g:ale_html_tidy_executable = 'tidy'                                                                                                                                                                            
let g:ale_html_tidy_options = '-q -e -language en'                                                                                                                                                                 
 Global Variables:                                                                                                                                                                                                 
let g:ale_cache_executable_check_failures = v:null                                                                                                                                                                 
let g:ale_change_sign_column_color = 0                                                                                                                                                                             
let g:ale_command_wrapper = ''                                                                                                                                                                                     
let g:ale_completion_delay = v:null                                                                                                                                                                                
let g:ale_completion_enabled = 0                                                                                                                                                                                   
let g:ale_completion_max_suggestions = v:null                                                                                                                                                                      
let g:ale_echo_cursor = 1                                                                                                                                                                                          
let g:ale_echo_msg_error_str = 'E'                                                                                                                                                                                 
let g:ale_echo_msg_format = '[%linter%] %s [%severity%]'                                                                                                                                                           
let g:ale_echo_msg_info_str = 'Info'                                                                                                                                                                               
let g:ale_echo_msg_warning_str = 'W'                                                                                                                                                                               
let g:ale_enabled = 1                                                                                                                                                                                              
let g:ale_fix_on_save = 1                                                                                                                                                                                          
let g:ale_fixers = {'html': ['prettier'], '*': ['remove_trailing_lines', 'trim_whitespace'], 'javascript': ['eslint', 'prettier'], 'css': ['stylelint', 'prettier'], 'python': ['yapf', 'isort', 'autopep8']}      
let g:ale_history_enabled = 1                                                                                                                                                                                      
let g:ale_history_log_output = 1                                                                                                                                                                                   
let g:ale_keep_list_window_open = 0                                                                                                                                                                                
let g:ale_lint_delay = 200                                                                                                                                                                                         
let g:ale_lint_on_enter = 1                                                                                                                                                                                        
let g:ale_lint_on_filetype_changed = 1                                                                                                                                                                             
let g:ale_lint_on_insert_leave = 0                                                                                                                                                                                 
let g:ale_lint_on_save = 1                                                                                                                                                                                         
let g:ale_lint_on_text_changed = 'always'                                                                                                                                                                          
let g:ale_linter_aliases = {}                                                                                                                                                                                      
let g:ale_linters = {'css': ['stylelint'], 'python': ['flake8']}                                                                                                                                                   
let g:ale_linters_explicit = 0

Upvotes: 5

Views: 3140

Answers (1)

WhyNotHugo
WhyNotHugo

Reputation: 9906

This isn't supported by prettier. Somebody needs to step up and write a plugin for it.

prettier issue: https://github.com/prettier/prettier/issues/5581

Note: It says Django but it's basically the same in this context.

Upvotes: 3

Related Questions