Redwood ESLint config modifications

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!

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.

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,
}

Thanks, Kevin! I appreciate your responses!

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