@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 \
  typescript-eslint \
  globals \
  eslint-config-prettier \
  eslint-plugin-unicorn \
  eslint-plugin-perfectionist \
  eslint-plugin-sort-destructure-keys \
  eslint-plugin-unused-imports \
  prettier-plugin-tailwindcss

React projects (additional dependencies):

npm install --save-dev \
  eslint-plugin-better-tailwindcss \
  eslint-plugin-jsx-a11y \
  eslint-plugin-react-hooks \
  eslint-plugin-react-compiler \
  eslint-plugin-react-refresh

One-command installation (React projects)

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

Usage

ESLint

Basic usage (React projects):

eslint.config.js

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

export default createReactConfig();

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,
});

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)

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

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

• TypeScript ESLint
• React Hooks
• React Compiler
• React Refresh (Vite)
• JSX Accessibility (a11y)
• Unicorn (Modern JS/TS best practices)
• Perfectionist (Auto-sorting)
• Better Tailwind CSS
• Unused Imports
• Sort Destructure Keys
• ESLint Config Prettier (Disables ESLint rules that conflict with Prettier)

Prettier

• Prettier Plugin Tailwind CSS

License

MIT