javascript - ESLint shows error on class instance property initialized to arrow function - Stack Overflow

maybe similar to How do I configure ESLint to allow fat arrow class methods

When class method defined as arrow function Eslint highlight error 'method' is not defined. (no-undef). simple example

class abc {
  d = () => {
    // method body
  }
}

here is not difined 'd'

my .eslintrc config

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
      "eslint:remended",
      "plugin:flowtype/remended"
    ],
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "flowtype"
    ],
    "rules": {
        "indent": [
            "error",
            2
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}

.babelrc

{
  "presets": ["react", "es2015", "stage-1", "flow"]
}

Maybe I need to declare some rules?

maybe similar to How do I configure ESLint to allow fat arrow class methods

When class method defined as arrow function Eslint highlight error 'method' is not defined. (no-undef). simple example

class abc {
  d = () => {
    // method body
  }
}

here is not difined 'd'

my .eslintrc config

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
      "eslint:remended",
      "plugin:flowtype/remended"
    ],
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "flowtype"
    ],
    "rules": {
        "indent": [
            "error",
            2
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}

.babelrc

{
  "presets": ["react", "es2015", "stage-1", "flow"]
}

Maybe I need to declare some rules?

• javascript
• ecmascript-6
• babeljs
• eslint
• class-fields

Share Improve this question Follow edited Jan 16, 2022 at 18:40 Bergi 667k161161 gold badges1k1k silver badges1.5k1.5k bronze badges asked Aug 17, 2017 at 3:42 n06rinn06rin 17322 silver badges99 bronze badges 5

• 1 ES6 classes do not have instance variables, which is what d is here. – user663031 Commented Aug 17, 2017 at 3:47
• arrow functions don't make sense in a class - just like setting Something.prototype.somefunction = () => {} makes no sense – Jaromanda X Commented Aug 17, 2017 at 3:48
• @torazaburo - the class syntax doesn't provide for instance variables, but the resulting classes can have them if created in methods. (Just being picking about wording.) (So my wording is probably wrong too.) – nnnnnn Commented Aug 17, 2017 at 3:50
• Do you get the error if you run ESLint in the CLI? Sounds more like your editor just doesn't pick up the .eslintrc. – loganfsmyth Commented Aug 17, 2017 at 16:00
• In .eslintrc add "ecmaVersion": 7, under parserOptions. – Greg K Commented Mar 22, 2018 at 12:15

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

as mentioned by MinusFour answer, I'm try to run eslint by mand line, and I don't see that error.

My editor was configured wrong. (path to node_modules folder in linter-eslint package for atom was wrong). After I delete this path and restart editor everything is ok.

This is something that hasn't made its way into Javascript yet. It's available as an experimental plugin with babel, so you'll need to change the default parser for eslint with babel-eslint.