EsLint

Question

我看到用jsLint抑制这个的方法，试过了，没用。

我需要 'new' 关键字，否则我的脚本不起作用。

如何在 .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);
    }
   ......
  }

Error: Do not use 'new' for side effects no-new

现在，如果我满足 EsLint，我的应用就会崩溃：

Uncaught (in promise) TypeError: Cannot set property '_handleMouse' of undefined(…)

Answer 1

这是相关 ESLint 规则的文档：http://eslint.org/docs/rules/no-new.html

Disallow new For Side Effects (no-new)

The goal of using new with a constructor is typically to create an object of a particular type and store that object in a variable, such as:
var person = new Person();
It's less common to use new and not store the result, such as:
new Person();
In this case, the created object is thrown away because its reference isn't stored anywhere, and in many cases, this means that the constructor should be replaced with a function that doesn't require new to be used.

我把它贴在上面是因为我认为了解规则的意图很重要，而不仅仅是如何让它消失。

如果找不到摆脱 new 的方法，可以使用 eslint-disable 指令抑制此错误：

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

ESLint 指令是块作用域的，所以它只会在这个函数内被抑制。您还可以使用 eslint-disable-line 指令在单行上抑制规则：

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

// You can disable the check on the next line as well.
// eslint-disable-next-line no-new
new AnimateSlideShow(animation);

如果您确实需要为整个项目禁用此规则，请在 .eslintrc 的 "rules" 部分将此规则的值设置为 0:

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

您也可以通过将其设置为 1（2 是错误）使其成为警告而不是错误。

Answer 2

尝试将您的函数覆盖到匿名函数中

(()=>code)();

在你的例子中

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

或者您可以使用此模式，例如现代 javascript 框架，例如。 vue.js vue 这是一个例子

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

Answer 3

扩展 sarkiroka 答案，这是一个 ES5 版本（本质上是一个带有 return 语句的 IIFE）：

(function (Vue) {
  'use strict';

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

我们正在避免 ESLint unused var 错误，如果以这种方式使用会出现该错误：

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

我们也避免使用独立的 'new Vue()' 实例化（这可以防止 ESLint 上的副作用错误）

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

您还可以在 ESLint 配置中将 Vue 添加为全局变量，以避免出现未定义的全局变量错误，如下所示：Global variables in Javascript and ESLint

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

Answer 4

我在 class 中使用一个 init() 方法来使用更具声明性的形式。例如：

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

因此，当您初始化该实例时：

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

有了这个，你可以避免 "no new" linter 并避免没有 linter 注释的未定义全局。

EsLint - 抑制 "Do not use 'new' for side effects"

EsLint - Suppress "Do not use 'new' for side effects"

Disallow `new` For Side Effects (`no-new`)

EsLint - 抑制 "Do not use 'new' for side effects"

EsLint - Suppress "Do not use 'new' for side effects"

eslint

Disallow new For Side Effects (no-new)

Disallow `new` For Side Effects (`no-new`)