@codfish/eslint-config 0.0.0-PR-155--2a9a213 → 0.0.0-PR-124--0da7f69

package/README.md

@@ -1,7 +1,7 @@
 # @codfish/eslint-config
 
-> Modern ESLint configuration with TypeScript, React/Next.js, YAML, Testing Library, and testing framework support using
-> ESLint v10+ flat config format.
+> Modern ESLint configuration with TypeScript, React/Next.js, Tailwind CSS, YAML, Testing Library, and testing framework
+> support using ESLint v9+ flat config format.
 
 [![version](https://img.shields.io/npm/v/@codfish/eslint-config.svg)](http://npm.im/@codfish/eslint-config)
 [![downloads](https://img.shields.io/npm/dm/@codfish/eslint-config.svg)](http://npm-stat.com/charts.html?package=@codfish/eslint-config&from=2015-08-01)
@@ -15,19 +15,16 @@
 ## Table of Contents
 
 - [Features](#features)
+  - [Automatic Configuration](#automatic-configuration)
+  - [Opinionated Highlights](#opinionated-highlights)
 - [Installation](#installation)
 - [Usage](#usage)
-  - [Opinionated Highlights](#opinionated-highlights)
-- [IDE Setup](#ide-setup)
-  - [VS Code / Cursor](#vs-code--cursor)
+  - [Docker Configuration](#docker-configuration)
+  - [dApps Configuration](#dapps-configuration)
 - [Prettier Configuration](#prettier-configuration)
-  - [Use in combination with prettier-plugin-tailwindcss](#use-in-combination-with-prettier-plugin-tailwindcss)
 - [Example scripts](#example-scripts)
 - [Commitlint Configuration](#commitlint-configuration)
-- [Upgrading to ESLint 10](#upgrading-to-eslint-10)
-  - [Breaking Changes in ESLint 10](#breaking-changes-in-eslint-10)
-  - [Migration Steps](#migration-steps)
-  - [What Changed](#what-changed)
+- [Known issues](#known-issues)
 - [Migration from Legacy Config](#migration-from-legacy-config)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
@@ -35,53 +32,73 @@
 
 ## Features
 
-- **Modern ESLint v10+ flat config**: Uses the new flat configuration format
+- **Modern ESLint v9+ flat config**: Uses the new flat configuration format
 - **Dynamic feature detection**: Automatically configures based on your project's dependencies
 - **TypeScript support**: Full TypeScript linting with modern typescript-eslint parser and rules
 - **React ecosystem**: React, React Hooks, and JSX accessibility rules when React is detected
 - **Next.js support**: Automatically configures Next.js official plugin linting rules when detected
 - **Test framework agnostic**: Supports Jest and Vitest with automatic detection
 - **Testing Library integration**: Automatically includes Testing Library rules for test files
-- **Multi-format support**: Built-in linting and formatting for Markdown, HTML, JSON, YAML/YML files
+- **Tailwind CSS support**: Automatically configures Tailwind CSS linting when detected
+- **YAML/YML support**: Built-in linting for YAML configuration files
 - **Prettier integration**: Built-in Prettier configuration with conflict resolution via eslint-config-prettier
 - **ESM architecture**: Built with ECMAScript modules and full TypeScript typing
 - **Docker support**: Optional configuration for dockerized applications
 - **Blockchain/dApp support**: Optional configuration for decentralized applications
 
+### Automatic Configuration
+
+The config automatically detects and configures:
+
+- **React**: Includes React, React Hooks, and JSX a11y rules when `react` is installed
+- **Next.js**: Includes Next.js recommended and Core Web Vitals rules when `next` is detected
+- **Jest**: Configures Jest-specific rules when `jest` is found in dependencies
+- **Vitest**: Configures Vitest-specific rules when `vitest` is detected
+- **Testing Library**: Automatically adds Testing Library rules for test files in Jest/Vitest projects
+- **Tailwind CSS**: Includes Tailwind CSS linting rules when `tailwindcss` is detected
+- **YAML files**: Always includes YAML/YML file linting support
+- **Prettier**: Loads your project's Prettier config or falls back to [my defaults](./prettier.js)
+
+### Opinionated Highlights
+
+This configuration includes some opinionated settings that you might want to customize for your project:
+
+**Prettier/Formatting:**
+
+- **Semicolons**: Enforces semicolons (`;`)
+- **120 character line width**: Wider than the common 80/100 - you might prefer shorter lines
+- **2-space indentation**: Uses 2 spaces for tabs
+- **Single quotes**: Prefers `'single'` over `"double"` quotes
+- **Trailing commas**: Adds trailing commas everywhere
+- **Arrow parentheses**: Avoids parens around single args (`x => x` not `(x) => x`)
+
+**ESLint Rules:**
+
+- **Import sorting**: Enforces automatic import organization with specific grouping rules
+- **Lodash restrictions**: Requires direct imports (`import get from 'lodash-es/get'`) instead of full lodash
+- **React hooks deps**: Disables `exhaustive-deps` rule - you might want this stricter
+- **Console statements**: Disallows `console.log` in regular code (only allowed in test files) - some teams prefer
+  warnings instead of errors
+- **Next.js rules**: Enforces Next.js best practices and Core Web Vitals optimization
+- **Tailwind class sorting**: Automatically sorts Tailwind classes (can break dynamic class builds - see Known Issues)
+- **Testing Library rules**: Enforces Testing Library best practices in test files
+
+**File Ignores:**
+
+- Ignores common build directories (`.next`, `coverage`, `.vercel`, etc.)
+- Includes `.github` and `.vitepress` folders (not ignored like most configs)
+
+See the [configuration examples below](#usage) for instructions on overriding these settings to match your team's
+preferences.
+
 ## Installation
 
 Install the package and required peer dependencies:
 
 ```sh
-npm i -D eslint@10 @codfish/eslint-config
-
-# Optionally, you can uninstall plugins or presets you don't need to manage anymore,
-# @codfish/eslint-config includes them all.
-npm uninstall typescript-eslint \
-  eslint-config-prettier \
-  eslint-plugin-jest \
-  eslint-plugin-jsx-a11y \
-  eslint-plugin-prettier \
-  eslint-plugin-react \
-  eslint-plugin-react-hooks \
-  @tanstack/eslint-plugin-query \
-  eslint-plugin-simple-import-sort \
-  eslint-plugin-testing-library \
-  eslint-plugin-yml \
-  @next/eslint-plugin-next \
-  eslint-plugin-next \
-  commitlint \
-  @commitlint/cli \
-  @commitlint/config-conventional \
-  prettier # optional, see note
+npm i -D eslint@9 @codfish/eslint-config
 ```
 
-> [!NOTE]
->
-> ESLint now handles linting and formatting for JavaScript, TypeScript, Markdown, HTML, JSON, and YAML files
-> automatically. If you want to format additional file types (like CSS, SCSS, etc.), you can leave Prettier installed as
-> a dev dependency in your project.
-
 ## Usage
 
 Create an `eslint.config.js` file in your project root:
@@ -107,41 +124,7 @@ export default defineConfig(
 > [!IMPORTANT] If you get ES module errors, you may need to set the `type` field in your `package.json` to `module` or
 > rename your config file to `eslint.config.mjs`.
 
-**Using extends and targetting all files:**
-
-```js
-import codfish from '@codfish/eslint-config';
-
-export default defineConfig({
-  extends: [codfish],
-  rules: {
-    // temporary
-    '@typescript-eslint/no-explicit-any': 'off',
-  },
-});
-```
-
-**Using extends and targetting specific files:**
-
-> [!WARNING]
->
-> **Not recommended.** This will prevent it from using the `files` specified in the main config, so rules around test
-> files, yml files, etc. will not be applied.
-
-```js
-import codfish from '@codfish/eslint-config';
-
-export default defineConfig({
-  files: ['**/*.{js,jsx,ts,tsx}'],
-  extends: [codfish],
-  rules: {
-    // temporary
-    '@typescript-eslint/no-explicit-any': 'off',
-  },
-});
-```
-
-**Not using the `defineConfig` function, just spread the config object:**
+Not using the `defineConfig` function, just spread the config object:
 
 ```js
 import codfish from '@codfish/eslint-config';
@@ -177,11 +160,6 @@ import codfish from '@codfish/eslint-config';
 export default defineConfig(
   codfish,
 
-  // Custom ignores
-  {
-    ignores: ['some-directory'],
-  },
-
   {
     files: ['**/*.spec.{js,ts,jsx,tsx}'],
     rules: {
@@ -203,6 +181,9 @@ export default defineConfig(
   {
     files: ['**/*.{js,jsx,ts,tsx}'],
     rules: {
+      // Customize Tailwind CSS rules
+      'tailwindcss/classnames-order': 'warn',
+      'tailwindcss/no-custom-classname': 'off',
       // Customize Next.js rules
       '@next/next/no-img-element': 'warn',
       '@next/next/no-html-link-for-pages': 'off',
@@ -211,7 +192,7 @@ export default defineConfig(
 );
 ```
 
-**Docker Configuration:**
+### Docker Configuration
 
 For projects leveraging Docker containers, you may want to disable import resolution errors for `node_modules` if
 packages are only available in the container but you're running the linter locally.
@@ -230,24 +211,17 @@ export default defineConfig(
 );
 ```
 
-**dApps Configuration:**
+### dApps Configuration
 
 For decentralized applications that use build artifacts and blockchain globals, use the specialized dApp config. This
 config will set some globals as well as ignore missing build artifact imports. While you obviously need those to run
 your app, sometimes you might want to run the linter in a ci/cd environment and build artifacts might not be present.
 
-```js
-import codfish from '@codfish/eslint-config';
-import dapp from '@codfish/eslint-config/dapp';
-
-export default defineConfig(
-  codfish,
-  dapp,
+You can also directly import the Prettier config:
 
-  {
-    // Your app-specific overrides
-  },
-);
+```js
+import prettierConfig from '@codfish/eslint-config/prettier';
+export default prettierConfig;
 ```
 
 The dApp configuration provides:
@@ -256,80 +230,19 @@ The dApp configuration provides:
 - Import resolution handling for smart contract build artifacts
 - Relaxed rules for generated contract files
 
-### Opinionated Highlights
-
-This configuration includes some opinionated settings that you might want to customize for your project:
-
-**Prettier/Formatting:**
-
-- **Semicolons**: Enforces semicolons (`;`)
-- **120 character line width**: Wider than the common 80/100 - you might prefer shorter lines
-- **2-space indentation**: Uses 2 spaces for tabs
-- **Single quotes**: Prefers `'single'` over `"double"` quotes
-- **Trailing commas**: Adds trailing commas everywhere
-- **Arrow parentheses**: Avoids parens around single args (`x => x` not `(x) => x`)
-
-**ESLint Rules:**
-
-- **Import sorting**: Enforces automatic import organization with specific grouping rules
-- **Lodash restrictions**: Requires direct imports (`import get from 'lodash-es/get'`) instead of full lodash
-- **React hooks deps**: Disables `exhaustive-deps` rule - you might want this stricter
-- **Console statements**: Disallows `console.log` in regular code (only allowed in test files) - some teams prefer
-  warnings instead of errors
-- **Next.js rules**: Enforces Next.js best practices and Core Web Vitals optimization
-- **Testing Library rules**: Enforces Testing Library best practices in test files
-
-**File Ignores:**
-
-- Ignores common build directories (`.next`, `coverage`, `.vercel`, etc.)
-- Includes `.github` and `.vitepress` folders (not ignored like most configs)
-
-See the [configuration examples below](#usage) for instructions on overriding these settings to match your team's
-preferences.
-
-## IDE Setup
-
-### VS Code / Cursor
+## Prettier Configuration
 
-For the best development experience with VS Code or Cursor (or any VS Code-based IDE), install the
-[ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and configure it to
-auto-fix on save:
+**Prettier is included and runs automatically** through ESLint for JavaScript, TypeScript, JSX, and TSX files using the
+[built-in configuration](./prettier.js). **You don't need to install or configure Prettier separately** for basic usage.
 
-Add these settings to your `.vscode/settings.json` or user settings:
+However, if you want to format other file types (like Markdown, JSON, CSS, or YAML) or run Prettier directly, you can
+install it as a dev dependency:
 
-```json
-{
-  "editor.codeActionsOnSave": {
-    "source.fixAll": "explicit"
-  },
-  "eslint.validate": [
-    "javascript",
-    "javascriptreact",
-    "typescript",
-    "typescriptreact",
-    "markdown",
-    "json",
-    "jsonc",
-    "html",
-    "yml",
-    "yaml"
-  ]
-}
+```sh
+npm i -D prettier
 ```
 
-This configuration enables:
-
-- Automatic linting and formatting on save for all supported file types
-- ESLint validation for Markdown, JSON, YAML, and HTML files
-- A unified development experience across your entire codebase
-
-## Prettier Configuration
-
-**Prettier is included and runs automatically** through ESLint for JavaScript, TypeScript, JSX, TSX, Markdown, HTML,
-JSON, and YAML files using the [built-in configuration](./prettier.js). **You don't need to install or configure
-Prettier separately** for these file types.
-
-You can then override the default config by creating your own Prettier config file, or extend the built-in config:
+You can then override the defaults by creating your own Prettier config file, or extend the built-in config:
 
 **Option 1: Extend the built-in config (Recommended)**
 
@@ -380,31 +293,11 @@ export default {
 };
 ```
 
-### Use in combination with prettier-plugin-tailwindcss
-
-```sh
-npm i -D eslint@10 @codfish/eslint-config prettier-plugin-tailwindcss
-```
-
-```js
-// prettier.config.js
-
-import codfish from '@codfish/eslint-config/prettier';
-
-/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */
-export default {
-  ...codfish,
-  plugins: ['prettier-plugin-tailwindcss'],
-  tailwindStylesheet: './src/styles/app.css',
-  tailwindFunctions: ['clsx'], // optional
-};
-```
-
 ## Example scripts
 
 Optionally, you can add these scripts to your `package.json` for common linting workflows:
 
-**Recommended scripts:**
+**Basic scripts (no separate Prettier installation needed):**
 
 ```json
 {
@@ -413,32 +306,24 @@ Optionally, you can add these scripts to your `package.json` for common linting
     "fix": "eslint . --fix"
   },
   "lint-staged": {
-    "*.{js,jsx,ts,tsx,md,json,yml,yaml,html}": ["eslint --fix"]
+    "*.{js,jsx,ts,tsx}": ["eslint --fix"]
   }
 }
 ```
 
-> [!NOTE]
->
-> ESLint now handles linting and formatting for JavaScript, TypeScript, Markdown, HTML, JSON, and YAML files. You don't
-> need to run Prettier separately for these file types.
-
-**With Prettier for other file types (CSS, SCSS, etc.):**
-
-If you want to format additional file types not covered by ESLint (like CSS, SCSS), you can install Prettier and add
-these scripts:
+**With Prettier installed separately (for formatting non-JS files):**
 
 ```json
 {
   "scripts": {
     "lint": "eslint .",
     "fix": "eslint . --fix",
-    "format": "prettier --write \"**/*.{css,scss}\"",
+    "format": "prettier --config ./node_modules/@codfish/eslint-config/prettier.js --write \"**/*.{json,css,md}\"",
     "check": "npm run lint && npm run format -- --check --no-write"
   },
   "lint-staged": {
-    "*.{js,jsx,ts,tsx,md,json,yml,yaml,html}": ["eslint --fix"],
-    "*.{css,scss}": ["prettier --write"]
+    "*.{js,jsx,ts,tsx}": ["eslint --fix"],
+    "*.{json,css,md}": ["prettier --write --config ./node_modules/@codfish/eslint-config/prettier.js"]
   }
 }
 ```
@@ -505,72 +390,23 @@ jobs:
           --verbose
 ```
 
-## Upgrading to ESLint 10
-
-This package now requires **ESLint 10.0.0 or higher** and **Node.js v20.19.0 or higher**.
-
-### Breaking Changes in ESLint 10
-
-- **ESLint 10 Required**: Minimum ESLint version is now 10.0.0
-- **Node.js v20.19.0+**: Minimum Node.js version increased from v20.0.0 to v20.19.0
-- **Legacy eslintrc removed**: ESLint 10 completely removes the deprecated eslintrc config system (this package already
-  uses flat config)
-- **Improved JSX tracking**: ESLint 10 properly tracks JSX references in scope analysis, which may surface previously
-  hidden unused import warnings in React files
-- **New recommended rules**: Three new rules enabled in `eslint:recommended`:
-  - `no-unassigned-vars` - Disallow variables that are assigned but never used
-  - `no-useless-assignment` - Disallow assignments that don't change the value
-  - `preserve-caught-error` - Enforce that caught errors are not reassigned
-
-### Migration Steps
-
-1. **Update Node.js** (if needed):
-
-   ```sh
-   node --version  # Ensure you're on v20.19.0+ or v22.13.0+
-   ```
+## Known issues
 
-2. **Update ESLint and this config**:
+> https://github.com/francoismassart/eslint-plugin-tailwindcss/issues/149
 
-   ```sh
-   npm install --save-dev eslint@10 @codfish/eslint-config@latest
-   ```
+When building dynamic classes, the auto sorting of tailwind classes can break things so beware.
 
-3. **Install dependencies with legacy peer deps** (required until all plugins update):
+To avoid this happening you can re-wrap the dynamic class expression like so:
 
-   ```sh
-   npm install --legacy-peer-deps
-   ```
-
-   This is necessary because some ESLint plugins haven't updated their `peerDependencies` to include ESLint 10 yet. The
-   plugins still work correctly with ESLint 10.
-
-4. **Run linting** and check for new violations:
-
-   ```sh
-   npm run lint
-   ```
-
-5. **Review React files** for newly reported unused imports. ESLint 10's improved JSX tracking may flag imports that
-   were previously ignored but are actually used in JSX.
-
-### What Changed
-
-Since this package already uses ESLint's flat config format (the biggest change in ESLint 9), the upgrade to ESLint 10
-is relatively smooth. The main changes are:
-
-- ✅ Flat config format (already implemented)
-- ✅ Plugin configurations updated to ESLint 10-compatible versions
-- ✅ All tests passing with ESLint 10
-- ⚠️ Some plugins show peer dependency warnings but work correctly (ecosystem is catching up)
-
-For more details, see the [ESLint 10 Migration Guide](https://eslint.org/docs/latest/use/migrate-to-10.0.0).
+```vue-html
+class="`p-0 ${`tw-border-${accentColor}`}`"
+```
 
 ## Migration from Legacy Config
 
 If you're upgrading from an older version that used Airbnb presets:
 
-1. **Update to ESLint v10+**: `npm install --save-dev eslint@10`
+1. **Update to ESLint v9+**: `npm install --save-dev eslint@9`
 2. **Switch to flat config**: Replace `.eslintrc.js` with `eslint.config.js`
 3. **Use import syntax**: Change from `require()` to `import` statements
 4. **Remove explicit React config**: React support is now automatically detected

package/dist/dapp.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("eslint/config").Config[];
+declare const _default: import("eslint").Linter.Config<import("eslint").Linter.RulesRecord>[];
 export default _default;
 //# sourceMappingURL=dapp.d.ts.map

package/dist/docker.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("eslint/config").Config[];
+declare const _default: import("eslint").Linter.Config<import("eslint").Linter.RulesRecord>[];
 export default _default;
 //# sourceMappingURL=docker.d.ts.map

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("eslint/config").Config[];
+declare const _default: import("eslint").Linter.Config<import("eslint").Linter.RulesRecord>[];
 export default _default;
 //# sourceMappingURL=index.d.ts.map

package/dist/rules/config-files.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("eslint/config").Config[];
+declare const _default: import("eslint").Linter.Config<import("eslint").Linter.RulesRecord>[];
 export default _default;
 //# sourceMappingURL=config-files.d.ts.map

package/dist/rules/jest.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("eslint").Linter.Config<import("eslint").Linter.RulesRecord>[];
+export default _default;
+//# sourceMappingURL=jest.d.ts.map

package/dist/rules/jest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"jest.d.ts","sourceRoot":"","sources":["../../rules/jest.js"],"names":[],"mappings":""}

package/dist/rules/react.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("eslint/config").Config[];
+declare const _default: import("eslint").Linter.Config<import("eslint").Linter.RulesRecord>[];
 export default _default;
 //# sourceMappingURL=react.d.ts.map

package/dist/rules/vitest.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("eslint").Linter.Config<import("eslint").Linter.RulesRecord>[];
+export default _default;
+//# sourceMappingURL=vitest.d.ts.map

package/dist/rules/vitest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vitest.d.ts","sourceRoot":"","sources":["../../rules/vitest.js"],"names":[],"mappings":""}

package/dist/utils.d.ts

@@ -1,8 +1,3 @@
-/**
- * Get the version of a dependency from the consumer's package.json.
- * Returns the major version as a string (e.g. '18', '19'), or null if not found.
- */
-export function getDepVersion(dep: any): string | null;
 export function hasLocalConfig(moduleName: any, searchOptions?: {}): boolean;
 export function hasDep(props: any): boolean;
 export function hasDevDep(props: any): boolean;

package/dist/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../utils.js"],"names":[],"mappings":"AAyBA;;;GAGG;AACH,uDAKC;AAED,6EAKC;AA1BgC,4CAA+D;AAA/D,+CAA+D;AAA/D,gDAA+D;AAMzF,8CAA8E;AAE9E,yDAAmE"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../utils.js"],"names":[],"mappings":"AA4BA,6EAKC;AAfgC,4CAA+D;AAA/D,+CAA+D;AAA/D,gDAA+D;AAMzF,8CAA8E;AAE9E,yDAAmE"}