Preferred ESLint config for Stimulus?

1

Hey folks, Stimulus first-timer here coming from the land of React and such.

I’m used to using an .eslintrc that lightly extends the Airbnb config. However, a very skeletal Stimulus controller seems to trigger parse errors. I’m not precious about my config, and prefer to use community best practices where they exist. So:

Is there an ESLint config that’s known to work well with the straightforward default composition of Stimulus classes and syntax?

(If anyone is curious what problems I’m having, it’s documented in this GitHub issue on our project.)

1 Like
2

Eslint didn’t use to support the static class property syntax until recently since it’s still pretty new. I solved this on my project by installing @babel/eslint-parser and adding it to the eslint config, like so (I’m using eslintrc.yml since I like yml):

---
extends:
  - eslint-config-airbnb-base
  - plugin:prettier/recommended

env:
  browser: true

parser: "@babel/eslint-parser"

parserOptions:
  requireConfigFile: false

If it’s important to you to skip Babel, according to this SO answer you can set parserOptions to ecmaVersion: latest in your eslintrc without using another package (if on a recent eslint version). I haven’t tried it myself since I have Babel installed, but might try in the future.

3

@evenreven Oh fantastic, thank you! We aren’t using Babel, and you’re right, ecmaVersion: latest did the trick. Thanks!

4

:+1: I’ve found that with this, I have no issues with eslint apart from the slightly strict class methods use this enforcement, but I disable that on a per method basis when needed.

1 Like