From 23e7c97f3ebc1be80c2613ab1cf16200abb2499e Mon Sep 17 00:00:00 2001
From: Silon <nowakowski.damian@gmail.com>
Date: Fri, 23 Aug 2024 19:50:47 +0200
Subject: [PATCH] docs: update readme.md

---
 README.md | 129 ++++++++++++++++++++++++++++++++----------------------
 1 file changed, 76 insertions(+), 53 deletions(-)

diff --git a/README.md b/README.md
index eb1fe87..b2e7f5d 100644
--- a/README.md
+++ b/README.md
@@ -1,76 +1,81 @@
 # Neon ESLint Config
 
-<div align="center">
- <br />
- <p>
-  <a href="https://www.npmjs.com/package/eslint-config-neon"><img src="https://img.shields.io/npm/v/eslint-config-neon.svg?maxAge=3600" alt="npm version" /></a>
-  <a href="https://www.npmjs.com/package/eslint-config-neon"><img src="https://img.shields.io/npm/dt/eslint-config-neon.svg?maxAge=3600" alt="npm downloads" /></a>
- </p>
-</div>
+Complete ESLint Flat Config Package
+
+<p>
+	<a href="https://www.npmjs.com/package/eslint-config-neon"><img src="https://img.shields.io/npm/v/eslint-config-neon.svg?maxAge=3600" alt="npm version" /></a>
+	<a href="https://www.npmjs.com/package/eslint-config-neon"><img src="https://img.shields.io/npm/dt/eslint-config-neon.svg?maxAge=3600" alt="npm downloads" /></a>
+</p>
+
 
 ## Installation
 
-neon comes as a complete package, none of the configs require any additional dependecies.
+```sh
+# NPM
+npm install eslint eslint-config-neon -D
 
-```sh-session
-npm install eslint eslint-config-neon
-yarn add eslint eslint-config-neon
-pnpm add eslint eslint-config-neon
+# Yarn
+yarn add eslint eslint-config-neon -D
+
+# PNPM
+pnpm add eslint eslint-config-neon -D
 ```
 
-## Usage
+## Configurations
 
-This package includes the following configurations:
+Package includes the following configurations:
 
-- [`eslint-config-neon/common`](./src/common.ts) – The neon code style guide.
-- [`eslint-config-neon/angular`](./src/angular.ts) – for usage with [Angular](https://angular.io/).
-- [`eslint-config-neon/astro`](./src/astro.ts) – for usage with [Astro](https://astro.build/).
-- [`eslint-config-neon/browser`](./src/browser.ts) – for usage with DOM and other browser APIs.
-- [`eslint-config-neon/cypress`](./src/cypress.ts) – for usage with [Cypress](https://cypress.io/).
-- [`eslint-config-neon/edge`](./src/edge.ts) – for usage with an edge runtime [Vercel](https://vercel.com/blog/introducing-the-edge-runtime), [Cloudflare Workers](https://workers.cloudflare.com/), or others.
-- [`eslint-config-neon/jsx`](./src/jsx.ts) – for usage with [JSX](https://reactjs.org/docs/introducing-jsx.html) (with or without [React](https://reactjs.org/)).
-- [`eslint-config-neon/jsx-a11y`](./src/jsx-a11y.ts) – for usage with [JSX](https://facebook.github.io/react/) (with or without [React](https://reactjs.org/)) and want to include [accessibility checks](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y).
-- [`eslint-config-neon/module`](./src/module.ts) – for usage with ESM modules.
-- [`eslint-config-neon/next`](./src/next.ts) – for usage with [Next.js](https://nextjs.org/).
-- [`eslint-config-neon/no-deprecated`](./src/no-deprecated.ts) - for reporting deprecated APIs (very slow on big repos, especially monorepos).
-- [`eslint-config-neon/node`](./src/node.ts) – for usage with Node.js.
-- [`eslint-config-neon/prettier`](./src/prettier.ts) – for usage with [Prettier](https://prettier.io/).
-- [`eslint-config-neon/react`](./src/react.ts) – for usage with [React](https://reactjs.org/).
-- [`eslint-config-neon/rxjs`](./src/rxjs.ts) – for usage with [RxJS](https://rxjs.dev/).
-- [`eslint-config-neon/rxjs-angular`](./src/rxjs-angular.ts) – for usage [RxJS](https://rxjs.dev/) and [Angular](https://angular.io/).
-- [`eslint-config-neon/svelte`](./src/svelte.ts) – for usage with [Svelte](https://svelte.dev/).
-- [`eslint-config-neon/svelte-typescript`](./src/svelte-typescript.ts) – for usage with [Svelte](https://svelte.dev/) and [TypeScript](http://typescriptlang.org/).
-- [`eslint-config-neon/typescript`](./src/typescript.ts) – for usage with [TypeScript](http://typescriptlang.org/).
-- [`eslint-config-neon/vue`](./src/vue.ts) – for usage with [Vue](https://vuejs.org/).
-- [`eslint-config-neon/vue-typescript`](./src/vue-typescript.ts) – for usage with [Vue](https://vuejs.org/) and [TypeScript](http://typescriptlang.org/).
+| Configuration | Description |
+|---------------|-------------|
+| [`eslint-config-neon/common`](./src/common.ts) | The neon code style guide. |
+|[`eslint-config-neon/angular`](./src/angular.ts) | For usage with [Angular](https://angular.io/).|
+|[`eslint-config-neon/astro`](./src/astro.ts) | For usage with [Astro](https://astro.build/).|
+|[`eslint-config-neon/browser`](./src/browser.ts) | For usage with DOM and other browser APIs.|
+|[`eslint-config-neon/cypress`](./src/cypress.ts) | For usage with [Cypress](https://cypress.io/).|
+|[`eslint-config-neon/edge`](./src/edge.ts) | For usage with an edge runtime [Vercel](https://vercel.com/blog/introducing-the-edge-runtime), [Cloudflare Workers](https://workers.cloudflare.com/), or others.|
+|[`eslint-config-neon/jsx`](./src/jsx.ts) | For usage with [JSX](https://reactjs.org/docs/introducing-jsx.html) (with or without [React](https://reactjs.org/)).|
+|[`eslint-config-neon/jsx-a11y`](./src/jsx-a11y.ts) | For usage with [JSX](https://facebook.github.io/react/) (with or without [React](https://reactjs.org/)) and want to include [accessibility checks](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y).|
+|[`eslint-config-neon/module`](./src/module.ts) | For usage with ESM modules.|
+|[`eslint-config-neon/next`](./src/next.ts) | For usage with [Next.js](https://nextjs.org/).|
+|[`eslint-config-neon/no-deprecated`](./src/no-deprecated.ts) | For reporting deprecated APIs (very slow on big repos, especially monorepos).|
+|[`eslint-config-neon/node`](./src/node.ts) | For usage with Node.js.|
+|[`eslint-config-neon/prettier`](./src/prettier.ts) | For usage with [Prettier](https://prettier.io/).|
+|[`eslint-config-neon/react`](./src/react.ts) | For usage with [React](https://reactjs.org/).|
+|[`eslint-config-neon/rxjs`](./src/rxjs.ts) | For usage with [RxJS](https://rxjs.dev/).|
+|[`eslint-config-neon/rxjs-angular`](./src/rxjs-angular.ts) | For usage [RxJS](https://rxjs.dev/) and [Angular](https://angular.io/).|
+|[`eslint-config-neon/svelte`](./src/svelte.ts) | For usage with [Svelte](https://svelte.dev/).|
+|[`eslint-config-neon/svelte-typescript`](./src/svelte-typescript.ts) | For usage with [Svelte](https://svelte.dev/) and [TypeScript](http://typescriptlang.org/).|
+|[`eslint-config-neon/typescript`](./src/typescript.ts) | For usage with [TypeScript](http://typescriptlang.org/).|
+|[`eslint-config-neon/vue`](./src/vue.ts) | For usage with [Vue](https://vuejs.org/).|
+|[`eslint-config-neon/vue-typescript`](./src/vue-typescript.ts) | For usage with [Vue](https://vuejs.org/) and [TypeScript](http://typescriptlang.org/).|
 
-### Notes
+## Notes
 
-#### Flat Config only
+### Flat Config only
 
-It is important to note that this package only exports [ESLint Flat Config][]! This means that you _have_ to use `eslint.config.js`, `eslint.config.mjs`, or `eslint.config.cjs` to use this package. See the ESLint documentation on flat config for more information.
+It is important to note that this package only exports [ESLint Flat Config][]! This means that you _have_ to use at least ESLint 9 and `eslint.config.js`, `eslint.config.mjs`, or `eslint.config.cjs` to use this package. See the ESLint documentation on flat config for more information.
 
-#### Importing Configs
+### Importing
 
-Instead of importing from `eslint-config-neon`, you can also import each individual config from subpaths, e.g.
+There are two ways to import the configs:
 
 ```ts
 import common from "eslint-config-neon/common";
 ```
 
-instead of
+or
 
 ```ts
 import { common } from "eslint-config-neon";
 ```
 
-#### Merging Configs
+### Merging Configs
 
 In the examples below you will often see `lodash.merge` being used. This is of vital importance as objects often have to be deeply merged when using ESLint Flat Config. If you don't merge the objects, you will overwrite the previous object with the new one, and your config will be invalid.
 
 This package ships ships a transient dependency to `lodash.merge` and `@types/lodash.merge` to make sure it is available in your project.
 
-#### Reducing downloaded bundle size
+### Reducing downloaded bundle size
 
 Because this eslint config has a lot of transient dependencies to offer different eslint configs the bundle size of this package will be quite large. To alleviate this somewhat you can configure your package manager to skip the dependencies that you do not need through the `resolutions` (yarn) or `overrides` (npm / pnpm) fields.
 
@@ -96,10 +101,10 @@ Following is an example of excluding `eslint-plugin-vue`, which you can safely d
 }
 ```
 
-### Configuration
+## Usage
 
 ```js
-import { common, typescript, prettier } from "eslint-config-neon";
+import { common, prettier } from "eslint-config-neon";
 
 export default [
 	{
@@ -121,14 +126,14 @@ export default [
 <br>
 
 ```js
-import { common, prettier, typescript } from "eslint-config-neon";
+import { common, node, prettier } from "eslint-config-neon";
 import merge from "lodash.merge";
 
 /**
  * @type {import('@typescript-eslint/utils').TSESLint.FlatConfig.ConfigArray}
  */
 const config = [
-	...[...common, ...typescript, ...prettier].map((config) =>
+	...[...common, ...node, ...prettier].map((config) =>
 		merge(config, {
 			files: ["src/**/*.ts"],
 			languageOptions: {
@@ -147,7 +152,7 @@ export default config;
 </details>
 
 <details>
-<summary>React / Next</summary>
+<summary>React / NextJS</summary>
 <br>
 
 React:
@@ -187,17 +192,25 @@ export default [
 
 Next:
 
-Note: For Vite this is the same setup, just exclude the next config.
-
 ```js
 import { browser, common, edge, next, node, prettier, react, typescript } from "eslint-config-neon";
+
 import merge from "lodash.merge";
 
 /**
  * @type {import('@typescript-eslint/utils').TSESLint.FlatConfig.ConfigArray}
  */
 const config = [
-	...[...common, ...browser, ...node, ...typescript, ...react, ...next, ...edge, ...prettier].map((config) =>
+	...[
+		...common, 
+		...browser, 
+		...node, 
+		...typescript, 
+		...react, 
+		...next, 
+		...edge, 
+		...prettier
+	].map((config) =>
 		merge(config, {
 			files: ["src/**/*.ts"],
 			settings: {
@@ -297,13 +310,23 @@ export default [
 
 ```js
 import { angular, browser, common, node, prettier, rxjs, rxjsangular, typescript } from "eslint-config-neon";
+
 import merge from "lodash.merge";
 
 /**
  * @type {import('@typescript-eslint/utils').TSESLint.FlatConfig.ConfigArray}
  */
 const config = [
-	...[...common, ...browser, ...node, ...typescript, ...angular, ...rxjs, ...rxjsangular, ...prettier].map((config) =>
+	...[
+		...common, 
+		...browser, 
+		...node, 
+		...typescript, 
+		...angular, 
+		...rxjs, 
+		...rxjsangular, 
+		...prettier
+	].map((config) =>
 		merge(config, {
 			files: ["src/**/*.ts"],
 			languageOptions: {
@@ -336,7 +359,7 @@ export default config;
 Prettier and neon are already compatible. Just add it as the last config in your `extends` configuration, e.g.
 
 ```js
-import { prettier } from "eslint-config-neon";
+import prettier from "eslint-config-neon/prettier";
 
 export default [...prettier];
 ```