Eloquence is a robust and adaptive ESLint configuration set for code linting code quality, style and formatting.

• 🔋 Manages all ESLint dependencies for simple setup and version maintenance
• 🧐 Intelligently adjusts error severity for style and formatting rules for development workflows
• 😲 Smartly overrides configurations for Storybook, Cypress, webpack, MDX and Jest files.
• ✅ React Testing Library and Jest DOM rules
• 😍 Fully integrated with linting for Prettier formatting
• 🌲 Includes Cypress tests specific ruleset
• 👮‍♀️ Supports linting TypeScript projects
• 📝 Supports linting MDX files

The most important opinion of Eloquence is that linters shouldn't get in your way while developing, so outside test environments all rules related to styling are downgraded to warnings and all formatting rules are silenced. See Rules for details.

⚙️ Setup

Install Dependencies

npm i eslint-config-eloquence prettier typescript -D

Prettier and [TypeScript][] are peer dependencies of Eloquence, they are not installed as dependencies to encourage each project installs them as an exact version project dependency to ensure all contributors are using the same version, and still allowing projects to update Prettier versions on their own schedule.

Configure ESLint

The minimum configuration is the target option:

// .eslintrc.js
'use strict'

module.exports = {
  // Extend either the React or Node base configs
  extends: ['eloquence/{react,node}'],
}

• Extend 'eloquence/node' - for Node services and NPM packages
• Extend 'eloquence/react' - for React applications bundled with webpack

ESM configs

Note all projects are configured for ESM. Node.js projects using CommonJS will need to override these rules:

// .eslintrc.js
'use strict'

module.exports = {
  extends: ['eloquence/node'],
  rules: {
    // CommonJS rule overrides
    'import/extensions': 'off',
    'import/no-useless-path-segments': 'off',
    '@typescript-eslint/no-var-requires': 'off',
  },
}

Ignore patterns config ignorePatterns

By default ignorePatterns is configured to ['!.*', 'public/*', 'dist/*'] which will ignore two common build output directories, and will force linting in dotfiles and directories beginning with dots (which are ignored by default by ESLint).

Note that code coverage output already has ignore configurations and shouldn't need addtiional configs.

Report unused disable directives

Any unnecessary eslint-disable directive will cause a warning (This helps with maintenance of linting overrides). This can be overridden by changing the reportUnusedDisableDirectives value:

'use strict'

module.exports = {
  extends: ['eloquence/node'],
  reportUnusedDisableDirectives: false,
}

Pretty print output

The eslint-formatter-pretty package is included in the dependencies and can be used to output pretty formatted results. The pretty printed results include hyperlinks to the rule docs and the files.

NODE_ENV=test npx eslint --format=pretty .

Recommended linting command

The recommended package.json command for linting runs on the entire directory, and uses the configuration ignorePatterns to ignore files or directories. By default node_modules and all dotfiles other than .eslintrc.js are ignored. The below config and command will lint all .js, .ts, and .tsx files in the repo, including dotfiles and directories starting with a dot, except for the public directory.

{
  "test:lint": "NODE_ENV=test eslint --format=pretty ."
}

'use strict'

const eloquence = require('eslint-config-eloquence')

module.exports = eloquence({
  target: 'react',
})

⚙️ Imports customizations

Repositories can configure custom rules to enforce some common requirements:

• Restrict importing a specific module by setting a no-restricted-imports value. This can be useful for things like preventing React Router's Link component from being used instead of an application Link component.
• Restrict where certain modules can be imported by setting an import/no-restricted-paths value. This can be useful for enforcing boundaries between modules, like separating Electron client code from main code, or for enforcing that an index file is used for a component library directory

👩‍🏫 Rules

The Eloquence ruleset balances providing a rigorous, comprehensive ruleset with providing only valuable linting messaging during non-test workflows. A comprehensive ruleset helps people contribute to projects by programatically answering questions about the code conventions expected by a project. However a comprehensive ruleset can also be really noisy and problematically irritating. To solve this issue Eloquence intelligently adjusts the linter error level for rule types by environment:

Error levels

| Env | Quality rules | Style rules | Formatting rules | | ---- | ------------- | ----------- | ---------------- | | Test | error | error | error | | Dev | error | warn | off |

This means linting related to code quality is always surfaced as a priority, but during development non critical feedback related to code style and formatting is moderated.

Linting philosophy

In general, the Eloquence ruleset tries to encourage these coding practices:

• Readable, explicit code is always preferred over clever code.
• Premature abstraction leads to more issues than duplicated code.
• Whenever possible try to write simple code that can be read through without puzzle solving.

👮‍♀️ TypeScript

TypeScript rules are supported out of the box for React and Node configurations using an override. Projects using TS must provide a tsconfig in the project root.

Eloquence supports TS as a supertype for adding types only and forbids using TS enums.

VSCode

By default the ESLint extension for VSCode is only configured to lint JS language files and you need to add the TypeScript and TypeScript+React languages if you haven't.

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}

📝 MDX

You can opt in to linting MDX files with the eslint-plugin-mdx package:

npm i eslint-plugin-mdx -DE

'use strict'

const eloquence = require('eslint-config-eloquence')

module.exports = eloquence({
  target: 'react',
  enableMDX: true,
})

File overrides

Eloquence overrides the base project rules and settings for specific file patterns to eliminate the need for ESLint configuration comments:

| Files | Updates | | --------------------- | ------------------------------ | | [src/**/*] | Rules specific to source code | | ['*.ts', '*.tsx'] | TypeScript rules enabled | | ['*.mdx'] | MDX linting | | ['*.spec.js'] | Adds Jest globals | | ['cypress/**/*'] | Adds Cypress globals and rules | | ['.storybook/**/*'] | Support ESmodules |

Finally, configuration files for Storybook, Cypress, Babel, Jest, and webpack are all set to CommonJS modules with Node globals for configuring tooling executed by Node.js.

🔋 Batteries included

This package will automatically include all of the packages needed to run ESLint. Projects should allow this package to "own" the dependency management for packages related to ESLint. (When possible ensure that the only version of eslint included in a project is the versions specified by this package.)

Included dependencies:

• eslint
• @typescript-eslint/eslint-plugin
• @typescript-eslint/parser
• eslint-config-prettier
• eslint-plugin-cypress
• eslint-plugin-import
• eslint-plugin-jest
• eslint-plugin-jest-dom
• eslint-plugin-jest-extended
• eslint-plugin-jest-formatting
• eslint-plugin-jsx-a11y
• eslint-plugin-prettier
• eslint-plugin-react
• eslint-plugin-react-hooks
• eslint-plugin-testing-library
• eslint-formatter-pretty

😍 Contributing

This is an open source project that welcomes and appreciates contributions from everyone 🎉. Please read the Code of Conduct and Contributing guides to get started.

Thank You!

• The base ESLint rules for this project began with the Airbnb ESLint configuration and have evolved to the current rule definitions.