WebStorm编写外联式JavaScript脚本遇到的问题

WebStorm编写外联式JavaScript脚本遇到的问题

虽然直接把html文件中的JavaScript拉到外部js文件里并引入不影响页面功能的实现，但是js文件中会出现很多警告。这是由于JavaScript脚本需要的外部依赖项没有在js文件中引入，而html文件中引入了。但是写代码本着简洁明了、不忽视每一个报错的原则，打算深究一下如何处理这些警告。

---

---

问题1：JSHint: ‘import’ is only avaliable in ES6 (use ‘eversion: 6’).(w119)

解决思路

1. 什么是 ES6 ?

简单理解就是JavaScript的语法标准，采用第6版。

2. 试图让js文件支持ES6

在页面顶部加上 /* jshint esversion: 6 */

问题2： jshint: Incompatible values for the ‘esversion’ and ‘esnext’ linting options

解决思路

上一步刚加完 /* jshint esversion: 6 */ 之后就被划红线了，警告内容是 jshint: Incompatible values for the ‘esversion’ and ‘esnext’ linting options，大致是说JSHint不支持ES6（我已经修改过配置了，这里不方便截图）。

如遇 jshint: Incompatible values for the ‘esversion’ and ‘esnext’ linting options警告 --修改JSHint配置文件

打开设置，按照下图打开JSHint的配置，取消点击 Use config files ，找到 Warn about imcompatibilities with the specified ECMAScript version，点击Set，设置为6，警告消除。

问题3： ‘$’ is not defined.

$ 是在 jquery 里面定义的，加入代码引入 $ 变量：

import $ from '../js/jquery-3.4.1.js';
window.jQuery = $;
window.$ = $;

警告消除：

如果遇到其他变量被警告没有定义，也可以类似的找到他的定义文件，特地的从文件中引入变量即可。

---

总结

大多是围绕JSHint的配置文件出发去解决的，他是一个很好用的WebStorm插件，帮助查找Javascript的语法错误，把配置修改成适应自己的就好了。