How to avoid formatting (to incorrect code) especially in <script> tags - django-html
- Operating System (+Version): Windows 10
- VS Code Version: 1.33.1
- beautify Version: 1.4.11
NOTE: Please provide code snippets instead of screen shots. Your issue needs to be replicated, and we need the failing code (text) to do this.
Provide the settings you use:
{ "editor.minimap.enabled": false, "editor.renderControlCharacters": true, "breadcrumbs.enabled": false, "editor.renderWhitespace": "none", "editor.formatOnSave": true, "workbench.statusBar.visible": true, "workbench.colorTheme": "Material Theme Palenight High Contrast", "editor.multiCursorModifier": "ctrlCmd", "color-highlight.markerType": "dot-before", "python.linting.pylintPath": "pylint", "python.linting.pylintArgs": [ "--load-plugins", "pylint_django" ], "python.linting.pep8Enabled": true, "[python]": { "editor.defaultFormatter": "ms-python.python", }, "python.formatting.autopep8Args": [ "-a" ], "html.suggest.html5": true, "html.validate.scripts": true, "html.validate.styles": true, "html.format.enable": true, "C_Cpp.updateChannel": "Insiders", "workbench.iconTheme": "material-icon-theme", "workbench.colorCustomizations": {}, "emmet.triggerExpansionOnTab": true, "emmet.showSuggestionsAsSnippets": true, "editor.snippetSuggestions": "top", "[jsonc]": { "editor.defaultFormatter": "vscode.json-language-features" }, "beautify.language": { "css": [ "css", "scss" ], "html": [ "htm", "html", "django-html" ] // ^^ providing just an array sets the VS Code file type } }
Action performed
NOTE: i know that you do not support django-html so it's more of feature request than a bug Saved document format on save trigerred
{% load my_tags %}
{{user.pb.single}}
<style>
.won {
background: red;
}
</style>
<body>
<table id='times'>
<thead>
<tr id='usernames'>
<th>#</th>
</tr>
<tr id='means'>
<th>Mean</th>
</tr>
<tr id='aoWins'>
<th>Wins</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="{% static 'room/js/preetifyTime.js' %}"></script>
<script src="{% static 'room/js/user.js' %}"></script>
<script>
{% block javascript %}
let mainMethod = "{{user.main_method}}",
roomName = "{{room.name}}",
roomID = "{{room.id}}",
noSolve = {{ room.nosolve.no_solve | add: '1' }},
siteLink = "{{ request.get_host }}",
userId = "{{user.id}}",
sendTimeURL = "{% url 'room:send_time' %}",
csrf = '{{ csrf_token }}',
users = [],
times = [],
usersId = [],
u;
{% for user in room.users %}
u = {{ user.id }}
usersId.push(u);
times[u] = [];
{% endfor}
{% for time in room.time_set.all | dictsort: "no_time" %}
{% if time.user_id in room.usersID % }
times['{{ time.user_id }}'][{{ time.no_time }}] = ({{ time.time }});
{% endif %}
{% endfor %}
{% for user in room.users %}
u = {{user.id}};
users['u' + u] = new User("{{user.username}}", u, times[u]);
{% endfor %}
{% endblock javascript %}
</script>
<script src="{% static 'room/js/roomView.js' %}"></script>
</body>```
## Expected results
django template tags should remain untouched mby some indentations added
## Actual results
While tags in html remained untouched those in script tag become completely unreadable as your extensions detects it as normal curly brackets
```{% load static %}
{% load my_tags %}
{{user.pb.single}}
<style>
.won {
background: red;
}
</style>
<body>
<table id='times'>
<thead>
<tr id='usernames'>
<th>#</th>
</tr>
<tr id='means'>
<th>Mean</th>
</tr>
<tr id='aoWins'>
<th>Wins</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="{% static 'room/js/preetifyTime.js' %}"></script>
<script src="{% static 'room/js/user.js' %}"></script>
<script>
{
% block javascript %
}
let mainMethod = "{{user.main_method}}",
roomName = "{{room.name}}",
roomID = "{{room.id}}",
noSolve = {
{
room.nosolve.no_solve | add: '1'
}
},
siteLink = "{{ request.get_host }}",
userId = "{{user.id}}",
sendTimeURL = "{% url 'room:send_time' %}",
csrf = '{{ csrf_token }}',
users = [],
times = [],
usersId = [],
u; {
%
for user in room.users %
}
u = {
{
user.id
}
}
usersId.push(u);
times[u] = []; {
% endfor
} {
%
for time in room.time_set.all | dictsort: "no_time" %
} {
%
if time.user_id in room.usersID %
}
times['{{ time.user_id }}'][{
{
time.no_time
}
}] = ({
{
time.time
}
}); {
% endif %
} {
% endfor %
}
{
%
for user in room.users %
}
u = {
{
user.id
}
};
users['u' + u] = new User("{{user.username}}", u, times[u]); {
% endfor %
}
{
% endblock javascript %
}
</script>
<script src="{% static 'room/js/roomView.js' %}"></script>
</body>```
This is likely to be controllable with a setting. Will get back to you soon.
The best you can do is add "style" to the "unformatted" or the "content_unformatted" options in either the .jsbeautifyrc file, or within the beautify.config setting of VS Code.