feat(eslint): split ESLint config into specialised parts (#19)

Resolves #14

## 📑 Description

Split the ESLint config into specialized parts. For now, we use "base", "next" and "react" as separated configurations. Base is the default.


## ⚠️ BREAKING CHANGE

The default config is now only "base", instead of all of them.

## ✏️ Side Note

To ignore the `.changeset` folder from prettier, I added a custom ignore file.

.changeset/README.md

@@ -1,8 +1,8 @@
 # Changesets
 
-Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
-with multi-package repos, or single-package repos to help you version and publish your code. You can
-find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works with multi-package
+repos, or single-package repos to help you version and publish your code. You can find the full documentation for it
+[in our repository](https://github.com/changesets/changesets)
 
 We have a quick list of common questions to get you started engaging with this project in
 [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/fresh-brooms-rush.md

@@ -0,0 +1,5 @@
+---
+"@mheob/eslint-config": patch
+---
+
+Improve README to get a better copy/paste experience.

.changeset/short-worms-wave.md

@@ -0,0 +1,5 @@
+---
+"@mheob/eslint-config": major
+---
+
+Split ESLint configuration into specified files (base/reat/next for now).

.prettierignore

@@ -0,0 +1,11 @@
+# Changeset
+.changeset
+
+# dependencies
+node_modules
+
+# testing
+coverage
+
+# turbo
+.turbo

packages/eslint-config/.eslintrc.cjs

@@ -0,0 +1,4 @@
+module.exports = {
+  extends: ['./base.js'],
+  env: { node: true },
+};

packages/eslint-config/README.md

@@ -2,42 +2,64 @@
 
 To make my configurations a bit easier I share my [ESLint](https://eslint.org/) config.
 
-## Usage
+## Install
 
-### Install
+### With NPM
 
 ```sh
-# with npm
 npm install -D @mheob/eslint-config
+```
+
+### With YARN
 
-# with yarn
+```sh
 yarn add -D @mheob/eslint-config
+```
 
-# with pnpm
+### With PNPM
+
+```sh
 pnpm add -D @mheob/eslint-config
 ```
 
-### Include in your project
+## Usage
 
-#### Simple: Edit `package.json`
+### Basic Rules only
 
-```jsonc
-{
-  // ...
-  "eslint": {
-    "extends": "@mheob/eslint-config"
-  }
-}
+```js
+// .eslintrc.cjs
+module.exports = {
+  root: true, // optional
+  extends: ['@mheob/eslint-config'],
+};
 ```
 
-#### Or with override settings
+### React and Basic Rules (`@mheob/eslint-config/react`)
 
-If you need to override some settings you can do it this way:
+```js
+// .eslintrc.cjs
+module.exports = {
+  root: true, // optional
+  extends: ['@mheob/eslint-config/react'],
+};
+```
+
+### NextJS and Basic Rules (`@mheob/eslint-config/next`)
+
+```js
+// .eslintrc.cjs
+module.exports = {
+  root: true, // optional
+  extends: ['@mheob/eslint-config/next'],
+};
+```
+
+If you need to override some rules you can do it this way:
 
 ```js
 // .eslintrc.cjs
 module.exports = {
-  root: true,
+  root: true, // optional
   extends: ['@mheob/eslint-config'],
   rules: {
     'prettier/prettier': 'off',
@@ -46,14 +68,22 @@ module.exports = {
 };
 ```
 
-## Ruleset
-
-This configuration uses these external ESLint packages:
+Or override rules specified for some files:
 
-- [`@typescript-eslint/eslint-plugin`](https://github.com/typescript-eslint/typescript-eslint/tree/main/packages/eslint-plugin)
-- [`@typescript-eslint/parser`](https://github.com/typescript-eslint/typescript-eslint/tree/main/packages/parser)
-- [`eslint-config-next`](https://github.com/vercel/next.js/tree/canary/packages/eslint-config-next)
-- [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier)
-- [`eslint-plugin-prettier`](https://github.com/prettier/eslint-plugin-prettier)
-- [`eslint-plugin-react`](https://github.com/jsx-eslint/eslint-plugin-react)
-- [`eslint-plugin-unicorn`](https://github.com/sindresorhus/eslint-plugin-unicorn)
+```js
+// .eslintrc.cjs
+module.exports = {
+  root: true, // optional
+  extends: ['@mheob/eslint-config'],
+  overrides: [
+    {
+      files: ['*.jsx', '*.tsx'],
+      settings: { react: { version: 'detect' } },
+      rules: {
+        'react/jsx-no-useless-fragment': 'warn',
+        'react/react-in-jsx-scope': 'off',
+      },
+    },
+  ],
+};
+```

packages/eslint-config/index.cjs → packages/eslint-config/base.js

@@ -1,12 +1,10 @@
-/** @type {import('eslint').ESLint.ConfigData} */
+/**
+ * Base ESLint rules
+ * @type {import('eslint').ESLint.ConfigData}
+ */
 module.exports = {
   plugins: ['@typescript-eslint'],
   extends: ['eslint:recommended', 'plugin:unicorn/recommended', 'plugin:prettier/recommended'],
-  settings: {
-    react: {
-      version: 'detect',
-    },
-  },
   rules: {
     'prettier/prettier': 'warn',
     'no-console': ['warn', { allow: ['warn', 'error'] }],
@@ -44,16 +42,5 @@ module.exports = {
         ],
       },
     },
-    {
-      files: ['*.jsx', '*.tsx'],
-      extends: ['plugin:eslint-plugin-react/recommended', 'next/core-web-vitals'],
-      settings: { react: { version: 'detect' } },
-      rules: {
-        'react/jsx-curly-brace-presence': ['warn', { props: 'never', children: 'never' }],
-        'react/jsx-no-useless-fragment': 'warn',
-        'react/react-in-jsx-scope': 'off',
-        'unicorn/filename-case': ['error', { case: 'pascalCase' }],
-      },
-    },
   ],
 };

packages/eslint-config/index.js

@@ -0,0 +1 @@
+module.exports = require('./base');

packages/eslint-config/next.js

@@ -0,0 +1,7 @@
+/**
+ * NextJS specific ESLint rules
+ * @type {import('eslint').ESLint.ConfigData}
+ */
+module.exports = {
+  extends: ['./react', 'next/core-web-vitals'],
+};

packages/eslint-config/package.json

@@ -16,13 +16,16 @@
   "author": "Alexander Böhm <tools@boehm.work>",
   "main": "index.cjs",
   "files": [
-    "index.cjs",
+    "index.js",
+    "base.js",
+    "next.js",
+    "react.js",
     "LICENSE",
     "README.md"
   ],
   "scripts": {
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
-    "lint": "TIMING=1 eslint src/**/*.ts* --fix"
+    "lint": "TIMING=1 eslint **/*.cjs --fix"
   },
   "dependencies": {
     "@typescript-eslint/eslint-plugin": "^5.35.1",

packages/eslint-config/react.js

@@ -0,0 +1,24 @@
+/**
+ * React specific ESLint rules
+ * @type {import('eslint').ESLint.ConfigData}
+ */
+module.exports = {
+  extends: ['./base', 'plugin:eslint-plugin-react/recommended'],
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  overrides: [
+    {
+      files: ['*.jsx', '*.tsx'],
+      settings: { react: { version: 'detect' } },
+      rules: {
+        'react/jsx-curly-brace-presence': ['warn', { props: 'never', children: 'never' }],
+        'react/jsx-no-useless-fragment': 'warn',
+        'react/react-in-jsx-scope': 'off',
+        'unicorn/filename-case': ['error', { case: 'pascalCase' }],
+      },
+    },
+  ],
+};