Neon ESLint Config

Installation

neon comes as a complete package, none of the configs require any additional dependecies.

npm install eslint eslint-config-neon
yarn add eslint eslint-config-neon
pnpm add eslint eslint-config-neon

Usage

This package includes the following configurations:

• neon/common – The neon code style guide.
• neon/angular – for usage with Angular.
• neon/astro – for usage with Astro.
• neon/browser – for usage with DOM and other browser APIs.
• neon/cypress – for usage with Cypress.
• neon/edge – for usage with an edge runtime Vercel, Cloudflare Workers, or others.
• neon/jsx – for usage with JSX (with or without React).
• neon/jsx-a11y – for usage with JSX (with or without React) and want to include accessibility checks.
• neon/module – for usage with ESM modules.
• neon/next – for usage with Next.js.
• neon/no-deprecated - for reporting deprecated APIs (very slow on big repos, especially monorepos).
• neon/node – for usage with Node.js.
• neon/prettier – for usage with Prettier.
• neon/react – for usage with React.
• neon/rxjs – for usage with RxJS.
• neon/rxjs-angular – for usage RxJS and Angular.
• neon/svelte – for usage with Svelte.
• neon/svelte-typescript – for usage with Svelte and TypeScript.
• neon/typescript – for usage with TypeScript.
• neon/vue – for usage with Vue.
• neon/vue-typescript – for usage with Vue and TypeScript.

Configuration

{
	"root": true,
	"extends": ["neon/common", "neon/node", "neon/typescript", "neon/prettier"],
	"parserOptions": {
		"project": "./tsconfig.json"
	},
	"ignorePatterns": ["**/dist/*"]
}

Node.js

{
	"root": true,
	"root": true,
	"extends": ["neon/common", "neon/node", "neon/typescript", "neon/prettier"],
	"parserOptions": {
		"project": "./tsconfig.json"
	},
	"ignorePatterns": ["**/dist/*"]
}

React / Next

React:

{
	"root": true,
	"extends": [
		"neon/common",
		"neon/browser",
		"neon/node",
		"neon/typescript",
		"neon/react",
		"neon/next",
		"neon/edge",
		"neon/prettier"
	],
	"settings": {
		"react": {
			"version": "detect"
		}
	},
	"parserOptions": {
		"project": "./tsconfig.json"
	},
	"ignorePatterns": ["**/dist/*"],
	"rules": {
		"react/react-in-jsx-scope": 0,
		"react/jsx-filename-extension": [1, { "extensions": [".tsx"] }]
	}
}

Next:

{
	"root": true,
	"extends": [
		"neon/common",
		"neon/browser",
		"neon/node",
		"neon/typescript",
		"neon/react",
		"neon/next",
		"neon/edge",
		"neon/prettier"
	],
	"settings": {
		"react": {
			"version": "detect"
		}
	},
	"parserOptions": {
		"project": "./tsconfig.json"
	},
	"ignorePatterns": ["**/dist/*"],
	"rules": {
		"react/react-in-jsx-scope": 0,
		"react/jsx-filename-extension": [1, { "extensions": [".tsx"] }]
	}
}

Astro

{
	"root": true,
	"extends": [
		"neon/common",
		"neon/browser",
		"neon/node",
		"neon/typescript",
		"neon/react",
		"neon/astro",
		"neon/prettier"
	],
	"settings": {
		"react": {
			"version": "detect"
		}
	},
	"parserOptions": {
		"project": "./tsconfig.json"
	},
	"ignorePatterns": ["**/dist/*"],
	"rules": {
		"react/jsx-filename-extension": [1, { "extensions": [".tsx", ".astro"] }]
	}
}

Vue 2/3 / Nuxt

{
	"root": true,
	"extends": [
		"neon/common",
		"neon/browser",
		"neon/node",
		"neon/typescript",
		"neon/vue",
		"neon/vue-typescript",
		"neon/prettier"
	],
	"parserOptions": {
		"project": "./tsconfig.json"
	},
	"ignorePatterns": ["**/dist/*"]
}

Angular / NX

{
	"root": true,
	"parserOptions": {
		"project": "./tsconfig.json"
	},
	"ignorePatterns": ["!**/*"],
	"overrides": [
		{
			"files": ["*.ts"],
			"extends": [
				"neon/common",
				"neon/browser",
				"neon/node",
				"neon/typescript",
				"neon/angular",
				"neon/rxjs",
				"neon/rxjs-angular",
				"neon/prettier"
			]
		},
		{
			"files": ["*.html"],
			"extends": ["neon/angular"]
		}
	]
}

Usage with Prettier

Prettier and neon are already compatible. Just add it as the last config in your extends configuration, e.g.

{
	"extends": ["neon/common", "neon/node", "neon/typescript", "neon/prettier"]
}

This configuration disables all neon rules that conflict with Prettier.