crystal-ball
:status
:integrations
:flair
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 -DPrettier 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-importsvalue. 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-pathsvalue. 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/parsereslint-config-prettiereslint-plugin-cypresseslint-plugin-importeslint-plugin-jesteslint-plugin-jest-domeslint-plugin-jest-extendedeslint-plugin-jest-formattingeslint-plugin-jsx-a11yeslint-plugin-prettiereslint-plugin-reacteslint-plugin-react-hookseslint-plugin-testing-libraryeslint-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.