Redwood ESLint config modifications

Get Help and Help Others
1

Hello all.

We’re trying to clean up the ESLint on our project and ran into a rule we want to change. The rule is being depreciated in the jsx-a11y package according to Is no-onchange still a relevant rule? · Issue #398 · jsx-eslint/eslint-plugin-jsx-a11y · GitHub, but in the meantime, we want to disable it.

My question is: What is the official redwood way of modifying the ESLint config?

What I did was:

Create an .eslintrc.js file with:

module.exports = {
  extends: ['@redwoodjs/eslint-config'],
  rules: {
    'jsx-a11y/no-onchange': 'off',
  },
}

And modified package.json to:

"eslintConfig": {
    "extends": ".eslintrc.js",
    "root": true
  },

Is this the recommended procedure? I didn’t see this in the docs anywhere. Did I miss it or should this be in the docs?

Thanks!

1 Like
2

That’s the recommended procedure. The RedwoodJS linting package follows ESLint’s naming standard (redwood/packages/eslint-config), and they show similar examples for how shared config linting packages should be used.

I don’t think the modified package.json file is necessary, ESLint will automatically load the .eslintrc.js file. For Framework contributions the .eslintrc.js file is specified in the command:

"lint": "cross-env RWJS_CWD=../../packages/create-redwood-app/template eslint --config ../../.eslintrc.js ../../packages",

I just noticed there’s no default linting command in the create-redwood-app template. I’ll open an issue to ask about that.

It needs to be added to the docs.

3

Using the CLI tool (yarn rw lint) will pick up an .eslintrc.js file, so there’s no need to have an eslintConfig block in your package.json:

// redwood/.eslintrc.js
module.exports = {
  extends: ['@redwoodjs/eslint-config'],
  rules: {
    'jsx-a11y/no-onchange': 'off',
  },
'root': true,
}
4

Thanks, Kevin! I appreciate your responses!

5

Happy to help, cjReimer :slightly_smiling_face: I submitted a PR for the docs fix: #3029