Strange formating html django

Question

Strange formating html django

Migacz85 opened this issue 6 years ago · 58 comments

filetype: djangohtml


;.editorconfig

root = true

[**.js]
; default ~/.vim/bundle/vim-jsbeautify/plugin/lib
indent_style = space
indent_size = 4

[**.json]
indent_style = space
indent_size = 4

[**.jsx]
e4x = true
indent_style = space
indent_size = 4

[**.css]
indent_style = space
indent_size = 3

[**.html]
indent_style = space
indent_size = 1
max_char = 88

Code before:

<!-- Modal Warning for delete-->


<div class="modal fade" id="A{{r._id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                        <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Delete recipe</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                </button>
                        </div>
                        <div class="modal-body">
                                Are you really sure you want to delete "{{r['recipe-name']}}" recipe?
                                This action can not be undone.
                        </div>
                        <form method="POST">
                                <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                        <!-- Activation point of "Delete db querie" in run.py -->
                                        <button type="submit" class="btn btn-danger" name='delete' value='{{r._id  }}'>Yes,
                                                delete it</button>
                                </div>
                        </form>
                </div>
        </div>
</div>

Code after:


<!-- Modal Warning for delete-->


<div class="modal fade" id="A{{r._id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
 aria-hidden="true">
 <div class="modal-dialog modal-dialog-centered" role="document">
  <div class="modal-content">
   <div class="modal-header">
    <h5 class="modal-title" id="exampleModalLabel">Delete recipe</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                </button>
   </div>
   <div class="modal-body">
    Are you really sure you want to delete "{{r['recipe-name']}}" recipe? This action can not
    be undone.
   </div>
   <form method="POST">
    <div class="modal-footer">
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
     <!-- Activation point of "Delete db querie" in run.py -->
     <button type="submit" class="btn btn-danger" name='delete' value='{{r._id  }}'>Yes,
                                                delete it</button>
    </div>
   </form>
  </div>
 </div>
</div>

Migacz85 commented 6 years ago

same

Answer 1 · 2019-02-24T09:56:44.000Z

@Migacz85 Looks like the problem in js-beautify or its settings because
vim-jsbeautify is just a wrapper around js-beautify.
I recommend opening an issue there

Answer 2 · 2019-02-24T16:45:41.000Z

Hi @Maksmir I will test this more intensively, and give results here. But I was testing few djangohtml in shell using js-beautify and results were fine comparing them to what I get in vim using 'vim-jsbeautify'

Answer 3 · 2019-02-24T16:47:29.000Z

What version of js-beautify is shipped with vim-jsbeautify ? Mine globally shell version is 1.8.9. Oh and can I use this globally installed js-beautify version in this plugin ? I see that there is path that can be configured in .editorconfig. But I was experiencing errors trying to change this. I belive mine shell version is living in this folder:
'/usr/lib/node_modules/js-beautify/js/bin/js-beautify.js'
I see there lib/bin folder witch one should be specify in path to choose different js-beautify?
There i have 3 files css-beautify.js html-beautify.js and js-beautify.js
Can I just type shell comand in config witch js-beautify use ?

Answer 4 · 2019-02-24T17:25:40.000Z

Oh, And one more question how I can push js-beautify to use new values in .editorconfig without closing vim and loading it again?

Answer 5 · 2019-02-24T17:59:40.000Z

Something is not right, code that is formated using normal shell and js-beautify
is producing good well indented html. Using this with plugin giving weird results
in some parts:

code before

						<div class="col">
                                                                {%if loop.index==1 %}            <div data-toggle="tooltip" data-placement="bottom" title="Click to edit Cuisine"> {%endif %}
                                                                <!-- Triger button for modal Cuisine -> modals.html -> cuisine  -->
                                                                <button type="button" class="invisible-btn" data-toggle="modal" data-target="#cCuisine{{r._id }}">
                                                                        Cuisine:
                                                                        
                                                                        {%for element in r['cuisine']%}
                                                                        <span class="badge badge-info"> {{element}}
                                                                        </span>
                                                                        {%endfor%}
                                                                </button>
                                                                {%if loop.index==1 %}      </div> {%endif %}
                                                </div>

code after vim-jsbeautify

      <div class="col">
       {%if loop.index==1 %}
       <div data-toggle="tooltip" data-placement="bottom"
        title="Click to edit Cuisine"> {%endif %}
        <!-- Triger button for modal Cuisine -> modals.html -> cuisine  -->
        <button type="button" class="invisible-btn" data-toggle="modal" data-target="#cCuisine{{r._id }}">
                                                                        Cuisine:
                                                                        
                                                                        {%for element in r['cuisine']%}
                                                                        <span class="badge badge-info"> {{element}}
                                                                        </span>
                                                                        {%endfor%}
                                                                </button>        {%if loop.index==1 %} </div> {%endif %}
      </div>

Code formated using jsbeautify in shell

   <div class="col">
       {%if loop.index==1 %}
       <div data-toggle="tooltip" data-placement="bottom" title="Click to edit Cuisine"> {%endif %}
        <!-- Triger button for modal Cuisine -> modals.html -> cuisine  -->
        <button type="button" class="invisible-btn" data-toggle="modal" data-target="#cCuisine{{r._id }}">
         Cuisine:

         {%for element in r['cuisine']%}
         <span class="badge badge-info"> {{element}}
         </span>
         {%endfor%}
        </button> {%if loop.index==1 %} </div> {%endif %}
      </div>

Also I set path in .editorconfig to js-beautify command that I'm using in shell like that:
(So baisicaly I wast testing against js-beuatify that is shipped with the plugin)
I don't know how to correctly set path to js-beautify that I have on the system.

;.editorconfig

root = true

[**.js]
; default ~/.vim/bundle/vim-jsbeautify/plugin/lib
path=/usr/lib/node_modules/js-beautify/js/lib/
indent_style = space
indent_size = 2

[**.json]
indent_style = space
indent_size = 4

[**.jsx]
e4x = true
indent_style = space
indent_size = 4

[**.css]
indent_style = space
indent_size = 1

[**.html]
; indent_style = space
; trim_trailing_whitespace = true
indent_size = 2
; max_char = 78

Answer 6 · 2019-02-24T18:42:10.000Z

When I'm trying to setup js-beautify that is installed on my shell.
I'm changing settings that way:

 22 [**.html]
 23 path=/usr/lib/node_modules/js-beautify/js/lib
 24 indent_style = space
 25 indent_size = 1
 26 max_char = 78

But I have that way an error:
Error: Cannot find module '/home/migacz/'

But in path I have something like that:

[migacz@migacz lib]$ pwd
/usr/lib/node_modules/js-beautify/js/lib
[migacz@migacz lib]$ ls
unpackers          beautify-css.js   cli.js
beautifier.js      beautify-html.js
beautifier.min.js  beautify.js
[migacz@migacz lib]$

Any thoughts ?

Answer 7 · 2019-02-24T20:48:40.000Z

@Migacz85 thanks for the investigation.

You can set a custom path for HTML formatter like this:

[**.html]
path=~/.vim/bundle/js-beautify/js/lib/beautify-html.js

https://github.com/maksimr/vim-jsbeautify#examples

Note that the path should contain js file which will be executed not a directory as in your examples above.

Answer 8 · 2019-02-24T20:50:32.000Z

What version of js-beautify is shipped with vim-jsbeautify ?

js-beautify@1.7.5

Answer 9 · 2019-02-24T20:51:58.000Z

I have error like this when adding this path

Cannot find module ../lib/cli

.vim/bundle/js-beautify/js/bin/html-beautify.js
and indeed I dont have /lib/cli from this repository inside there.

Answer 10 · 2019-02-24T20:57:30.000Z

Ok so this can be version problem.

When I installed js-beautify localy using npm install and reffered to this path:
; Cannot find module '/home/migacz/'
; path=.vim/node/node_modules/js-beautify/js/bin/html-beautify.js

Answer 11 · 2019-02-24T20:59:08.000Z

@Migacz85 am I right that with the new version of js-beautify all work fine?

Answer 12 · 2019-02-24T21:00:09.000Z

Yes exactly - but I can get results inside shell only, I want this work with vim :-)

Answer 13 · 2019-02-24T21:17:05.000Z

@Migacz85 oh I see the problem.

We use expand to resolve path.
If you have installed js-beautify inside $HOME/.vim/node/node_modules try to add ~

path=~/.vim/node/node_modules/js-beautify/js/bin/html-beautify.js

Answer 14 · 2019-02-24T21:18:23.000Z

If you want to use path option inside comment block of editorconfig you should use
this notation

;vim:path=~/.vim/bundle/js-beautify/js/lib/beautify-html.js

Answer 15 · 2019-02-24T21:21:32.000Z

first option is giving me error Cannot find module '/home/migacz/'

Answer 16 · 2019-02-24T21:26:34.000Z

Second is giving me error that I dont have lib folder - and I dont have it. Is not even on official repository. Should I run some command for this folder to appear ?
I installed it using this method
Plugin 'einars/js-beautify'

Answer 17 · 2019-02-24T21:31:28.000Z

Installed from Plugin 'einars/js-beautify'
.
├── bin
│   ├── css-beautify.js
│   ├── html-beautify.js
│   └── js-beautify.js
├── config
│   └── defaults.json
├── index.js
├── src
│   ├── cli.js
│   ├── core
│   │   ├── directives.js
│   │   ├── inputscanner.js
│   │   ├── options.js
│   │   ├── output.js
│   │   ├── pattern.js
│   │   ├── templatablepattern.js
│   │   ├── tokenizer.js
│   │   ├── token.js
│   │   ├── tokenstream.js
│   │   └── whitespacepattern.js
│   ├── css
│   │   ├── beautifier.js
│   │   ├── index.js
│   │   ├── options.js
│   │   └── tokenizer.js
│   ├── html
│   │   ├── beautifier.js
│   │   ├── index.js
│   │   ├── options.js
│   │   └── tokenizer.js
│   ├── index.js
│   ├── javascript
│   │   ├── acorn.js
│   │   ├── beautifier.js
│   │   ├── index.js
│   │   ├── options.js
│   │   └── tokenizer.js
│   └── unpackers
│   ├── javascriptobfuscator_unpacker.js
│   ├── myobfuscate_unpacker.js
│   ├── p_a_c_k_e_r_unpacker.js
│   └── urlencode_unpacker.js

Answer 18 · 2019-02-24T21:31:49.000Z

@Migacz85 Hm... You can install it by npm, maybe Plugin just download sources not a build version

Answer 19 · 2019-02-24T21:37:22.000Z

How I should build it ? running make inside folder build it but... for pyhon.

Answer 20 · 2019-02-24T21:39:00.000Z

@Migacz85 I think npm is the easiest way to do it (if you have npm installed)

npm install js-beautify

Answer 21 · 2019-02-24T21:40:32.000Z

npm ERR! code ENOSELF
npm ERR! Refusing to install package with name "js-beautify" under a package
npm ERR! also called "js-beautify". Did you name your project the same
npm ERR! as the dependency you're installing?
npm ERR!
npm ERR! For more information, see:
npm ERR! https://docs.npmjs.com/cli/install#limitations-of-npms-install-algorithm

npm ERR! A complete log of this run can be found in:
npm ERR! /home/migacz/.npm/_logs/2019-02-24T21_39_56_835Z-debug.log

Answer 22 · 2019-02-24T21:43:31.000Z

Looks like you inside folder js-beautify.
Let's install this package inside ~/.vim folder

cd $HOME/.vim
npm install js-beautify

Answer 23 · 2019-02-24T21:44:31.000Z

Ok so this can be version problem.

When I installed js-beautify localy using npm install and reffered to this path:
; Cannot find module '/home/migacz/'
; path=.vim/node/node_modules/js-beautify/js/bin/html-beautify.js

I installed js-beautify in separate folder previously that way, and I passed this folder to config and I got this error

; Cannot find module '/home/migacz/'
; path=.vim/node/node_modules/js-beautify/js/bin/html-beautify.js

Answer 24 · 2019-02-24T21:46:34.000Z

@Migacz85 could you post your .editorconfig file

Answer 25 · 2019-02-24T21:48:09.000Z

and giving ~/ at dose not help.

;.editorconfig

root = true

[**.js]
; default ~/.vim/bundle/vim-jsbeautify/plugin/lib
indent_style = space
indent_size = 2

[**.json]
indent_style = space
indent_size = 4

[**.jsx]
e4x = true
indent_style = space
indent_size = 4

[**.css]
indent_style = space
indent_size = 1

[**.html]

;vim:path=~/.vim/bundle/js-beautify/js/lib/beautify-html.js

indent_style = space
indent_size = 2 
max_char = 62

Answer 26 · 2019-02-24T21:49:11.000Z

Hm... and the file ~/.vim/bundle/js-beautify/js/lib/beautify-html.js exists?

Answer 27 · 2019-02-24T21:49:14.000Z

I'm constantly changing this path in html section

Answer 28 · 2019-02-24T21:52:53.000Z

No in this folder is not exisiting. And error clearly mention it. So I decided to install like you said to install in different folder using npm install js-beautify and reffer to it. like that:
path=~/.vim/node/node_modules/js-beautify/js/bin/html-beautify.js

but this is resulting in error anyway :
Cannot find module '/home/migacz/'

Answer 29 · 2019-02-24T21:55:01.000Z

When I'm reffering to path with /lib/

Cannot find module '/home/migacz/'

Answer 30 · 2019-02-24T21:58:57.000Z

Ok...
Let's try to look at b:config_Beautifier

Open the html file by vim and run

:echo b:config_Beautifier

This command should print config for the current buffer

Answer 31 · 2019-02-24T22:00:30.000Z

{'jsx': {'indent_char': ' ', 'e4x': 'true', 'indent_style': 'space', 'indent_size': '4'}, 'js': {'indent_char': ' ', 'indent_style': 'space', 'indent_size': '2'}, 'json': {'i
ndent_char': ' ', 'indent_style': 'space', 'indent_size': '4'}, 'html': {'indent_char': ' ', 'path': '~/.vim/node/node_modules/js-beautify/js/lib/html-beautify.js', 'indent_s
tyle': 'space', 'indent_size': '2 ', 'max_char': '62'}, 'css': {'indent_char': ' ', 'indent_style': 'space', 'indent_size': '1'}}

Answer 32 · 2019-02-24T22:01:36.000Z

This path looks wrong

~/.vim/node/node_modules/js-beautify/js/lib/html-beautify.js

It should be ~/.vim/node_modules/js-beautify/js/lib/beautify-html.js

Answer 33 · 2019-02-24T22:03:36.000Z

This is the structure of js-beautify@1.8.9 installed by npm

.
├── CHANGELOG.md
├── LICENSE
├── README.md
├── js
│   ├── bin
│   │   ├── css-beautify.js
│   │   ├── html-beautify.js
│   │   └── js-beautify.js
│   ├── index.js
│   ├── lib
│   │   ├── beautifier.js
│   │   ├── beautifier.min.js
│   │   ├── beautify-css.js
│   │   ├── beautify-html.js
│   │   ├── beautify.js
│   │   ├── cli.js
│   │   └── unpackers
│   │       ├── javascriptobfuscator_unpacker.js
│   │       ├── myobfuscate_unpacker.js
│   │       ├── p_a_c_k_e_r_unpacker.js
│   │       └── urlencode_unpacker.js
│   └── src
│       ├── cli.js
│       ├── core
│       │   ├── directives.js
│       │   ├── inputscanner.js
│       │   ├── options.js
│       │   ├── output.js
│       │   ├── token.js
│       │   ├── tokenizer.js
│       │   └── tokenstream.js
│       ├── css
│       │   ├── beautifier.js
│       │   ├── index.js
│       │   ├── options.js
│       │   └── tokenizer.js
│       ├── html
│       │   ├── beautifier.js
│       │   ├── index.js
│       │   ├── options.js
│       │   └── tokenizer.js
│       ├── index.js
│       ├── javascript
│       │   ├── acorn.js
│       │   ├── beautifier.js
│       │   ├── index.js
│       │   ├── options.js
│       │   └── tokenizer.js
│       └── unpackers
│           ├── javascriptobfuscator_unpacker.js
│           ├── myobfuscate_unpacker.js
│           ├── p_a_c_k_e_r_unpacker.js
│           └── urlencode_unpacker.js
└── package.json

Answer 34 · 2019-02-24T22:04:37.000Z

Yes but I put extra node folder before installing it

Answer 35 · 2019-02-24T22:05:27.000Z

Migacz85 commented 6 years ago

Answer 36 · 2019-02-24T22:07:05.000Z

@Migacz85 I saw but problem not in the additional directory.

You had a wrong path inside editorconfig

lib/html-beautify.js should be lib/beautify-html.js

Answer 37 · 2019-02-24T22:07:07.000Z

And the error cannot find /home/migacz module ? is strange.

Answer 38 · 2019-02-24T22:07:32.000Z

Let me doube check

Answer 39 · 2019-02-24T22:12:39.000Z

1 internal/modules/cjs/loader.js:615
2 throw err;
1 ^
2
3 Error: Cannot find module '/home/migacz/'
4 at Function.Module._resolveFilename (internal/mo
5 at Function.Module._load (internal/modules/cjs/l
6 at Module.require (internal/modules/cjs/loader.j
7 at require (internal/modules/cjs/helpers.js:20:1
8 at load (/home/migacz/.vim/bundle/vim-jsbeautify
9 at /home/migacz/.vim/bundle/vim-jsbeautify/plugi
10 at Object. (/home/migacz/.vim/bundle/
11 at Object. (/home/migacz/.vim/bundle/
12 at Module._compile (internal/modules/cjs/loader.
13 at Object.Module._extensions..js (internal/modul

{'jsx': {'indent_char': ' ', 'e4x': 'true', 'indent_styl
e': 'space', 'indent_size': '4'}, 'js': {'indent_char':
' ', 'indent_style': 'space', 'indent_size': '2'}, 'json
': {'indent_char': ' ', 'indent_style': 'space', 'indent
_size': '4'}, 'html': {'indent_char': ' ', 'path': '.vim
/node/node_modules/js-beautify/js/lib/beautify-html.js',
'indent_style': 'space', 'indent_size': '2 ', 'max_char
': '62'}, 'css': {'indent_char': ' ', 'indent_style': 's
pace', 'indent_size': '1'}}

Answer 40 · 2019-02-24T22:15:32.000Z

Try to add ~ here

'path': '.vim/node/node_modules/js-beautify/js/lib/beautify-html.js',

Answer 41 · 2019-02-24T22:17:17.000Z

this is madness

Answer 42 · 2019-02-24T22:18:05.000Z

this is madness

Yah... This is javascript :)

Answer 43 · 2019-02-24T22:19:53.000Z

@Migacz85 Which version of node you use?

Answer 44 · 2019-02-24T22:20:48.000Z

[migacz@migacz lib]$ npm -v
6.8.0
[migacz@migacz lib]$ node -v
v11.10.0

Answer 45 · 2019-02-24T22:21:58.000Z

The error is pointing on /home/migacz <- not on the path I'm constantly changing.

Answer 46 · 2019-02-24T22:24:11.000Z

@Migacz85 it relates because nodejs can't find a module and only one place which affect module loading is path option

Try to log options inside js - https://github.com/maksimr/vim-jsbeautify/blob/master/plugin/beautify.js#L6

(contentPath, options, path)

Answer 47 · 2019-02-24T22:45:51.000Z

What I did:
I cut folder js-beautify from installation npm-install, and put it to .vim/bundle/ after pressing ctrl+f beautifying runs without error and I have this results:

{'jsx': {'indent_char': ' ', 'e4x': 'true', 'indent_styl
e': 'space', 'indent_size': '4'}, 'js': {'indent_char':
' ', 'indent_style': 'space', 'indent_size': '2'}, 'json
': {'indent_char': ' ', 'indent_style': 'space', 'indent
_size': '4'}, 'html': {'indent_char': ' ', ' path': '.vi
m/bundle/js-beautify/js/lib/html-beautify.js', 'indent_s
tyle': 'space', 'indent_size': '2 ', 'max_char': '62'},
'css': {'indent_char': ' ', 'indent_style': 'space', 'in
dent_size': '1'}}

I don't know what it is but it look like a bug.

Answer 48 · 2019-02-24T22:51:12.000Z

The result is that this plugin produce different results in vim than when runned from shell. But to be honest I even doubt that he run this new version of the file even if the path is specified here. Or plugin have some bug and is putting different result than js-beautify. Not sure.

Answer 49 · 2019-02-24T23:01:22.000Z

@Migacz85 this is weird.

Weird that it doesn't work when you set .vim/node/node_modules/... it throws an exception but doesn't throw it when using bundled version of js-beautify
Weird that when you put new version and run it without error it outputs the wrong result

For me
js-beautify@1.8.9

js-beautify@1.7.5

My .editorconfig

root = true

[**.js]
indent_style = space
indent_size = 2
brace_style = collapse,preserve-inline

[**.jsx]
e4x = true
indent_style = space
indent_size = 2

[**.css]
indent_style = space
indent_size = 2

[**.html]
path=~/.vim/node_modules/js-beautify/js/lib/beautify-html.js
max_char=78
brace_style=expand
indent_style = space
indent_size = 2
indent_inner_html=true
preserve_newlines=true
wrap-line-length = 0

Answer 50 · 2019-02-24T23:09:33.000Z

I re run this again. And now I got this error:

Error: Cannot find module '/home/migacz/.vim/bundle/js-beautify/js/lib/html-beautify.js'

Ok. I re run this with:

.vim/bundle/js-beautify/js/lib/beautify-html.js

And.. I have perfectly formatted html document now.

Answer 51 · 2019-02-24T23:14:05.000Z

I am glad that we have solved this problem.
But it a bit strange that path with node/node_modules didn't work

Answer 52 · 2019-02-24T23:14:34.000Z

But after losing so much time I'm not even happy from that. :-)

What can be a bug is that this works only when the installation was in .vim/bundle/ from different locations was producing this strange errors.

Answer 53 · 2019-02-24T23:16:21.000Z

@Migacz85 maybe the problem in vim's expand function which we use to expand the path and some vim configuration options affects this function

Answer 54 · 2019-02-24T23:17:00.000Z

Another thing is that I still don't understand why from official repository that is on github there is no /lib/ folder active ? How did you upgrade to the latest js-beautify ?

Answer 55 · 2019-02-24T23:23:36.000Z

It would be best if this plugin would be with the latest version avaliable when installing. At the begginig I was thinking that I will just add second repo from official js-beautify and reffer to the lib folder there. And upgrading after will be easy-peasy. But I think is not possible that way?

Answer 56 · 2019-02-24T23:23:59.000Z

why from official repository that is on github there is no /lib/ folder active ?

Usually, publish only built version of a package.
https://github.com/beautify-web/js-beautify/blob/master/Makefile#L74

How did you upgrade to the latest js-beautify ?

vim plugin doesn't use lates versoin for the same reason because js-beautify doesn't have necessary/built files under git now. So maybe in the future I'll remove bundled version at all because I don't want to add deps on npm

Answer 57 · 2019-02-24T23:31:20.000Z

Yes, npm can be problematic but as long as it work well all is fine. It would be great to think about how to simplify/atuomate this proccess of autoupdating js-beautify. And this will be good :-)