41

I saw the way to suppress this with jsLint, tried it, it did not work.

I need the 'new' keyword or my script does notwork.

How can I suppress it in .eslintrc?

Many Thanks

Update: Per Jordan's request. [Please note my app is written in 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

Now, if I satisfy EsLint, my app craps out:

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

  • Please edit the question to include the actual code that's causing this error/warning and a detailed description of how you tried to remedy it. – Jordan Running Oct 22 '15 at 17:33
  • Updated question as requested. –  Oct 22 '15 at 17:41
  • Please see my answer below. As for your "Uncaught (in promise) TypeError," that's unrelated to ESLint and you should post a new question if you need help with it. – Jordan Running Oct 22 '15 at 17:51
  • you could just create some sort of arrow function `const slideShow = animation => new AnimateSlideShow(animation)`, and then instead of creating new object directly, you could use the wrapper, so the error doesn't appear. Other question is this really good to actually use new for side effects? – sudo97 Jan 20 '20 at 18:22

4 Answers4

76

Here's the documentation for the ESLint rule in question: 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.

I pasted that above because I think it's important to understand what the intent of the rule is, and not just how to make it go away.

If you can't find a way to get rid of new, you can suppress this error with the eslint-disable directive:

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

ESLint directives are block-scoped, so it will be suppressed inside this function only. You can also suppress rules on a single line with the eslint-disable-line directive:

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

If you really need to disable this rule for your entire project, then in your .eslintrc's "rules" section set the value for this rule to 0:

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

You can also make it a warning instead of an error by setting it to 1 (2 is error).

Victor Smirnov
  • 3,450
  • 4
  • 30
  • 49
Jordan Running
  • 102,619
  • 17
  • 182
  • 182
  • The linter override doesn't resolve the original problem: you use the `new` operator for side effects :( This is a bad habit – sarkiroka Oct 16 '19 at 12:31
13

Try to cover your function into an anonim function

(()=>code)();

in your example

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

Or you can use this pattern for example modern javascript framework eg. vuejs vue Here is an example

(() => new Vue({ 
    el: '#app', 
    router, 
    store, 
    components: { App }, 
    template: '<App/>' 
}))();
sarkiroka
  • 1,485
  • 20
  • 28
  • 1
    This helped me, for initializing Vue (() => new Vue({ el: '#app', router, store, components: { App }, template: '' }))(); – jofftiquez Jul 13 '18 at 07:31
  • What is the difference with this style? I get that it creates a new scope, but for what purpose? – elliottregan Aug 07 '19 at 22:02
  • 1
    Don't do that. This effectively just suppresses the warning. Just use `eslint-disable` comments instead. – Parzh from Ukraine Sep 04 '20 at 15:53
  • Eslint disable is a wrong way. This is a way to hide somesthing too complex to resolve it. I don't believe it. In our code base we have a check to contains eslint-disable parts, and the build process is break when found. This is the rigjt way – sarkiroka Sep 05 '20 at 14:31
2

Extending on sarkiroka answer, here's an ES5 version (essentially an IIFE with a return statement):

(function (Vue) {
  'use strict';

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

We're avoiding ESLint unused var error, which appears if used this way: 

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

We're also avoiding using standalone 'new Vue()' instantiation (which prevents side effects error on ESLint)

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

You can also add Vue as a global in ESLint config, to avoid undefined global var error, as seen here: Global variables in Javascript and ESLint

// .eslintrc.json
"globals": {
  "Vue": true
}
gedijedi
  • 596
  • 1
  • 6
  • 7
0

I use a more declarative form using an init() method inside my class. For example:

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

So, when you initialize that instance:

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

And with this you can avoid the "no new" linter and avoid undefined global without linter comments.

TheFrost
  • 1