web-dev-qa-db-ja.com

EsLint-「副作用に「新しい」を使用しないでください」を抑制

私はjsLintでこれを抑制する方法を見ました、それを試してみましたが、うまくいきませんでした。

「新しい」キーワードが必要です。または、スクリプトが機能しません。

.eslintrcでそれを抑制するにはどうすればよいですか？

多くの感謝

更新：ヨルダンのリクエストごと [私のアプリはReactJsで書かれていることに注意してください]

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

 export default class Animate extends React.Component {

   .......

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

エラー：副作用no-newに「new」を使用しないでください

さて、私がEsLintを満足させると、私のアプリはがらくたになります：

不明（約束）TypeError：undefined（…）のプロパティ '_handleMouse'を設定できません

eslint
26
user1177440

問題のESLintルールのドキュメントは次のとおりです。 http://eslint.org/docs/rules/no-new.html

副作用のnewを許可しない（no-new）

コンストラクタでnewを使用する目的は、通常、特定のタイプのオブジェクトを作成し、そのオブジェクトを次のような変数に格納することです。

var person = new Person();

次のようなnewを使用して結果を保存することはあまり一般的ではありません。

new Person();

この場合、作成されたオブジェクトはその参照がどこにも保存されないため捨てられます。多くの場合、これはコンストラクタをnewを使用する必要のない関数に置き換える必要があることを意味します。

ルールを廃止する方法だけでなく、ルールの意図が何であるかを理解することが重要だと思うので、上記を貼り付けました。

newを取り除く方法が見つからない場合は、eslint-disableディレクティブでこのエラーを抑制できます。

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

ESLintディレクティブはブロックスコープであるため、この関数内でのみ抑制されます。 eslint-disable-lineディレクティブを使用して、1行のルールを抑制することもできます。

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

プロジェクト全体でこのルールを無効にする必要がある場合は、.eslintrcの"rules"セクションでこのルールの値を0に設定します。

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

1に設定することで、エラーではなく警告にすることもできます（2はエラーです）。

61
Jordan Running

関数を匿名関数にカバーしてみてください

(()=>code)();

あなたの例では

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

または、このパターンを、たとえば最新のjavascriptフレームワークなどに使用できます。 vuejs vue 以下に例を示します

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

クラス内でinit（）メソッドを使用して、より宣言的なフォームを使用します。例えば：

class Example {
  constructor () { ... }
  init () { //this method is using for initialize the instance }
}

したがって、そのインスタンスを初期化するとき：

const example = new Example()
example.init()

そしてこれにより、「新しい」リンターを避け、リンターコメントなしで未定義のグローバルを避けることができます。

0
TheFrost

sarkiroka answerで拡張すると、ここにES5バージョンがあります（基本的にreturnステートメントのあるIIFE）：

(function (Vue) {
  'use strict';

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

この方法で使用すると表示されるESLintの未使用のvarエラーを回避しています。

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

また、スタンドアロンの「新しいVue（）」インスタンス化の使用を回避しています（ESLintでの副作用エラーを防止します）

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

また、VueをESLint構成のグローバルとして追加して、未定義のグローバル変数エラーを回避することができます。以下に示します。 JavascriptおよびESLintのグローバル変数

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