Kinda strict Prettier-friendly ESLint config.
- Only rules by default. No other config.
- Optional: A less confusing
browser
env.
- Optional: A less confusing
- No rules that that are unnecessary or might conflict with Prettier.
- Find errors.
- Avoid potential problems.
- Forbid confusing code.
- Prefer ES2015+ syntax.
- Avoid rules that require arbitrary configuration.
Install eslint-config-lydell:
$ npm install --save-dev eslint-config-lydell
Then, merge in the rules in your .eslintrc.js
file. (You have to use .js
for your ESLint config; see below.)
const baseRules = require("eslint-config-lydell");
module.exports = {
// Mix in rules from this config:
rules: Object.assign({}, baseRules(), {
// Your own rules here.
}),
// Optional: Less confusing `browser` env:
globals: Object.assign({}, baseRules.browserEnv(), {
// Your own globals here.
}),
};
A few ESLint plugins are supported as well:
- eslint-plugin-flowtype
- eslint-plugin-import
- eslint-plugin-jest
- eslint-plugin-react
- eslint-plugin-react-hooks
Note that you need to install those plugins yourself. (They are not included in the config because of ESLint issue #3458.)
Enable rules for the plugins you use like so:
baseRules({ flow: true, import: true, jest: true, react: true });
The reason this config is require
:d instead of using the extends
field
(which is the standard), is to easily allow flow
to opt out from some base and
react
rules, for example.
The config also comes with a browser env (globals), that is exactly like the
standard browser
env in ESLint but without all the weird stuff like name
and
length
. (Prefix uncommon globals with window.
or add them to your config.)
This includes some extra recommended plugins, that don't need a ton of configuration:
- eslint-plugin-prettier
- eslint-plugin-simple-import-sort
- eslint-plugin-flowtype-errors (if you use Flow)
- eslint-plugin-css-modules (if you use CSS Modules)
It also shows how to set up linting for config files, Storybook stories and Jest tests.
const baseRules = require("eslint-config-lydell");
module.exports = {
// Prevent config files outside the repo from interfering.
root: true,
plugins: [
// Provides rules for these plugins:
"import",
"jest",
"flowtype",
"react",
"react-hooks",
// Recommended plugins:
"prettier",
"simple-import-sort",
// Recommended if using CSS Modules or Flow:
"css-modules",
"flowtype-errors",
],
// Alternatively, use `parser: "babel-eslint"` (for Flow support, or
// experimental features).
parserOptions: {
sourceType: "module",
ecmaFeatures: {
jsx: true,
},
},
env: {
es6: true,
// node: true, // For Node.js apps.
// browser: true, // NOT recommended; see below.
},
// Less confusing `browser` env (for browser apps):
globals: Object.assign({}, baseRules.browserEnv(), {
DEBUG: false,
}),
rules: Object.assign(
{},
// Merge in base rules, and enable the extra rules you want.
baseRules({ flow: true, import: true, jest: true, react: true }),
// Add more rules and override rules here:
{
"css-modules/no-undef-class": "error",
"flowtype-errors/show-errors": "error",
"prettier/prettier": "error",
"simple-import-sort/sort": "error",
}
),
// Example on how to configure certain config files and such.
overrides: [
{
// Config files.
files: [".*.js", "*.config.js", ".storybook/*.js"],
env: { node: true },
rules: {
"flowtype/require-valid-file-annotation": "off",
},
},
{
// Jest tests.
files: ["*.test.js"],
env: { jest: true },
// You can also enable Jest rules only for test files if you want.
rules: baseRules({ builtin: false, jest: true }),
},
{
// Storybook stories.
files: ["stories.js"],
globals: {
module: false,
},
},
{
// Node.js code.
files: ["server/**/*.js"],
env: { node: true },
rules: {
"import/order": ["error", { "newlines-between": "always" }],
},
},
],
// If you use React:
settings: {
react: {
version: "detect",
},
},
};
Recommended .eslintignore:
# Un-ignore config files.
!/*.js
!/.storybook/
!/**/.eslintrc.js
# You might want to ignore some directories:
# /build/
Recommended prettier.config.js:
module.exports = {
trailingComma: "es5",
};
MIT.