【问题标题】：How to run JSHint on files with Django template markup in them?如何在带有 Django 模板标记的文件上运行 JSHint？
【发布时间】：2012-03-26 17:46:55
【问题描述】：

我想在我所有的 Javascript 源文件上运行 JSHint，但其中一些文件有一些嵌入的 Django 模板标记。 JSHint 在这个标记上抛出大量错误。

有没有办法...

告诉 JSHint 忽略这个标记
使用一些虚拟数据运行 Djnago 模板解析器以生成呈现的 js 文件的所有排列，然后在其上运行 JSHint？

我假设我可以编写一堆代码来执行 #2，但我想知道是否有更简单的方法。

【问题讨论】：

标签： javascript django jshint

【解决方案1】：

根据标记，您可以使用 JavaScript cmets “隐藏” Django 标记。我们这样做，例如：

// {% if cond %}
someJavaScriptCode();
// {% else %}
somethingElse();
// {% endif %}

// {% include "script.js" %}

唯一的问题是您必须在 script.js 中添加一个空行，否则 // 会吃掉您那里的第一行合法的 JavaScript 代码。我写了一个简单的助手{% includejs %}，它会自动为我做这件事。

【讨论】：

所以，这让我解决了 95% 的问题，并且是一个很好的简单解决方案，但现在我担心错误或更恰当地遗漏错误，因为我正在测试 IF 的两个分支。您在实践中是否发现这是一个问题？
是的，我确实有这个问题。但最终避免了它，因为我以 Django 模板仅用于获取动态数据的方式重构了我们的应用程序。其他一切都是 CDN 上的原始 JavaScript。不确定它是否有帮助，对不起。 :-\
在这种情况下如何处理单个变量包括，例如{{variable_name}}？
我们只在字符串中使用 Django 变量。我们有一个更复杂的对象（只有一个），它实际上包含了我们需要的一切——我们对它进行字符串化然后解析它。像这样的东西：var data = "{{ jsonData|parse }}";

【解决方案2】：

实际上有一种规范的方法可以从 JSHint 中隐藏 Django 标记（或任何其他内容）：

/* jshint ignore:start */
javascript_var = {{ context_json_string_var }};
/* jshint ignore:end */

JSLint 也是这样：

/*ignore jslint start*/
javascript_var = {{ context_json_string_var }};
/*ignore jslint end*/

【讨论】：

【解决方案3】：

您也可以使用这种丑陋的解决方案。 jslint 认为“stuff =”是评论的一部分。

var stuff;
/* {{ '*' + '/' }}
stuff = {{ variable_containing_json_object_or_list }};                      
// */

【讨论】：

【解决方案4】：

我发现使用 --extract 标志往往会起作用。它还消除了模板中可能包含的任何 html 代码。

jshint --extract=always your_template_file.html

【讨论】：

【解决方案5】：

我个人在通过jslint工具传递django javascript模板时遇到了3个问题：

控制结构

它们可以很容易地隐藏在 javascript cmets 中，正如 Anton Kovalyov 建议的那样：

// {{ if some_flag }}
console.log("Conditional log");
// {{ endif }}

字符串变量

显而易见的解决方案是将 django 标签括在双引号中。然而值得记住的是，如果变量内容没有正确转义，生成的代码可能是无效的：

var javascript_var = "{{ context_var|escapejs }}";

序列化为 json 的复杂结构

埃德温的诡计奏效了：

var javascript_var;
/* {{ '*' + '/' }}
javascript_var = {{ context_json_string_var }};                      
// */

如果您在 html 模板中包含 javascript 源模板，您可以在其中声明一个“getter”函数并从 javascript 脚本中访问它：

<script type="text/javascript">function getIt() { return {{ context_var }}; };</script>
<script type="text/javascript">{% include 'script.js' %}</script>

在这种情况下，javascript 源代码看起来可以接受：

/*global getIt*/
var haveIt = getIt();

【讨论】：