2

I followed the advice on How do I configure ESLint to allow fat arrow class methods which states to set the parser to babel-eslint.

I installed it and updated my config file as follows:

{
  "parserOptions": {
    "parser": "babel-eslint",
    "ecmaVersion": 12,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "semi": "error",
    "indent": ["error", 2],
    "eqeqeq": ["error", "always"],
    "max-depth": ["error", 5],
    "space-before-function-paren": ["error", "never"],
    "template-curly-spacing": ["error", "always"],
    "quotes": ["error", "single", { "allowTemplateLiterals": true }],
    "curly": "error",
    "brace-style": ["error", "1tbs"],
    "space-before-blocks": "error"
  }
}

However it is still breaking eslint, giving a parsing error as follows:

class Person {
  constructor() {
    console.log(this);
    this.hello1();
    this.hello2();
  }

  // breaks eslint, but WHY?

  hello1 = () => {
    console.log(this);
  }
  
  hello2() {
    console.log(this);
  }

}
const P1 = new Person();

It is highlighting the first = and saying:

Parsing Error unexpected token =

How can I troubleshoot this further? ESLint is correctly applying all the rules in this file, but seems to ignore the parser options.

Or something else?

I'm not sure if this is relevant here:

https://github.com/babel/babel-eslint#note-babel-eslint-is-now-babeleslint-parser-and-has-moved-into-the-babel-monorepo

but I don't really know what that means.

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
user17791008
  • 247
  • 2
  • 12
  • What is the specific eslint error? – evolutionxbox Jan 02 '22 at 22:42
  • Is the variable actually defined? What's your Babel setup? Give a [mre]. – jonrsharpe Jan 02 '22 at 22:42
  • Please only post a [mcve]. We only need to see related code. (Edit: thanks) – evolutionxbox Jan 02 '22 at 22:44
  • entire class has been posted ... I'm pretty sure eslint is configured correctly but I'm not sure the parser was installed correctly as I do not understand how it changed recently per the github. – user17791008 Jan 02 '22 at 22:45
  • Is there a way to verify the parser was installed correctly? – user17791008 Jan 02 '22 at 22:47
  • 1
    I can replicate the issue (bit.ly/3JAh3nl) - It's definitely a config issue, and has been around [since at least 2015](https://github.com/eslint/eslint/issues/4683) – evolutionxbox Jan 02 '22 at 22:50
  • You can check the node_modules folder in your project to verify that the babel-eslint is installed. Also check your package.json file. – Poku Jan 02 '22 at 22:51
  • 3
    You still haven't shown your Babel config, does it include class properties? Per https://babeljs.io/docs/en/babel-plugin-proposal-class-properties they're in the preset for ES2022, which is not ecmaVersion: 12. – jonrsharpe Jan 02 '22 at 22:51
  • My entire config file is now posted. I installed eslint as follows `npm i -D babel-eslint`. However when I run `which eslint` nothing comes up. – user17791008 Jan 02 '22 at 22:57
  • Sublime is doing my linting, so it needs access to know where eslint is and eslint babel parser. I also run it from the command line. – user17791008 Jan 02 '22 at 22:59
  • Your _ESLint_ configuration is posted, your _Babel_ configuration is not. Give a [mre] so that other people can recreate the issue locally and thereby maybe help you solve it. – jonrsharpe Jan 02 '22 at 23:07
  • @evolutionxbox the replicated issue (bit.ly/3JAh3nl) can become lint-free if you use ECMA version 2022 (or latest) – kimbaudi Jan 02 '22 at 23:58

2 Answers2

2

I think you are getting that linting error because you are not using ECMA version 2022 (aka ECMA latest). Please check this link at shorturl.at/nsAS5 that shows no lint errors on the fat arrow class method because ECMA version is at latest 2022. When you change ECMA version to 2021 or lower, you get the Parsing Error unexpected token = error.

Also, I notice some things about your eslintrc.json:

  1. I think it might be because babel-eslint is deprecated? https://www.npmjs.com/package/babel-eslint. Maybe you should try @babel/eslint-parser? https://www.npmjs.com/package/@babel/eslint-parser

  2. your config looks a bit off. you should place parser key outside of parserOptions key like so:

  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },

see https://eslint.org/docs/user-guide/configuring/language-options

also, I just want to point out that eslint by default uses espree as its parser, but you can use esprima or @babel/eslint-parser (or @typescript-eslint/parser if you're using typescript) see https://eslint.org/docs/user-guide/configuring/plugins

kimbaudi
  • 13,655
  • 9
  • 62
  • 74
  • 1
    Thanks, my config file was incorrect as you mentioned. Thanks! ... sadly I have a new error that I will comment here in a sec. – user17791008 Jan 05 '22 at 02:19
1

Your configuration file is not correct:

This line here:

"parser": "babel-eslint",

is doing nothing. Unfortunately it will not throw an error and continue to use the default parser.

Once you do this you can begin to use the babel parser if the rest of the dependencies are correctly installed.

favor
  • 355
  • 2
  • 13