Package Exports

eslint-config-sheriff
eslint-config-sheriff/package.json

Readme

Sheriff

Note For a better reading experience, checkout the official docs.

📜 Table of Contents

📜 Table of Contents
📖 Description
🛠️ Setup
✨ Features
🖥️ Techs
🔑 Requirements
🧳 Eslint plugins
🧶 Rules
🧠 Configuration
💅 Prettier support
🧐 Prior art
♻ Migration guide
🧡 Contributing
🌤 Changelog
📋 License
🚀 Roadmap
👉 Faq
💌 Acknowledgments

📖 Description

🥳 Introduction

Sheriff is a comprehensive Eslint configuration. It supports various popular technologies.

⚠️ At the moment, Sheriff supports only Typescript codebases with modern Ecmascript standards. Support for vanilla Javascript will come at a later time. See: roadmap.

🔑 Key points

This library is pioneering in the adoption of the Eslint FlatConfig, introduced in Eslint v8.23.0.
Sheriff is very easy to get started with and use. It promotes a “zero overhead approach”. See: philosophy.
It’s a "plug & play" solution but you can customize it as much as you want. See: features.

🤔 Why / Motivations

Managing a complex Eslint configuration takes time and effort. Sheriff does it for you.

💭 Philosophy / Criteria

This library is very opinionated, but it's for the better. I took a lot of decisions so you don't have to [^2].
You can now quickstart static analysis in all your Typescript projects with ease. It's just 1 create-sheriff-config.
You can think of Sheriff like prettier or create-react-app. It's a tool that comes battery-packed with optimal defaults. It removes configuration decisions from the equation, so you or your team can focus on developing the actual product.
And if you don't like something, you can easily override it, and just as easily you can extend it. See: configuration.

[^2]: This config is particularly useful for big teams with developers of various skill levels. I worked on a lot of different projects and teams through the years and I got accustomed to seeing all kinds of mistakes being made. Sheriff was made to prevent all of those mistakes. It is battle-tested in real-world scenarios and shines especially in such.

🛠️ Setup

This config is highly opinionated, so make sure to meet the hard requirements in your project.
Then, let create-sheriff-config handle the whole setup for you automatically, or do it yourself manually.

🤖 Automatic setup (recommended)

Let the CLI take care of everything! Just run this command in your terminal:

❯  npx create-sheriff-config

...and you are good to go! Happy hacking 🎉

😫 Manual setup

Follow these steps:

Install the package from npm.

# npm
❯  npm install -D eslint-config-sheriff

# yarn
❯  yarn add -D eslint-config-sheriff

# pnpm
❯  pnpm add -D eslint-config-sheriff

Create a eslint.config.js [^1] file at the root of your project and copy/paste the contents of this snippet:

// eslint.config.js

import sheriff from 'eslint-config-sheriff';

export default [
  ...sheriff,
  {
    files: ['**/*{js,ts,jsx,tsx}'],
  },
];

or, if you already have a eslint.config.js in your project, just append sheriff to the configs array, like this:

// eslint.config.js

import sheriff from 'eslint-config-sheriff';
// my other imports...

export default [
  // my other configurations...
  ...sheriff,
];

Configure Sheriff (optional)
Setup prettier (optional)

[^1]: Sheriff is based on the new format of Eslint configs. You cannot extend Sheriff from a old config format, it wouldn't work.

✨ Features

⚡ Batteries included: Sheriff is a all-in-one solution. You don't need to install or configure separately anything else. Everything is included here.
🔓 No lock-in: Sheriff is not a framework. You can extend the eslint.config.js beyond Sheriff as much as you like, just like you normally would. Or you can disable any rule Sheriff comes with. Sheriff doesn't impose any limitation. See: configuration.
🏑 Frictionless by design: to setup Sheriff and take off, the only input required from the user is running the command npx create-sheriff-config. The command will automatically infer the details of your project and figure out the optimal Sheriff configuration by itself.
⇆ Interoperability: you can plop Sheriff in your project at any moment. create-sheriff-config will config automatically everything for you and will warn you if you need to take any special precautions. Bottom line: it's never too late to install Sheriff.
🏔 Cutting-edge: Sheriff is one of the first attempts in the wild to adhere to the new eslint configuration format, the FlatConfig. You can use Sheriff to easily and safely migrate your project to the new config format without effort. See: migration guide.
👊 Sensible: Almost all of the rules I hand-picked in Sheriff were chosen to counter some problematic real-world scenarios that have occurred in some projects. No bloat here.
🗄️ Configurable: Sheriff is fully configurable with its own config file .sheriffrc.json. See: configuration.
🐙 Modular: Sheriff has opt-in support for a wide array of libraries.
✍ SemVer: Sheriff releases follows Semantic Versioning with Conventional Commits standards.

🖥️ Techs

Eslint
Prettier
Typescript
React (opt-in)
Next (opt-in)
Lodash (opt-in)
Playwright (opt-in)
Jest (opt-in)
Vitest (opt-in)

🔑 Requirements

Hard requirements

Recommendations

🧳 Eslint plugins

🧶 Rules

See Rules.

🧠 Configuration

Configure Sheriff as desired in the .sheriffrc.json file [^3].
Every config option can be set on/off (you just pass them a boolean value). As they are all opt-in, they are all disabled by default.
```
// .sheriffrc.json (default)

{
  react: false,
  next: false,
  lodash: false,
  playwright: false,
  jest: false,
  vitest: false,
}
```

[^3]: Sheriff utilizes cosmiconfig under-the-hood to power-up the Sheriff configuration. You are not forced to call the config file ".sheriffrc.json", you can choose one of the alternative file types. See cosmiconfig for details.

Override any Sheriff rule as desired in the eslint.config.js file.
For example:

// eslint.config.js

import sheriff from 'eslint-config-sheriff';

export default [
  ...sheriff,
  {
    files: ['**/*{js,ts,jsx,tsx}'],
  },
];

Let's say you want to disable a Sheriff rule, like import/first:

// eslint.config.js

import sheriff from 'eslint-config-sheriff';

export default [
  ...sheriff,
  {
    files: ['**/*{js,ts,jsx,tsx}'],
  },
  {
    rules: {
      'import/first': 0, // adding this, 'import/first' is now disabled everywhere.
    },
  },
];

Likewise, let's say you want to enable a new rule:

// eslint.config.js

import sheriff from 'eslint-config-sheriff';

export default [
  ...sheriff,
  {
    files: ['**/*{js,ts,jsx,tsx}'],
  },
  {
    rules: {
      'no-undef': 2,
    },
  },
];

This is just the standard behavior of the new configuration system of Eslint, which I'm illustrating here for your convenience. Sheriff doesn't alter this in any way.
For more in-depth information, refer to the official docs.

💅 Prettier support

Sheriff tries to incorporate prettier out-of-the-box.
The create-sheriff-config command will spin up for you a default .prettierrc.json configuration. You can modify it if you need to, but it is discouraged. Act with caution.
If you don't use the create-sheriff-config command, you will have to provide a prettier config yourself. Also don't forget the .prettierignore file.
If you already have a prettier config in your project, the create-sheriff-config command won't create a new prettier config, nor will attempt to modify the existing one.
Sheriff comes with the rules of eslint-config-prettier out-of-the-box.
By design, Sheriff doesn't incorporate eslint-plugin-prettier. Its use is discouraged by the prettier team itself, as it just slows down your editor.
Instead, for your local editing experience, it's recommended to install a editor extension.
If you want to enforce Prettier at pre-commit stage, see the official docs.
To enforce Prettier in CI, see the CLI docs.

🧐 Prior art

Comparisons

The main difference between Sheriff and the other projects is that Sheriff is updated to the most recent version of Eslint and supports the new FlatConfig instead of relying on weird hacks using the @rushstack/eslint-patch.
There are of course other differences as well, but you can get an idea for yourself by reading their READMEs.

♻ Migration guide

Start by running the create-sheriff-config command and follow the advices that it prints in the console.
If you are setting up Sheriff in an already established codebase, make sure that the only eslint config file present in the whole project is the eslint.config.js.
If you want to keep your existing custom rules on-top of Sheriff, move them to the eslint.config.js, after the sheriff config array. Refer to the configuration instructions.
Make sure to uninstall all the packages that Sheriff already incorporates out-of-the-box. Here is the list.

🧡 Contributing

TODO

📋 License

MIT License.

🌤 Changelog

See Releases.

🚀 Roadmap

eslint-plugin-next
Create the .sheriffrc.json file support
Create a cli ala create-react-app
Remove react as a hard requirement
Create a documentation website
Vanilla JS (typescipt opt-in) support
Svelte support
Solid support
Vue support
Astro support

👉 FAQ

Why you didn’t include Eslint plugins/rules for "X" library?
- Cypress ➜ Don't use Cypress. Use Playwright instead.
- Storybook ➜ Storybook is still quite a niche library. Support for Storybook may come at a later time. Keep an eye on the roadmap.

💌 Acknowledgments

For some of this config i partially used eslint-config-red as a base.
Also took inspiration from eslint-config-airbnb for some of the rules in no-restricted-syntax.
I don't take any attribution for the rules in the various eslint-plugins used here (except for the few that I personally created). Please consider starring the respective projects for the awesome work their authors made. Sheriff wouldn't be possible without their efforts.
The full list of the plugins used is here.

eslint-config-sheriff