---
title: Manual setup
description: Set up the configuration yourself step-by-step
---

import { Callout } from 'fumadocs-ui/components/callout';
import { Steps, Step } from 'fumadocs-ui/components/steps';
import { CodeBlock } from 'fumadocs-ui/components/codeblock';

Follow these steps:

<Steps>

<Step>
    Install the package from [npm](https://www.npmjs.com/package/eslint-config-sheriff).

    ```npm
    npm install -D eslint eslint-config-sheriff
    ```
</Step>

<Step>
    Create a `eslint.config.mjs` file at the root of your project and copy/paste the contents of the following snippet of code:

    ```js title="eslint.config.mjs"
    import { sheriff } from "eslint-config-sheriff";
    import { defineConfig } from "eslint/config";

    const sheriffOptions = {
      react: false,
      next: false,
      astro: false,
      lodash: false,
      remeda: false,
      playwright: false,
      storybook: true,
      jest: false,
      vitest: false,
      tsconfigRootDir: import.meta.dirname,
    };

    export default defineConfig(sheriff(sheriffOptions));
    ```

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

    ```js title="eslint.config.mjs"
    import { sheriff } from "eslint-config-sheriff"; // [!code ++]
    import { defineConfig } from "eslint/config";
    // my other imports...

    // [!code ++:12]
    const sheriffOptions = {
      react: false,
      next: false,
      astro: false,
      lodash: false,
      remeda: false,
      playwright: false,
      storybook: true,
      jest: false,
      vitest: false,
      tsconfigRootDir: import.meta.dirname,
    };


    export default defineConfig(
      sheriff(sheriffOptions), // [!code ++]
      // my other configurations...
    );
    ```
</Step>

<Step>
    Adopt `eslint.config.ts` (_optional_).

    If you want to have a `.ts` configuration file ([learn more](/docs/typescript-support/eslint-config-ts)) instead of the default `.mjs` file, follow these steps:

      1. make sure your installed ESLint version is `>=9.9.0` (preferably `>=9.18.0`. [See why](/docs/vscode-support#eslintconfigts-support))
      2. install [jiti](https://github.com/unjs/jiti)
        ```npm
        npm install -D jiti
        ```
      3. change the extension of `eslint.config.mjs` from `.mjs` to `.ts`
      4. define the types of the `sheriffOptions` object:

        ```ts twoslash title="eslint.config.ts"
        import { sheriff } from "eslint-config-sheriff"; // [!code --]
        import { sheriff, type SheriffSettings } from "eslint-config-sheriff"; // [!code ++]
        import { defineConfig } from "eslint/config";

        const sheriffOptions = { // [!code --]
        const sheriffOptions: SheriffSettings = { // [!code ++] [!code word:SheriffSettings]
          react: false,
          next: false,
          astro: false,
          lodash: false,
          remeda: false,
          playwright: false,
          storybook: true,
          jest: false,
          vitest: false,
          tsconfigRootDir: import.meta.dirname,
        };

        export default defineConfig(sheriff(sheriffOptions));
        ```
</Step>

<Step>
    [Configure Sheriff](/docs/configuration) (_optional_)
</Step>

<Step>
    [Setup Prettier](/docs/prettier-support#setup) (_optional_)
</Step>
<Step>
    [Setup VSCode support](/docs/vscode-support) (_optional_)
</Step>
</Steps>

<Callout type="warn" title="Warning">
  Sheriff is based on the [new format of ESLint configs](https://eslint.org/docs/latest/user-guide/configuring/configuration-files). You cannot extend Sheriff from an [old config format](https://eslint.org/docs/latest/use/configure/configuration-files-deprecated), it wouldn't work.
</Callout>
