🔨🐶🐱🔧WoofMeow ESLint config

ESLint configuration package for various project. You can use ready-made configuration presets or build your own based on them.

Table of contents:

• Getting started
• Usage
  • Default preset
  • General preset
  • Base import preset
  • Import preset for Atomic Design
  • Import preset for Feature Sliced Design
  • TypeScript preset
  • React preset
  • Next.js preset
  • Combination of presets

Getting started

Install eslint-config-woofmeow to your repository as dev dependency:

npm install eslint-config-woofmeow --save-dev

pnpm install eslint-config-woofmeow --save-dev

yarn add eslint-config-woofmeow --dev

WoofMeow ESLint configuration has the following required peer dependencies:

• eslint
• eslint-config-prettier
• eslint-plugin-simple-import-sort
• eslint-plugin-unused-imports

If you are using npm version 7 or higher, these dependencies will be installed automatically. Otherwise, you need to do it manually.

Usage

Default preset

Includes the following presets:

• general
• import-base

To include this preset in your ESLint configuration add eslint-config-woofmeow as extension:

module.exports = {
  extends: 'woofmeow',
};

General preset

✔️ Included in eslint-config-woofmeow

This preset includes general non-specific configuration.

To include this preset in your ESLint configuration add eslint-config-woofmeow/general as extension:

module.exports = {
  extends: 'woofmeow',
};

Base import preset

✔️ Included in eslint-config-woofmeow

To include this preset in your ESLint configuration add eslint-config-woofmeow/import as extension:

module.exports = {
  extends: ['woofmeow', 'woofmeow/import'],
};

Import preset for Atomic Design

⚠️ Not included in eslint-config-woofmeow

Includes the following presets:

• import-base

To include this preset in your ESLint configuration add eslint-config-woofmeow/import-atomic as extension:

module.exports = {
  extends: ['woofmeow', 'woofmeow/import-atomic'],
};

Import preset for Feature Sliced Design

⚠️ Not included in eslint-config-woofmeow

Related to Feature Sliced Design up to v2.0.0.

Includes the following presets:

• import-base

To include this preset in your ESLint configuration add eslint-config-woofmeow/import-fsd as extension:

module.exports = {
  extends: ['woofmeow', 'woofmeow/import-fsd'],
};

TypeScript preset

⚠️ Not included in eslint-config-woofmeow

✔️ Included in eslint-config-woofmeow/next

This preset includes TypeScript ESLint configuration.

Required peer dependencies:

• typescript
• @typescript-eslint/eslint-plugin
• @typescript-eslint/parser

If you are using npm version 7 or higher, these dependencies will be installed automatically. Otherwise, you need to do it manually.

To include this preset in your ESLint configuration add eslint-config-woofmeow/typescript as extension and configure parser options:

module.exports = {
  extends: ['woofmeow', 'woofmeow/typescript'],
  parserOptions: {
    project: 'tsconfig.json',
    tsconfigRootDir: __dirname,
  },
};

React preset

⚠️ Not included in eslint-config-woofmeow

✔️ Included in eslint-config-woofmeow/next

Required peer dependencies:

• eslint-plugin-react
• eslint-plugin-react-hooks

If you are using npm version 7 or higher, these dependencies will be installed automatically. Otherwise, you need to do it manually.

To include this preset in your ESLint configuration add eslint-config-woofmeow/react as extension:

module.exports = {
  extends: ['woofmeow', 'woofmeow/react'],
};

Next.js preset

⚠️ Not included in eslint-config-woofmeow

Includes the following presets:

• react
• typescript

Required peer dependencies:

• eslint-config-next
• eslint-plugin-react (from [react] preset)
• eslint-plugin-react-hooks (from react preset)
• typescript (from typescript preset)
• @typescript-eslint/eslint-plugin (from typescript preset)
• @typescript-eslint/parser (from typescript preset)

If you are using npm version 7 or higher, these dependencies will be installed automatically. Otherwise, you need to do it manually.

To include this preset in your ESLint configuration add eslint-config-woofmeow/next as extension:

module.exports = {
  extends: ['woofmeow', 'woofmeow/next'],
};

Combination of presets

You can combine presets to create your own ESLint configuration.

For example, to create an ESLint configuration for a project using React, TypeScript and Feature Sliced Design you need to add eslint-config-woofmeow/react, eslint-config-woofmeow/typescript and eslint-config-woofmeow/import-fsd to your ESLint configuration file as extensions:

module.exports = {
  extends: [
    'woofmeow',
    'woofmeow/react',
    'woofmeow/typescript',
    'woofmeow/import-fsd',
  ],
  parserOptions: {
    project: 'tsconfig.json',
    tsconfigRootDir: __dirname,
  },
};