javascript - ¿cómo puedo solucionar el error de ESLint 'no-unused-var' con Google Maps?

Creo que es un problema simple pero no puedo resolverlo
Había ingresado /* export myMap */ o /* global myMap */ en la parte superior del script, pero los errores continúan

Código

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);
}

Cuando escribí el código como se mostró arriba, vi el siguiente error

Error de ESLint 'myMap' está definido pero nunca se usa. (no-unused-vars)
Error de ESLint 'google' no está definido. (no-undef)
Error de ESLint 'map' se le asigna un valor pero nunca se usa. (no-unused-vars)
Error de ESLint 'google' no está definido. (no-undef)

pero la API de Google usa 'google', 'map' y yo uso 'myMap'. no hay duda
por favor ayuda a un principiante. gracias

p.s. no quiero resolverlo con /* eslint-disable no-unused-vars */

Respuesta #1

Para deshacerse de los mensajes de error, tienes que decirle a tu linter que google es una variable externa, y necesitas decirle al linter que planeas usar myMap externamente. Y como no usas map más tarde, simplemente puedes eliminar el var map =.

El linter es realmente tonto y solo puede verificar la consistencia dentro del archivo que actualmente analiza, no puede verificar que se use una función en otro archivo/script y no puede verificar que una variable se origine en otro lugar.

El enfoque más sencillo sería usar la opción global para indicarle al linter que google fue definido en otro lugar, y escribir window.myMap=myMap, de esa manera asignas explícitamente myMap al objeto global window (lo cual para el código dado realmente no cambia nada ya que myMap ya está definido globalmente) y le dices al linter que se espera que sea usado en otro lugar fuera de ese script.

El linter no puede verificar que myMap realmente se use en otro lugar y tiene que confiar en ti allí.

/* 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;

Pero si no usas un agrupador de módulos como webpack o rollup y nada similar a commonjs, amd o módulos nativos de es6, entonces siempre deberías envolver tu código en un IIFE para asegurarte de que contaminas lo menos posible el ámbito global:

(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;
}())

Y aquí el window.myMap=myMap tiene en efecto el propósito de hacer que la función esté disponible para otros scripts.

En lugar de escribir /* global google */, podrías hacer el inverso de window.myMap=myMap, pero esto solo funcionará si los scripts se cargan en el orden correcto para que los scripts de Google Maps establezcan google antes de que se ejecute tu script:

(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;
}())

Ahora tienes una sintaxis que está realmente cerca de cómo se ven los módulos AMD (como los usados en nodejs o webpack), y facilitaría las cosas si planeas cambiar a un empaquetador en el futuro:

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;