Automatically configure ESLint based on project dependencies
This project got created because I got tired of managing eslint in multiple different projects and trying to keep them all vaguely in sync. It will automatically configure the airbnb eslint rules and a curated selection of plugins based on the contents of your project's package.json
file each time you run eslint. When you add a new library to your project, the associated plugin will get automatically included.
The aim here is to include a range of mostly reasonable plugins, whilst not being overly restrictive. The recommended configs for each plugin are used with a few exceptions for rules that have been disabled for appearing unduely restrictive or conflicting with other plugins. If you use Prettier then all the formating rules are also omitted by including eslint-config-prettier.
In addition to JavaScript, suport is included for linting TypeScript, HTML, Json, and MarkDown files.
Suggestions for adding new plugings will be carefully considered against the mostly reasonable standard and usefulness. If you would like to help out, then I would like to add support for Vue and other popular frameworks. Thanks goes to awesome-eslint for having collated the packages this project utalises.
To install this config, run the following command.
npm install eslint-config-auto --save-dev
Create an .eslintrc
file with the following contents.
{
"extends": ["auto"]
}
You can now include html
, json
and markdown
in the list of files passed to eslint
to lint any JavaScript contained.
{
"scripts": {
"eslint": "eslint --color --ext .html,.js,.json,.jsx,.md,.ts,.tsx *.* src",
"eslint:fix": "npm run eslint -- --fix"
}
}
After you have configured eslint
to include this package, the first time you run eslint
it will output the npm
command to install the dependencies required for your project. Copy and paste this command into the console, and you are then ready to start linting.
The most appropreate version of the AirBNB eslint config will be automatically selected.
If the project includes Babel in it's devDependencies
, then eslint-plugin-babel and eslint-config-airbnb-babel will be loaded and the parser will be set to babel-eslint
.
Some project setup utils, such as Create React App, use Babel without including it as a project dependancies. In such cases you can turn Babel support on by adding settings: { babel: true }
to your .eslintrc
config file.
These two plugins provide a range of code quality rules:
If settings.compat = true
in your .eslintrc
, then eslint-plugin-compat is loaded.
The following plugins expand esLint to support TypeScript, JSON, and lint code contiained in HTML and MarkDown files:
If the project includes TypeScript, then the rules will adapt to lint typescript files and the parser will be set to @typescript-eslint/parser
for ts
and tsx
filetypes.
When linting code snippets in Markdown files, a few rules relating to globals and unused vars are disabled.
These plugins will be loaded in based on your project dependencies
in package.json
. If a supported library is part of your project then it's related esLint plugins will be loaded. The following packages are supported:
If env.node = true
in your .eslintrc
file, then eslint-plugin-node is loaded.
If a project contians React, then a React version of the AirBNB config will be used and if Redux is installed the following extra plugins will be loaded.
The following esLint plugins enforce good coding practices:
- eslint-plugin-array-func
- eslint-plugin-eslint-comments
- eslint-plugin-no-constructor-bind
- eslint-plugin-no-use-extend-native
- eslint-plugin-optimize-regex
- eslint-plugin-promise
- eslint-plugin-simple-import-sort
- eslint-plugin-switch-case
If prettier is installed, any rules that may conflict with Prettier will be disabled. The plugin should read you Prettier config from your project's root.
The prettier configs for different eslint plugins are also automatically included based on which eslint plugins have been installed into your project.
These plugins add code security rules to esLint:
- eslint-plugin-no-secrets
- eslint-plugin-no-unsanitized
- eslint-plugin-scanjs-rules
- eslint-plugin-security
Test plugins are loaded based on which testing tools you have listed in devDependencies
of package.json
. The following test plugins are supported:
- eslint-plugin-ava
- eslint-plugin-chai-expect
- eslint-plugin-chai-friendly
- eslint-plugin-cypress
- eslint-plugin-jasmine
- eslint-plugin-jest
- eslint-plugin-jest-async
- eslint-plugin-mocha
- eslint-plugin-mocha-cleanup
- eslint-plugin-qunit
- eslint-plugin-testing-library
For test files a few rules are turned off, to better to support normal unit test coding styles.
In the most part the default rules are used for the plugins listed above, with the following exceptions.
Adds the fallthrough: 'never'
option to the newline-between-switch-case
rule.
// Good
switch (foo) {
case 1:
something()
break
case 2:
case 3:
somethingElse()
break
default:
defaultThing()
}
The following rules are disabled due to them being considered unduly restrictive or unhelpful.
- jest/no-disabled-tests
- react-redux/prefer-separate-component-file
- redux-saga/no-unhandled-errors
- lodash/prefer over native rules
- lodash-fp/use-fp
- unicorn/no-fn-reference-in-iterator
- unicorn/no-array-for-each
- unicorn/no-reduce
- unicorn/no-null
- unicorn/prefer-number-properties
- unicorn/prefer-optional-catch-binding
- unicorn/prevent-abbreviations
The following rules are disabled due to clashing with other plugins
- array-func/prefer-array-from
- import/order
- sort-imports
If you like the ideas behind this config, but not the AirBnB styleguide, then checkout eslint-config-adjunt. It includes most of the extra plugins used here, but lets you choose your prefered main eslint config.
Copyright © 2020 David J. Bradshaw. Licensed under the MIT License.