web-dev-qa-db-fra.com

EsLint - Supprimer "Ne pas utiliser" nouveau "pour les effets secondaires"

J'ai vu le moyen de supprimer cela avec jsLint, essayé, cela n'a pas fonctionné.

J'ai besoin du mot-clé 'nouveau' ou mon script ne fonctionne pas.

Comment puis-je le supprimer dans .eslintrc?

Merci beaucoup

Mise à jour: À la demande de Jordan. [Veuillez noter que mon application est écrite en ReactJs]

 // 3rd party 
 const AnimateSlideShow = require('../js-animation');

 export default class Animate extends React.Component {

   .......

    fetchJsAnimation() {
      const animation = this.refs.Animation;
      new AnimateSlideShow(animation);
    }
   ......
  }

Erreur: ne pas utiliser «nouveau» pour les effets secondaires non-nouveau

Maintenant, si je satisfait EsLint, mon application craint:

Uncaught (promis) TypeError: impossible de définir la propriété '_handleMouse' de undefined (…)

eslint
24
user1177440

Voici la documentation de la règle ESLint en question: http://eslint.org/docs/rules/no-new.html

Interdit new pour les effets secondaires (no-new)

L’utilisation de new avec un constructeur a généralement pour objectif de créer un objet d’un type particulier et de le stocker dans une variable, par exemple:

var person = new Person();

Il est moins courant d'utiliser new et de ne pas stocker le résultat, tel que:

new Person();

Dans ce cas, l’objet créé est jeté car sa référence n’est stockée nulle part et, dans de nombreux cas, cela signifie que le constructeur doit être remplacé par une fonction ne nécessitant pas l’utilisation de new.

J'ai collé cela ci-dessus parce que je pense qu'il est important de comprendre quelle est l'intention de la règle et pas seulement comment la faire disparaître.

Si vous ne trouvez pas le moyen de vous débarrasser de new, vous pouvez supprimer cette erreur avec la directive eslint-disable:

fetchJsAnimation() {
  /* eslint-disable no-new */
  const animation = this.refs.Animation;
  new AnimateSlideShow(animation);
}

Les directives ESLint ont une portée de bloc, elles ne seront donc supprimées que dans cette fonction. Vous pouvez également supprimer des règles sur une seule ligne avec la directive eslint-disable-line:

new AnimateSlideShow(animation); // eslint-disable-line no-new

Si vous devez réellement désactiver cette règle pour l'ensemble de votre projet, dans la section .eslintrc de "rules", définissez la valeur de cette règle sur 0:

{
  // ...
  "rules": {
    "no-new": 0,
    // ...
  }
}

Vous pouvez également en faire un avertissement au lieu d’une erreur en le définissant sur 1 (2 est une erreur).

56
Jordan Running

Essayez de couvrir votre fonction dans une fonction anonyme

(()=>code)();

dans votre exemple

fetchJsAnimation() {
  const animation = this.refs.Animation;
  (()=>new AnimateSlideShow(animation))();
}

Ou vous pouvez utiliser ce modèle, par exemple, un cadre javascript moderne, par exemple. vuejs vue Voici un exemple

(() => new Vue({ 
    el: '#app', 
    router, 
    store, 
    components: { App }, 
    template: '<App/>' 
}))();
2
sarkiroka

Étendant sur sarkiroka answer, voici une version ES5 (essentiellement un IIFE avec une déclaration return):

(function (Vue) {
  'use strict';

  return new Vue({
    el: '.unity-header-wrapper'
  });
}(Vue));

Nous évitons les erreurs var utilisées ESLint, qui apparaissent si elles sont utilisées de cette façon: 

var myApp = new Vue({
  el: '.unity-header-wrapper'
});

Nous évitons également l'utilisation de l'instanciation autonome 'new Vue ()' (qui évite les erreurs liées aux effets

var myApp = new Vue({
  el: '.unity-header-wrapper'
});

Vous pouvez également ajouter Vue sous forme globale dans ESLint config pour éviter les erreurs de variable globale non définies, comme indiqué ici: Variables globales en Javascript et ESLint

// .eslintrc.json
"globals": {
  "Vue": true
}
0
gedijedi