运行使用 HTML 的 JSHint 并出现错误

Question

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

C:\Users4839\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>

Answer 1

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

来自documentation：

--extract=[auto|always|never]
Tells JSHint to extract JavaScript from HTML files before linting:

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

If you set it to always JSHint will always attempt to extract JavaScript. And if you set it to auto it will make an attempt only if file looks like it's an HTML file.

与此同时，它仍然无法识别 javascript in HTML 属性事件处理程序，如 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

运行 使用 HTML 的 JSHint 并出现错误

Running JSHint with HTML and getting errors

javascript

jshint

运行使用 HTML 的 JSHint 并出现错误