eslint-config-lydell

eslint-config-lydell

Kinda strict Prettier-friendly ESLint config.

• Only rules by default. No other config.
  • Optional: A less confusing browser env.
• 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.

Installation

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

Example configuration

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",
};

License

MIT.

Changelog

Version 14.0.0 (2019-02-26)

• Added: [jest/prefer-todo].
• Added: [eslint-plugin-react-hooks] rules. This plugin is now required to install if you use react: true.
• Removed: [react/self-closing-comp]. It’s not needed when using Prettier.
• Removed: [camelcase]. API’s often uses snake case in response objects, and it’s annoying not being able to do const { full_name } = apiResponse without renaming.