Neologistic Paraphasic Mumbling
Miss any of our Open RFC calls?Watch the recordings here! »

eslint-config-eloquence

17.0.0 • Public • Published

Eloquence


Package version NPM downloads Build status Known vulnerabilities :status      
Renovate Commitizen friendly ZenHub Semantic Release Contributor Covenant :integrations
Contains magic Full of love :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 -D

Eloquence recommends adding Prettier as an exact version project dependency to ensure all contributors are using the same version of Prettier, while still allowing projects to update Prettier versions on their own schedule.

Configure ESLint

The minimum configuration is the target option:

// .eslintrc.js
'use strict'
 
const eloquence = require('eslint-config-eloquence')
 
module.exports = eloquence({ target: 'react|node' })
  • Pass 'node' - for Node services and NPM packages
  • Pass 'react' - for React applications bundled with webpack

Option enableESM

The enableESM option can be used to explicitly declare whether a project is using ESModules or CommonJS. The default value is true.

Option ignorePatterns

Files and directories can be ignored by passing an array of string patterns. The default value of ['!.*', 'public/*', 'dist/*'] will ignore two common build output directories (public and dist), 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.

Option rules

Final rule values can be overridden in a project by passing a rules option with the override values. (Values are used as is, it isn't possible to pass only a severity override at this time.)

Option reportUnusedDisableDirectives

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

'use strict'
 
const eloquence = require('eslint-config-eloquence')
 
module.exports = eloquence({
  target: 'react',
  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 .

Pretty prints links

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 philosphy

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 and babel-eslint included in a project are the versions specified by this package.)

Included dependencies:

😍 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.

Install

npm i eslint-config-eloquence

DownloadsWeekly Downloads

589

Version

17.0.0

License

ISC

Unpacked Size

238 kB

Total Files

32

Last publish

Collaborators

  • avatar
  • avatar