eslint-config-sheriff

Sheriff

📜 Table of Contents

1. Table of Contents
2. Description
3. Philosophy
4. Installation
5. Usage
6. Techs
7. Requirements
8. Eslint plugins
9. Roadmap
10. Acknowledgments

📖 Description

sheriff is a comprehensive Eslint configuration.
It takes into account various technologies (see: techs).

⚠️ At the moment, sheriff supports only Typescript codebases with modern Ecmascript standards. Maybe in the future i'll take in consideration support for vanilla Javascript. Refer to the roadmap.

💭 Philosophy / Why / Motivations

This library is very opinionated, but it's for the better. I took a lot of decisions so you don't have too ¹. You can now quickstart static analysis in all your Typescript projects with ease. It's just 1 npm install.
You can think of sheriff like prettier or create-react-app. It's a tool that tool that comes battery-packed with optimal defaults. It remove 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: usage).

🛠️ Installation

# npm
npm install -D eslint-config-sheriff

# yarn
yarn add -D eslint-config-sheriff

# pnpm
pnpm add -D eslint-config-sheriff

✨ Usage

This config is highly opinionated, so make sure to meet the hard requirements in your project. Then, follow these steps:

1. Install the package from npm.

2. Create a eslint.config.js ² file and copy/paste the contents of this snippet:

   // eslint.config.js
   
   import sheriff from 'eslint-config-sheriff/recommended';
   
   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/recommended';
   // my other imports...
   
   export default [
       // my other configurations...
       ...sheriff,
   ];
   

3. Configure sheriff as desired in the sheriff.config.js file. (optional)

4. Override any sheriff rule as desired in the eslint.config.js file. (optional)

🖥️ Techs

• Eslint
• Prettier
• Typescript
• React
• Lodash (optional)
• Playwright (optional)

🔑 Requirements

Hard requirements

• Node >16
• Eslint >8.23.0
• Typescript
• React

Recommendations

• Node >18
• VScode
• VScode eslint extension
• VScode prettier extension

🐙 Eslint plugins

• @typescript/eslint
• eslint-config-prettier
• eslint-plugin-react
• eslint-plugin-unicorn
• eslint-plugin-sonarjs
• eslint-plugin-import
• eslint-plugin-lodash-f
  • my fork of eslint-plugin-lodash
• eslint-plugin-playwright
• eslint-plugin-jsdoc

🚀 Roadmap

• Consider more rules
• eslint-plugin-n
• eslint-plugin-next
• Create the sheriff.config.js file
• Create a cli ala create-react-app
• Remove react as a hard requirement
• Create a documentation website

🙏 Acknowledgments

For some of this config i partially used eslint-config-red as a base.
I don't take any attribution for the rules in the various eslint-plugins used here. Please consider starring the respective projects for the awesome work their authors made. The full list of the plugins used is here.

Footnotes

1. This config is particularly useful for big teams with developers of various skill levels. I worked in a lot of different projects and teams through the years and i got accustomed to seeing all kinds of mistake being made. sheriff was made to prevent all of those mistakes. It is battle-tested in real-world scenarios, and shines especially in such scenarios. ↩

2. sheriff is based on the new format of Eslint configs. You cannot extend sheriff from a old config format, it wouldn't work. ↩