@noxickon/codex

Shared ESLint and Prettier configuration for noxickon projects.

Installation

1. Install the config package

npm install --save-dev @noxickon/codex

2. Install required peer dependencies

All projects (base dependencies):

npm install --save-dev \
  eslint \
  prettier \
  @eslint/js \
  @stylistic/eslint-plugin \
  typescript-eslint \
  globals \
  eslint-config-prettier \
  eslint-plugin-unicorn \
  eslint-plugin-perfectionist \
  eslint-plugin-sonarjs \
  eslint-plugin-regexp \
  eslint-plugin-sort-destructure-keys \
  eslint-plugin-unused-imports \
  prettier-plugin-tailwindcss

React projects (additional dependencies):

npm install --save-dev \
  @eslint-react/eslint-plugin \
  eslint-plugin-better-tailwindcss \
  eslint-plugin-react-hooks \
  eslint-plugin-react-refresh

Node.js projects (additional dependencies):

npm install --save-dev \
  eslint-plugin-n

One-command installation (React projects)

npm install --save-dev \
  @noxickon/codex \
  eslint \
  prettier \
  @eslint/js \
  @stylistic/eslint-plugin \
  typescript-eslint \
  globals \
  eslint-config-prettier \
  eslint-plugin-unicorn \
  eslint-plugin-perfectionist \
  eslint-plugin-sonarjs \
  eslint-plugin-regexp \
  eslint-plugin-sort-destructure-keys \
  eslint-plugin-unused-imports \
  prettier-plugin-tailwindcss \
  @eslint-react/eslint-plugin \
  eslint-plugin-better-tailwindcss \
  eslint-plugin-react-hooks \
  eslint-plugin-react-refresh

Usage

ESLint

React projects:

eslint.config.js

import { createReactConfig } from '@noxickon/codex/eslint/react';

export default createReactConfig();

Node.js projects:

eslint.config.js

import { createNodeConfig } from '@noxickon/codex/eslint/node';

export default createNodeConfig();

Custom Tailwind CSS path:

eslint.config.js

import { createReactConfig } from '@noxickon/codex/eslint/react';

export default createReactConfig({
    tailwindEntryPoint: './styles/tailwind.css',
});

Disable Tailwind plugin:

eslint.config.js

import { createReactConfig } from '@noxickon/codex/eslint/react';

export default createReactConfig({
    tailwindEntryPoint: null,
});

Blank-line spacing:

Blank lines are enforced via ESLint Stylistic — @stylistic/padding-line-between-statements and @stylistic/lines-between-class-members. They are included in the base, React, and Node configs for .ts / .tsx / .js / .jsx files — no setup needed. Collapsing of multiple blank lines and trimming of block edges is left to Prettier.

CSS and HTML blank-line spacing is owned entirely by Prettier (no ESLint config required).

Prettier

Basic usage:

prettier.config.js

import { createPrettierConfig } from '@noxickon/codex/prettier';

export default createPrettierConfig();

Custom Tailwind configuration:

prettier.config.js

import { createPrettierConfig } from '@noxickon/codex/prettier';

export default createPrettierConfig({
    tailwindStylesheet: './styles/tailwind.css',
    tailwindFunctions: ['twMerge', 'twJoin', 'clsx', 'cn', 'customHelper'],
});

Configuration Options

ESLint (React / Base)

| Option | Type | Default | Description | | ------------------ | -------------- | -------------------- | ---------------------------------------------------------------- | | tailwindEntryPoint | string or null | './src/tailwind.css' | Path to your Tailwind CSS file. Set to null to disable Tailwind. | | enableTailwind | boolean | true | Enable or disable the Tailwind CSS plugin. |

Prettier

| Option | Type | Default | Description | | ------------------ | -------- | ----------------------------------- | --------------------------------------------------- | | tailwindStylesheet | string | './src/tailwind.css' | Path to your Tailwind CSS file for class sorting. | | tailwindFunctions | string[] | ['twMerge', 'twJoin', 'clsx', 'cn'] | Custom helper functions for Tailwind class sorting. |

Included Plugins

ESLint

Base (all projects):

• TypeScript ESLint
• Unicorn (Modern JS/TS best practices)
• SonarJS (Code smells and bug detection)
• RegExp (Static RegExp analysis)
• Perfectionist (Auto-sorting)
• Unused Imports
• Sort Destructure Keys
• ESLint Stylistic (Blank-line spacing — padding-line-between-statements, lines-between-class-members)
• ESLint Config Prettier (Disables ESLint rules that conflict with Prettier)

React (additional):

• ESLint React (JSX, DOM, RSC, Web API leak detection)
• React Hooks (Rules of Hooks, exhaustive-deps, React Compiler rules — recommended-latest)
• React Refresh (Vite)
• Better Tailwind CSS

Node.js (additional):

• eslint-plugin-n (Node.js best practices, deprecated APIs, missing imports)

Prettier

• Prettier Plugin Tailwind CSS

License

MIT