我如何使用谷歌地图解决“no-unused-var”的 ESLint 错误

Question

我认为这是一个简单的问题，但我无法解决它
我在脚本顶部输入了/* export myMap */ 或/* global myMap */，但错误仍在继续

代码

HTML

<h1>My First Google Map</h1>
<div id="googleMap" style="width:60%;height:600px;margin: auto;"></div>
<script src="https://maps.googleapis.com/maps/api/js? key=YOUR_KEY&callback=myMap"></script>

JavaScript

function myMap() {
    var mapProp= {
        center:new google.maps.LatLng(37.540881, 127.079689),
        zoom:17,
    };
    var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}

当我编写如上所示的代码时，我看到了以下错误

错误 ESLint 'myMap' 已定义但从未使用过。 （没有未使用的变量）
错误 ESLint 'google' 未定义。 （无非定义）
错误 ESLint 'map' 被赋值但从未使用过。 （没有未使用的变量）
错误 ESLint 'google' 未定义。 （无非定义）

但是 google API 使用 'google', 'map' 而我使用 'myMap' 。毫无疑问
请帮助初学者。谢谢

附言我不想用/* eslint-disable no-unused-vars */解决

Answer 1

要消除错误消息，您必须告诉 linter google 是一个外部变量，并且您需要告诉 linter 您计划在外部使用 myMap。由于您以后不使用map，您可以删除var map =。

linter 真的很笨，只能验证它当前 lints 的文件内的一致性，它无法验证在另一个文件/脚本中使用的函数，也无法验证变量是否来自其他地方。

最简单的方法是使用global 选项告诉linter google 是在其他地方定义的，然后写入window.myMap = myMap，这样您就可以将myMap 显式分配给全局对象window（对于给定的代码，它并没有真正改变任何东西，因为 myMap 已经在全局范围内定义），并告诉 linter 预计它会在该脚本之外的其他地方使用。

linter 无法验证 myMap 它确实在其他地方使用并且必须在那里信任你。

/* global google */

function myMap() {
  var mapProp = {
    center: new google.maps.LatLng(37.540881, 127.079689),
    zoom: 17,
  };
  new google.maps.Map(document.getElementById("googleMap"), mapProp);
}

window.myMap = myMap;

但是，如果您不使用 webpack 或 rollup 之类的模块捆绑器，而没有使用 commonjs、amd 或原生 es6 模块之类的模块，那么您应该始终将您的代码包装到 IIFE 中，以确保减少对全局范围的污染尽可能：

(function() {
  /* global google */

  function myMap() {
    var mapProp = {
      center: new google.maps.LatLng(37.540881, 127.079689),
      zoom: 17,
    };
    new google.maps.Map(document.getElementById("googleMap"), mapProp);
  }

  window.myMap = myMap;
}())

这里window.myMap = myMap 确实具有使该功能可用于其他脚本的目的。

而不是写/* global google */，你可以做window.myMap = myMap的逆操作，但这只有在脚本以正确的顺序加载时才有效，以便谷歌地图脚本在你的脚本执行之前设置goolge：

(function() {
  var google = window.google;

  function myMap() {
    var mapProp = {
      center: new google.maps.LatLng(37.540881, 127.079689),
      zoom: 17,
    };
    new google.maps.Map(document.getElementById("googleMap"), mapProp);
  }

  window.myMap = myMap;
}())

现在您的语法非常接近 AMD 模块（如在 nodejs 或 webpack 中使用）的外观，如果您计划将来切换到捆绑器，它会更容易：

var google = require('google');

function myMap() {
  var mapProp = {
    center: new google.maps.LatLng(37.540881, 127.079689),
    zoom: 17,
  };
  new google.maps.Map(document.getElementById("googleMap"), mapProp);
}

exports.myMap = myMap;