使用HTML运行JSHint并获取错误

时间:2016-07-01 10:36:09

标签: javascript jshint

我是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>

1 个答案:

答案 0 :(得分:3)

这是一个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
  

如果将其设置为始终,JSHint将始终尝试提取   JavaScript的。如果您将其设置为 auto ,它将仅进行尝试   如果文件看起来像是HTML文件。

同时,它仍然无法识别像onclick这样的HTML属性事件处理程序中的javascript,这是一种不好的做法。如果你真的想在HTML中使用你的Javascript,你可以将它放在脚本标签中,如下所示:

<强> 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