eslint-config-nebula

What's included?

• Perfectionist plugin - Enforces consistent sorting for objects, imports, TypeScript types, enums, JSX props, and more.
• Prettier plugin - Integrates Prettier with ESLint, reporting formatting issues as ESLint errors.
• React plugin - Provides linting rules for React applications.
• React Hooks plugin - Enforces the Rules of Hooks.
• React Refresh plugin - Ensures components support fast refresh updates.
• TailwindCSS plugin - Enforces best practices and consistency with Tailwind CSS.
• Unused Imports plugin - Detects and removes unused ES6 imports.
• React Refresh plugin - Ensures components are compatible with fast refresh updates.

Installation

npm add -D eslint eslint-config-nebula
pnpm add -D eslint eslint-config-nebula
yarn add -D eslint eslint-config-nebula
bun add -D eslint eslint-config-nebula

Configuration

Node

// eslint.config.mjs

import nebula from 'eslint-config-nebula'

export default [
  ...nebula.node,
  // Override any settings from the "eslint-config-nebula" config here
]

React

// eslint.config.mjs

import nebula from 'eslint-config-nebula'

export default [
  ...nebula.react,
  // Override any settings from the "eslint-config-nebula" config here
]

React + Tailwind

// eslint.config.mjs

import nebula from 'eslint-config-nebula'

export default [
  ...nebula.reactTailwind,
  // Override any settings from the "eslint-config-nebula" config here
]

VS Code

// package.json

"scripts": {
  "lint": "eslint --fix && tsc --noEmit"
},

Recommend to use ESlint extension

// settings.json

"[javascript]": {
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[javascriptreact]": {
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[typescript]": {
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[typescriptreact]": {
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"editor.codeActionsOnSave": {
  "source.fixAll": "explicit"
},