ESLint - «fenêtre» n'est pas définie. Comment autoriser les variables globales dans package.json

192

J'attribue une propriété à l'objet global window, mais lorsque j'exécute eslint, j'obtiens ceci:

"fenêtre" n'est pas défini

Je vois cela ici dans la documentation eslint :

ce qui suit définit window comme une variable globale pour le code qui ne doit pas déclencher la règle testée:

valid: [
  {
    code: "window.alert()",
    globals: [ "window" ]
  }
]

J'ai essayé d'ajouter quelque chose comme ça au fichier package.json pour que eslint autorise "window" comme variable globale, mais je dois faire quelque chose de mal. D'après la documentation, il me semble que je devrais peut-être faire quelque chose comme ça dans un fichier séparé, mais existe-t-il un moyen de définir certaines variables globales autorisées directement dans le fichier package.json?

chevin99
la source
Pour info, si vous utilisez node et que vous souhaitez qu'ESLint le reconnaisse, globalvous devez vous assurer qu'il "node": trueest défini dans votre "env"configuration.
Joshua Pinter

Réponses:

323

Il y a un builtin environment: browserqui inclut window.

Exemple .eslintrc.json:

"env": {
    "browser": true,
    "node": true,
    "jasmine": true
  },

Plus d'informations: http://eslint.org/docs/user-guide/configuring.html#specifying-environments

Voir également la package.jsonréponse de chevin99 ci-dessous.

Laoujin
la source
Absolument la meilleure réponse, merci. Je n'y ai même pas pensé :)
Knight Yoshi
5
Juste au cas où quelqu'un d' autre est pris à moi comme: Cela devrait être .eslintrcnonpackage.json
un pot de Clay
Existe-t-il un moyen de faire en sorte que cela ne s'applique qu'à un fichier?
AnnanFay du
J'ai trouvé ce qui suit dans la réponse de Carles Alcolea ci - dessous : Ajouter en haut de ce fichier:/* eslint-env browser */
Laoujin
103

Je l'ai trouvé sur cette page: http://eslint.org/docs/user-guide/configuring

Dans package.json, cela fonctionne:

"eslintConfig": {
  "globals": {
    "window": true
  }
}
chevin99
la source
63
la bonne façon de le faire est d'utiliser "env": {"browser": true}
Nicolas
@Nicolas, oui, j'aurais probablement utilisé la méthode que vous avez suggérée si c'est ce que j'avais trouvé en premier, mais cette réponse est au moins utile pour montrer que vous pouvez avoir votre configuration eslint dans package.json.
chevin99
4
Il est également possible d'insérer des globals pour eslint comme ceci: / * global angular: true * /
Mirko
la question demande spécifiquement comment utiliser le fichier package.json
virtualLast
59

Ajoutez .eslintrcla racine du projet.

{
  "globals": {
    "document": true,
    "foo": true,
    "window": true
  }
}
Kirk Strobeck
la source
Placer eslingConfig dans package.json n'a pas fonctionné pour moi (en plus d'être faux sur le plan conceptuel). L'ajout dans .eslintrc.json fonctionne cependant.
Petrunov
1
@Petrunov .eslintrc.jsonpeut juste être.eslintrc
Kirk Strobeck
cela ne fonctionne pas dans un cas que je rencontre - j'utilise eslint avec gulp pour un projet d'extension Chrome. dans les globals, je mets "chrome": true et il jette toujours une erreur indiquant qu'il s'agit d'un global non reconnu.
Stephen Tetreault
42

Votre .eslintrc.json doit contenir le texte ci-dessous.
De cette façon, ESLint connaît vos variables globales.

{
  "env": {
    "browser": true,
    "node": true
  }                                                                      
}
Sergey Andreev
la source
15

Je sais qu'il ne demande pas la version en ligne . Mais comme cette question a près de 100000 visites et que je suis tombé ici à la recherche de cela, je la laisserai ici pour le prochain codeur:

Assurez-vous que ESLint n'est pas exécuté avec l' --no-inline-configindicateur (si cela ne vous semble pas familier, vous êtes probablement prêt à partir). Ensuite, écrivez ceci dans votre fichier de code (pour plus de clarté et de convention, il est écrit au-dessus du fichier mais cela fonctionnera n'importe où):

/* eslint-env browser */

Cela indique à ESLint que votre environnement de travail est un navigateur, donc maintenant il sait quels éléments sont disponibles dans un navigateur et s'adapte en conséquence.

Il existe de nombreux environnements et vous pouvez en déclarer plusieurs à la fois, par exemple en ligne:

/* eslint-env browser, node */

Si vous utilisez presque toujours des environnements particuliers, il est préférable de le définir dans le fichier de configuration de votre ESLint et de l'oublier.

D'après leurs documents :

Un environnement définit des variables globales qui sont prédéfinies. Les environnements disponibles sont:

  • browser - variables globales du navigateur.
  • node - Variables globales Node.js et portée de Node.js.
  • commonjs - Variables globales CommonJS et portée CommonJS (utilisez ceci pour le code de navigateur uniquement qui utilise Browserify / WebPack).
  • shared-node-browser - Globals communs à la fois au nœud et au navigateur.

[...]

Outre les environnements, vous pouvez lui faire ignorer tout ce que vous voulez. S'il vous avertit de l'utilisation console.log()mais que vous ne voulez pas en être averti, juste en ligne:

/* eslint-disable no-console */

Vous pouvez voir la liste de toutes les règles , y compris les règles recommandées à avoir pour les meilleures pratiques de codage .

Carles Alcolea
la source
2

Si vous utilisez Angular, vous pouvez le faire avec:

"env": {
    "browser": true,
    "node": true
},
"rules" : {
    "angular/window-service": 0
 }
AndreaM16
la source