javascript - 使用 HTML 运行 JSHint 并出现错误

标签 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>

最佳答案

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

与此同时,它仍然无法识别像这种情况下的 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

关于javascript - 使用 HTML 运行 JSHint 并出现错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38143236/

相关文章:

javascript - 当选择值状态更新时,不会调用 componentDidMount

javascript - Three.js raycaster 相交对象返回奇怪的面法线

javascript - Eclipse 中的 JSDT 部分 jQuery 代码辅助

javascript - 在 Bootstrap 中是否可以隐藏元素并用 Accordion 替换它们?

regex - 未封闭的正则表达式

javascript - disallowTrailingComma 在 jscs 中不起作用

javascript - 无法让 gulp-notify 在 gulp-jshint 失败时弹出错误消息

gruntjs - grunt-contrib-jshint 忽略无效

c# - 检查 DOM 是否静止

jquery - JSHint 说 '$' 未定义