@redwoodjs/eslint-config

ESLint Config

• ESLint Config
  • Purpose and Vision
  • Package Leads
  • Roadmap
  • Contributing
  • Overriding Default Configuration

Purpose and Vision

This package contains a shareable set of ESLint rules and configuration that can be re-used on all RedwoodJS projects. The framework eslint-config package is used both for framework configuration and RedwoodJS app (created with the CRWA package) configuration.

Our configuration uses recommended rule presets, including those from ESLint, React, the Rules of Hooks, and Jest. We also override the presets with some stylistic preferences. Some of them are:

• No semicolons at the end of statements
• Trailing commas in object and array literals
• Use single quotes on strings wherever possible
• Use parentheses around arrow function parameters
• Sort import declarations by name
• Wrap block statements in curly braces

Package Leads

Peter Pistorius (@peterp), David Price (@thedavidprice), Dominic Saadi (@jtoar), Daniel Choudhury (@dac09)

Roadmap

• Lint for case-sensitive imports (issue #2806)

Contributing

This package doesn't depend on other Redwood Framework packages. To contribute, you should be familiar with the ESLint package. Keep in mind that any rules added should not conflict with code formatting tools (e.g. Prettier).

Overriding Default Configuration

In a Redwood App, you can override default config in your root package.json file by adding the rules after the include for this package:

// redwood-app/package.json
"eslintConfig": {
  "extends": "@redwoodjs/eslint-config",
  "root": true,
  "jsx-a11y/no-onchange": "off",
},

If you need script in your configuration, you can remove the eslintConfig block from your root package.json file and add an .eslintrc.js file:

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

By default, ESLint will recurse through all project directories looking for configuration files and directives, and override those specified in multiple places according to a prioritization formula. The root directive tells ESLint to stop searching for configuration lower in the tree at the file this directive is encountered.

In a different Redwood Framework package or in a Redwood App, you can provide configuration that applies only to that package or side by omitting the root directive. For example, to apply a directive only to the client code of an app:

// e.g. redwood/packages/auth or redwood-app/web/package.json
"eslintConfig": {
  "jsx-a11y/no-onchange": "off",
},

In this case, ESLint will still load the configuration from the @redwoodjs/eslint-config package as the default value of root is false.