Skip to content
Extendable ESLint config with plugins and settings I commonly use
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
test
.eslintrc.js
.gitignore
.huskyrc.js
.prettierrc.js
CODE_OF_CONDUCT.md
LICENSE
README.md
best-practices.js
commitlint.config.js
es6.js
import.js
index.js
jest.js
jsx-a11y.js
lint-staged.config.js
package.json
possible-errors.js
react.js
renovate.json
stylistic.js
yarn.lock

README.md

ESLint Config Dslemay

CircleCI semantic-release

I rely on ESLint heavily for my projects, but was annoyed with managing the config and dependencies across many different repositories. This project contains an extendable ESLint configuration and is the base for my projects. It manages the dependencies and configuration of various plugins which can then be extended into the source project. This reduces the overhead and duplication of managing configuration across many projects. It also reduces the number of dependencies each project must directly install and manage.

Requirements and Installation

This configuration requires ESLint >= 5.0.0. To install and use the configuration follow the steps below.

Install

yarn add --dev eslint eslint-config-dslemay
npm install -D eslint eslint-config-dslemay

Configure

// .eslintrc.js
module.exports = {
  extends: ['dslemay'],
  rules: {
    // Override any rules
  },
};

This root extension contains base configuration used for all projects. Parts of the base configuration can be extended individually, if you only want to use some of the rules. This is an edge case and should be approached with caution to avoid gaps in rule coverage. The rules object in your local ESLint config can be used to override any rule definitions which do not work for your project.

  • Possible Errors: Sets ESLint core possible errors rules. These rule definitions can be extended as dslemay/possible-errors.
  • Best Practices: Sets ESLint core best practices rules. These rule definitions can be extended as dslemay/best-practices
  • Stylistic: Extends Prettier plugin for code formatting and sets other ESLint core stylistic rules. These rule definitions can be extended as dslemay/stylistic. For more information about using Prettier with this config read Integration with Prettier
  • ES6: Adds rules related to ES6 and beyond development including setting configuration options and using babel-eslint as the parser. These rule definitions and config can be extended as dslemay/es6
  • Import: Adds the ESLint import plugin and sets the assocated rules. This helps to catch poor import paths, grouping of imports, and more. These rule definitions can be extended as dslemay/import

All of the related plugins are installed as dependencies of this package and should not require any additional installation or management in your package.

Additional Plugins/rules available

This package also provides configuration for other commonly used plugins and their associate rules. These are not included in the base configuration by default and can be added to the extends array on an as needed basis.

Note: Occasionally, the corresponding ESLint plugin must be installed as a dependency in your project. I'm uncertain why this arises in certain cases and may be a result of multiple project dependencies exposing variosu versions of the plugin. If you encounter errors about rules not being found, try installing the corresponding plugin explicitly.

  • Jest: Configures ESLint to recognize Jest globals and use the eslint-plugin-jest with accompanying rules. To use this ruleset, add 'dslemay/jest' to the extends array in your ESLint config.
  • React: Configures ESLint for React. Includes rules from eslint-plugin-react and eslint-plugin-react-hooks. To use this ruleset, add dslemay/react to the extends array in your ESLint config.
  • JSX-A11y: Configures ESLint to check JSX for accessibility issues. Includes the rules from eslint-plugin-jsx-a11y. To use this ruleset, add dslemay/jsx-a11y to the extends array in your ESLint config.

Integration with Prettier

Prettier provides consistent code format and can reduce common stylistic bike-shedding. This configuration does not install Prettier or provide a Prettier configuration file. Some additional configuration is required in your project to use Prettier.

Install Prettier:

yarn add --dev prettier
npm install -D prettier

If you would like to have Prettier errors show up as ESLint errors and be resolved with eslint --fix, install and use the eslint-plugin-prettier. Otherwise, files can be formatted on save in most editors or through a separate Prettier script.

If you would like to override any of the Prettier options create a .prettierrc file with the available configuration options.

You can’t perform that action at this time.