Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: update readme.md #10

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

docs: update readme.md #10

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
129 changes: 76 additions & 53 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.

Expand All @@ -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 [
{
Expand All @@ -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: {
Expand All @@ -147,7 +152,7 @@ export default config;
</details>

<details>
<summary>React / Next</summary>
<summary>React / NextJS</summary>
<br>

React:
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -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];
```
Expand Down