36

Eslint will not recognize private fields marked with # in class declarations, even though I'm using NodeJS version 12 (which supports them).

I am running NodeJS v12.7.0. I have searched all DuckDuckGo and Google and I cannot find a plugin or option in eslint which will tell it to accept the private field notation (#). I have emca set to version 10.

class MyClass {
   #foo = 'bar';
   #bar = 'foo';

   constructor(foo, bar) {
      this.#foo = foo;
      this.#bar = bar;
   }
   ...
};

When I run eslint on the above code, I get:

2:3 error Parsing error: Unexpected character '#'

The project I'm working on does not use Babel, and I don't want to have to include it just to make private fields work. Any ideas how to make this work without having to resort to using Babel?

(Nothing against Babel of course, it's just on this particular project I don't want it).

5 Answers 5

32

2021 Update: You do not need babel for this anymore!

You can simply update eslint to v8.0.0 and above.

See eslint release notes: https://eslint.org/blog/2021/10/eslint-v8.0.0-released#highlights

Make sure this is in your .eslintrc file or similar:

{
    "parserOptions": {
        "ecmaVersion": 13
    }
}

You can also just use latest instead of specifically version 13.

1
  • Thanks! I'll try this out and let you know. Jan 7, 2022 at 16:39
21

The upvoted answer is a little out of date, the babel-eslint package has changed, also, you need to make sure you have Babel configured too, in my case I was on a server, so it wasn't.

I blogged about the solution here: https://dev.to/griffadev/setting-up-eslint-to-work-with-new-or-proposed-javascript-features-such-as-private-class-fields-5fm7

TL;DR:

npm i eslint @babel/core @babel/eslint-parser @babel/preset-env -D

Example .eslintrc

{
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": "eslint:recommended",
    "parser": "@babel/eslint-parser",
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "rules": {
    }
}

Configure .babelrc

{
    "presets": [
      ["@babel/preset-env",
      {
        "shippedProposals": true
      }]
    ]
}

If you are using Jest and you don't have a .babelrc configured already, it will start picking up this new file, this may be a problem. You can workaround this by renaming the .babelrc file to something else, and updating eslint config file:

"babelOptions": {
    "configFile": "./.babel-eslintrc"
 }

1
  • I followed the method on your blog. Ran into and solved a problem. At the part where you add "shippedProposals": true to .babelrc I copy and pasted the object and got the error: ``` 0:0 error Parsing error: .presets[0][2] must be a string, or undefined``` The reason I got that is because I already had an object in the array and I copied the new one as a third element to the array. The correct thing to do in that situation is to add "shippedProposals": true as key:value on the pre-existing object.
    – Russ Bain
    Sep 14, 2021 at 0:11
15

I think that you might have to bite the bullet and use babel-eslint: https://github.com/babel/babel-eslint, which requires that you install babel/core@>=7.2.0

Even though the private class fields are included in node 12, it's still a Stage 3 experimental feature according to the spec (as of August 2019)

npm install eslint babel-eslint --save-dev
# or
yarn add eslint babel-eslint -D

and add

  "parser": "babel-eslint",

to your .eslintrc.js file

2
  • Thank you for your response, Michal. I will try this today. Aug 7, 2019 at 14:32
  • 3
    That worked, by the way! A seamless drop in. Thanks so much! Aug 7, 2019 at 17:53
1

In regards to Visual Studio 2019, I found that the @babel/eslint-parser doesn't work with it but the older babel-eslint does. Other set up per @George's answer.

Visual Studio 2019 version as at time of answer: 16.9.5

1

Unless you really, really want that specific file linted I would avoid adding new dependencies just to make tests pass. My advice in this case would be to add

ignorePatterns: ["path/to/file(s).js"],

in your .eslintrc.js file. That will avoid linting that specific file. If you really want to lint it, do a substitution of # by __, lint, and change it back. I know, it's a hack, but it does not introduce any kind of dependency and it works.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.