使用 HTML 运行 JSHint 并出现错误答案

【问题标题】：Running JSHint with HTML and getting errors使用 HTML 运行 JSHint 并出现错误
【发布时间】：2016-07-01 10:36:09
【问题描述】：

我是 JSHint 的新手，并试图运行它来验证我的 Javascript。我安装了 node.js，当我尝试运行 JSHint 时，出现以下错误。

C:\Users\574839\Desktop\testscr.js:1
(function (exports, require, module, __filename, __dirname) { <!DOCTYPE html>
                                                          ^
SyntaxError: Unexpected token <
at Object.exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:513:28)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
at Function.Module.runMain (module.js:575:10)
at startup (node.js:160:18)
at node.js:456:3

我有一个带有以下选项的 .jshintrc 文件：

{
 "bitwise": true,
 "camelcase": true,
 "curly": true,
 "eqeqeq": true,
 "es3": false,
 "forin": true,
 "freeze": true,
 "immed": true,
 "indent": 4,
 "latedef": "nofunc",
    "newcap": true,
    "noarg": true,
  "noempty": true,
  "nonbsp": true,
  "nonew": true,
 "plusplus": false,
 "quotmark": "single",
 "undef": true,
 "unused": false,
 "strict": false,
 "maxparams": 10,
 "maxdepth": 5,
 "maxstatements": 40,
 "maxcomplexity": 8,
 "maxlen": 120,
 "asi": false,
 "boss": false,
 "debug": false,
 "eqnull": true,
 "esnext": false,
 "evil": false,
 "expr": false,
 "funcscope": false,
 "globalstrict": false,
 "iterator": false,
 "lastsemic": false,
 "laxbreak": false,
 "laxcomma": false,
 "loopfunc": true,
 "maxerr": false,
 "moz": false,
 "multistr": false,
 "notypeof": false,
 "proto": false,
 "scripturl": false,
 "shadow": false,
 "sub": true,
 "supernew": false,
 "validthis": false,
 "noyield": false,
 "browser": true,
 "node": true,
 "globals": {
     "angular": false,
   "$": false
  }
}

有人可以告诉我为什么会出错吗？

我的 JS 代码如下。

<!DOCTYPE html>
<html>
<body>

<h1>What Can JavaScript Do?</h1>

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick="document.getElementById('demo').innerHTML='Hello JavaScript!'">Click Me!</button>

</body>
</html>

【问题讨论】：

标签： javascript jshint

【解决方案1】：

这是一个 HTML 文件，而不是 JavaScript 文件。但幸运的是，如果您将 --extract 选项传递给它，JSHint 可以处理 HTML 文件中的 javascript。

来自documentation：

--extract=[auto|always|never]
告诉 JSHint 在 linting 之前从 HTML 文件中提取 JavaScript：

tmp ☭ cat test.html
<html>
  <head>
    <title>Hello, World!</title>
    <script>
      function hello() {
        return "Hello, World!";
      }
    </script>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <script>
      console.log(hello())
    </script>
  </body>
</html>

tmp ☭ jshint --extract=auto test.html
test.html: line 13, col 27, Missing semicolon.

1 error

如果您将其设置为 always，JSHint 将始终尝试提取 JavaScript。如果你将它设置为 auto 它只会尝试如果文件看起来像是一个 HTML 文件。

与此同时，它仍然无法识别 HTML 属性事件处理程序中的 javascript，例如 onclick，例如这种情况，这是一种不好的做法。如果你真的想把你的 Javascript 放在 HTML 中，你可以把它放在下面的脚本标签中：

testscr.html：

<!DOCTYPE html>
<html>
    <body>

    <h1>What Can JavaScript Do?</h1>

    <p id="demo">JavaScript can change HTML content.</p>

    <button type="button" onclick="sayHello()">Click Me!</button>
    <script>
      function sayHello() {
        document.getElementById('demo').innerHTML='Hello JavaScript!';
      }
    </script>
    </body>
</html>

看起来你正在将它传递给节点，比如node testscr.js，但你应该做的是将它传递给 jshint：jshint --extract=always testscr.js

【讨论】：

有没有办法告诉 JSHint 从 HTML 中提取 JS 并只测试 JS？
感谢法里德！最后一个问题。除了在控制台中显示错误/警告之外，它是否像日志文件一样生成？我不确定在哪里寻找测试的输出。
废话不多说，再看看答案。我更新了它。如果您希望输出在文件中，只需通过管道传输：jshint --extract=always testscr.js > output.txt
在哪里设置标志只检查.jshint文件中的js文件？
@Flash 现在不可能。不过，有一个issue 申请了它，所以你可以在那里追踪它。