Running JSHint with HTML and getting errors

问题

I'm a newbie to JSHint and trying to run it to validate my Javascript. I have node.js installed and when i try to run JSHint i get the error below.

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

I have a .jshintrc file with the following options:

{
 "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
  }
}

Can someone please advise why I get the error?

my JS code is below.

<!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:

That's an HTML file and not a JavaScript file. But luckily JSHint can work on the javascript from HTML files if you pass the --extract option to it.

From the 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.

In the mean time, it still doesn't recognize the javascript in HTML attribute event handlers like onclick such as this case, which is a bad practice. If you really want to have your Javascript in HTML you have put it in script tags such as the following:

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>

Also it looks like you're passing it to node, like node testscr.js, but what you should be doing is to pass it to jshint: jshint --extract=always testscr.js

来源：https://stackoverflow.com/questions/38143236/running-jshint-with-html-and-getting-errors

标签

javascript

jshint