@codfish/eslint-config 0.0.0-PR-124--a65acf5 → 0.0.0-PR-124--0da7f69

package/README.md

@@ -1,6 +1,7 @@
 # @codfish/eslint-config
 
-> Modern ESLint configuration with TypeScript, React, and testing framework support using ESLint v9+ 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)
@@ -8,22 +9,26 @@
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
 
+<!-- prettier-ignore-start -->
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 ## Table of Contents
 
 - [Features](#features)
   - [Automatic Configuration](#automatic-configuration)
+  - [Opinionated Highlights](#opinionated-highlights)
 - [Installation](#installation)
 - [Usage](#usage)
-  - [Prettier](#prettier)
-  - [With dApps](#with-dapps)
   - [Docker Configuration](#docker-configuration)
-  - [Blockchain/dApp Configuration](#blockchaindapp-configuration)
+  - [dApps Configuration](#dapps-configuration)
+- [Prettier Configuration](#prettier-configuration)
+- [Example scripts](#example-scripts)
+- [Commitlint Configuration](#commitlint-configuration)
 - [Known issues](#known-issues)
 - [Migration from Legacy Config](#migration-from-legacy-config)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
+<!-- prettier-ignore-end -->
 
 ## Features
 
@@ -31,7 +36,11 @@
 - **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
+- **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
@@ -42,16 +51,52 @@
 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
-- **Prettier**: Loads your project's Prettier config or falls back to built-in defaults
+- **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 @codfish/eslint-config eslint@9
+npm i -D eslint@9 @codfish/eslint-config
 ```
 
 ## Usage
@@ -62,54 +107,89 @@ Create an `eslint.config.js` file in your project root:
 import { defineConfig } from 'eslint/config';
 import codfish from '@codfish/eslint-config';
 
-export default defineConfig([
+export default defineConfig(
+  codfish,
+
   {
-    files: ['**/*.{js,jsx,ts,tsx}'],
-    extends: [codfish],
-    // Your overrides here
+    rules: {
+      // Relax some rules for your project
+      'react/prop-types': 'off',
+      'import/prefer-default-export': 'off',
+      '@typescript-eslint/explicit-function-return-type': 'warn',
+    },
   },
-]);
+);
 ```
 
 > [!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`.
 
-### Prettier
-
-Prettier is automatically run through eslint with the [default configuration](./prettier.js). You can optionally add a
-prettier configuration file in the root of your project and it will take precedence over the
-[built-in config](./prettier.js). You can also choose to extend the Prettier config:
-
-**prettier.config.js**
+Not using the `defineConfig` function, just spread the config object:
 
 ```js
-import codfishConfig from '@codfish/eslint-config/prettier.js';
+import codfish from '@codfish/eslint-config';
 
-/**
- * @see https://prettier.io/docs/en/configuration.html
- * @type {import("prettier").Config}
- */
-const config = {
-  ...codfishConfig,
-  // your overrides here
-};
+export default [
+  ...codfish,
 
-export default config;
+  {
+    // Your project-specific overrides
+    rules: {
+      // Override or add specific rules
+      'no-console': 'warn',
+      '@typescript-eslint/no-unused-vars': 'error',
+    },
+  },
+];
 ```
 
-### With dApps
+**Use the config without any overrides:**
 
-Similar to the issues with docker, there may be rules you want to adjust for dApp's. 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';
 
-**Note**: The dApp config also includes the `import/no-unresolved` rule found in the docker config.
+export default codfish;
+```
 
-You can also directly import the Prettier config:
+**Framework-specific customizations:**
 
 ```js
-import prettierConfig from '@codfish/eslint-config/prettier';
-export default prettierConfig;
+import { defineConfig } from 'eslint/config';
+import codfish from '@codfish/eslint-config';
+
+export default defineConfig(
+  codfish,
+
+  {
+    files: ['**/*.spec.{js,ts,jsx,tsx}'],
+    rules: {
+      // Allow any in test files
+      '@typescript-eslint/no-explicit-any': 'off',
+      // Relax Testing Library rules if needed
+      'testing-library/prefer-screen-queries': 'warn',
+    },
+  },
+
+  {
+    files: ['**/*.config.{js,ts}'],
+    rules: {
+      // Allow require in config files
+      '@typescript-eslint/no-require-imports': 'off',
+    },
+  },
+
+  {
+    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',
+    },
+  },
+);
 ```
 
 ### Docker Configuration
@@ -131,22 +211,17 @@ export default defineConfig(
 );
 ```
 
-### Blockchain/dApp Configuration
-
-For decentralized applications that use build artifacts and blockchain globals, use the specialized dApp config:
+### dApps Configuration
 
-```js
-import codfish from '@codfish/eslint-config';
-import dappConfig from '@codfish/eslint-config/dapp';
+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.
 
-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:
@@ -155,6 +230,166 @@ The dApp configuration provides:
 - Import resolution handling for smart contract build artifacts
 - Relaxed rules for generated contract files
 
+## Prettier Configuration
+
+**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.
+
+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:
+
+```sh
+npm i -D prettier
+```
+
+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)**
+
+Create a `prettier.config.js` file in your project root:
+
+```js
+// prettier.config.js
+
+import codfishConfig from '@codfish/eslint-config/prettier';
+
+/**
+ * @see https://prettier.io/docs/en/configuration.html
+ * @type {import("prettier").Config}
+ */
+export default {
+  ...codfishConfig,
+
+  // Override specific settings
+  printWidth: 80,
+  singleQuote: false,
+  tabWidth: 4,
+  trailingComma: 'none',
+};
+```
+
+**Option 2: Completely custom config**
+
+This config will completely override the built-in config.
+
+```js
+// prettier.config.js
+
+/**
+ * @see https://prettier.io/docs/en/configuration.html
+ * @type {import("prettier").Config}
+ */
+export default {
+  printWidth: 100,
+  tabWidth: 2,
+  useTabs: false,
+  semi: true,
+  singleQuote: true,
+  trailingComma: 'all',
+  bracketSpacing: true,
+  bracketSameLine: false,
+  arrowParens: 'avoid',
+  proseWrap: 'always',
+};
+```
+
+## Example scripts
+
+Optionally, you can add these scripts to your `package.json` for common linting workflows:
+
+**Basic scripts (no separate Prettier installation needed):**
+
+```json
+{
+  "scripts": {
+    "lint": "eslint .",
+    "fix": "eslint . --fix"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": ["eslint --fix"]
+  }
+}
+```
+
+**With Prettier installed separately (for formatting non-JS files):**
+
+```json
+{
+  "scripts": {
+    "lint": "eslint .",
+    "fix": "eslint . --fix",
+    "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}": ["eslint --fix"],
+    "*.{json,css,md}": ["prettier --write --config ./node_modules/@codfish/eslint-config/prettier.js"]
+  }
+}
+```
+
+## Commitlint Configuration
+
+Extend from the shared codfish commitlint config.
+
+```js
+import codfishConfig from '@codfish/eslint-config/commitlint.js';
+
+export default Object.assign(codfishConfig, {
+  // your overrides here
+  rules: {
+    'scope-case': [1],
+  },
+});
+```
+
+**Or just reference it in your package.json:**
+
+```json
+{
+  "commitlint": {
+    "extends": ["./node_modules/@codfish/eslint-config/commitlint.js"]
+  }
+}
+```
+
+Run commitlint in your CI to validate your commits:
+
+> [!NOTE]
+>
+> If you have @codfish/eslint-config as a dev dependency, and a commitlint config in your project, you can just call
+> `npx commitlint` in your CI and it will use the shared config.
+>
+> - You just need to setup node & install your dependencies before running commitlint.
+> - Don't forget to set the `fetch-depth` to `0` to ensure commitlint can work properly.
+
+```yaml
+# .github/workflows/validate.yml
+
+on: pull_request_target
+
+jobs:
+  validate:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v5
+        with:
+          ref: ${{ github.event.pull_request.head.sha || github.ref }}
+          fetch-depth: 0 # Important for commitlint to work
+
+      - uses: actions/setup-node@v5
+        with:
+          node-version: lts/*
+          registry-url: https://registry.npmjs.org
+
+      - run: npm ci # or npm install
+
+      - run:
+          npx commitlint --from ${{ github.event.pull_request.base.sha }} --to ${{ github.event.pull_request.head.sha }}
+          --verbose
+```
+
 ## Known issues
 
 > https://github.com/francoismassart/eslint-plugin-tailwindcss/issues/149

package/index.js

@@ -2,6 +2,8 @@ import js from '@eslint/js';
 import { defineConfig } from 'eslint/config';
 import prettier from 'eslint-plugin-prettier/recommended';
 import simpleImportSortPlugin from 'eslint-plugin-simple-import-sort';
+import tailwindPlugin from 'eslint-plugin-tailwindcss';
+import ymlPlugin from 'eslint-plugin-yml';
 import globals from 'globals';
 import tseslint from 'typescript-eslint';
 
@@ -16,7 +18,7 @@ const useBuiltinPrettierConfig = !hasLocalConfig('prettier');
 
 /**
  * Modern ESLint configuration with dynamic feature detection
- * Supports TypeScript, React, Jest, Vitest, and Prettier
+ * Supports TypeScript, React, Jest, Vitest, Prettier, YAML, Tailwind CSS, and Next.js
  */
 export default defineConfig([
   // Base JavaScript configuration
@@ -108,16 +110,49 @@ export default defineConfig([
       '**/coverage/',
       'cypress/screenshots/',
       'cypress/videos/',
-      'storybook-static/',
+      'storybook-static',
+      '.nuxt',
+      '.svelte-kit',
+      '.docusaurus',
+      '.astro',
+      '.output',
+      '**/out/',
+      '.vite',
+      '.parcel-cache',
+      '.webpack',
+      '.turbo',
+      '.nyc_output',
+      'playwright-report',
+      'cypress/downloads/',
+      'cypress/reports/',
+      '.serverless',
+      '.netlify',
+      '.wrangler',
+      '.firebase',
+      'android',
+      'ios',
+      '.expo',
+      '**/tmp/',
+      '**/temp/',
+      '.tmp',
+      '.eslintcache',
+      '*.tsbuildinfo',
     ],
   },
 
   // Configuration files (eslint, prettier, etc.)
   configFilesConfig,
 
+  // YML files
+  ymlPlugin.configs['flat/standard'],
+  ymlPlugin.configs['flat/prettier'], // handles conflicting rules with the yml plugin
+
   // React configuration (dynamic)
   ifAnyDep('react', reactConfig, []),
 
+  // Tailwind CSS configuration (dynamic)
+  ifAnyDep('tailwindcss', tailwindPlugin.configs['flat/recommended'], []),
+
   // Jest OR Vitest configuration (dynamic)
   ifAnyDep('jest', jestConfig, []),
 

package/package.json

@@ -1,8 +1,27 @@
 {
   "name": "@codfish/eslint-config",
-  "version": "0.0.0-PR-124--a65acf5",
+  "version": "0.0.0-PR-124--0da7f69",
   "description": "Modern ESLint configuration with TypeScript, React, and testing framework support.",
   "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/codfish/eslint-config.git"
+  },
+  "keywords": [
+    "eslint",
+    "eslintconfig",
+    "config",
+    "codfish",
+    "prettier",
+    "javascript",
+    "styleguide"
+  ],
+  "author": "Chris O'Donnell <chris@codfish.dev> (https://www.codfish.dev)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/codfish/eslint-config/issues"
+  },
+  "homepage": "https://github.com/codfish/eslint-config#readme",
   "main": "index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -28,50 +47,10 @@
     "dev": "tsc --watch",
     "type-check": "tsc --noEmit",
     "lint": "eslint .",
-    "fix": "prettier --write \"**/*.{json,css,scss,md}\" && npm run lint -- --fix",
+    "fix": "prettier --write \"**/*.{json,css,scss,md}\" --config ./prettier.js && npm run lint -- --fix",
     "prepublishOnly": "npm run build",
     "prepare": "husky"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/codfish/eslint-config.git"
-  },
-  "keywords": [
-    "eslint",
-    "eslintconfig",
-    "config",
-    "codfish",
-    "prettier",
-    "javascript",
-    "styleguide"
-  ],
-  "author": "Chris O'Donnell <chris@codfish.dev> (https://www.codfish.dev)",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/codfish/eslint-config-codfish/issues"
-  },
-  "homepage": "https://github.com/codfish/eslint-config-codfish#readme",
-  "peerDependencies": {
-    "eslint": ">= 9"
-  },
-  "peerDependenciesMeta": {
-    "typescript": {
-      "optional": true
-    }
-  },
-  "engines": {
-    "node": ">=20.0.0"
-  },
-  "files": [
-    "dist",
-    "rules",
-    "index.js",
-    "prettier.js",
-    "dapp.js",
-    "docker.js",
-    "utils.js",
-    "commitlint.js"
-  ],
   "dependencies": {
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
@@ -85,6 +64,10 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-tailwindcss": "^3.18.2",
+    "eslint-plugin-testing-library": "^7.1.0",
+    "eslint-plugin-yml": "^1.16.0",
+    "@next/eslint-plugin-next": "^15.1.6",
     "globals": "^16.4.0",
     "lodash.has": "^4.5.2",
     "prettier": "^3.6.2",
@@ -98,13 +81,34 @@
     "lint-staged": "^16.1.6",
     "typescript": "^5.9.2"
   },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "files": [
+    "dist",
+    "rules",
+    "index.js",
+    "prettier.js",
+    "dapp.js",
+    "docker.js",
+    "utils.js",
+    "commitlint.js"
+  ],
+  "peerDependencies": {
+    "eslint": ">= 9"
+  },
+  "peerDependenciesMeta": {
+    "typescript": {
+      "optional": true
+    }
+  },
   "commitlint": {
     "extends": [
       "./commitlint"
     ]
   },
   "lint-staged": {
-    "*.{json,yml}": [
+    "*.{json,css,md,yml}": [
       "prettier --write --config ./prettier.js"
     ],
     "*.md": [

package/rules/jest.js

@@ -1,9 +1,12 @@
 import { defineConfig } from 'eslint/config';
 import jest from 'eslint-plugin-jest';
+import testingLibrary from 'eslint-plugin-testing-library';
+
+import { ifAnyDep } from '../utils.js';
 
 /**
  * Jest ESLint configuration for flat config format
- * Includes Jest-specific rules and globals for test files
+ * Includes Jest-specific rules, globals, and Testing Library rules for test files
  */
 export default defineConfig([
   {
@@ -20,5 +23,13 @@ export default defineConfig([
     ],
 
     ...jest.configs['flat/recommended'],
+
+    ...ifAnyDep('react-testing-library', testingLibrary.configs['flat/react'], {}),
+    ...ifAnyDep('vue-testing-library', testingLibrary.configs['flat/vue'], {}),
+
+    rules: {
+      'no-console': 'off',
+      ...ifAnyDep('tailwindcss', { 'tailwindcss/no-custom-classname': 'off' }, {}),
+    },
   },
 ]);

package/rules/react.js

@@ -1,9 +1,12 @@
+import nextPlugin from '@next/eslint-plugin-next';
 import { defineConfig } from 'eslint/config';
 import jsxA11y from 'eslint-plugin-jsx-a11y';
 import react from 'eslint-plugin-react';
 import reactHooks from 'eslint-plugin-react-hooks';
 import globals from 'globals';
 
+import { ifAnyDep } from '../utils.js';
+
 /**
  * React ESLint configuration. Includes React, React Hooks, and JSX accessibility rules.
  *
@@ -31,6 +34,18 @@ export default defineConfig([
   // React Hooks configuration
   reactHooks.configs['recommended-latest'],
 
+  // Next.js configuration (dynamic)
+  ifAnyDep(
+    'next',
+    {
+      ...nextPlugin.flatConfig.recommended,
+      ...nextPlugin.flatConfig.coreWebVitals,
+
+      name: 'codfish/next',
+    },
+    {},
+  ),
+
   {
     rules: {
       'react-hooks/exhaustive-deps': 'off',

package/rules/vitest.js

@@ -1,10 +1,13 @@
 import vitest from '@vitest/eslint-plugin';
 import { defineConfig } from 'eslint/config';
+import testingLibrary from 'eslint-plugin-testing-library';
 import globals from 'globals';
 
+import { ifAnyDep } from '../utils.js';
+
 /**
  * Vitest ESLint configuration for flat config format
- * Includes Vitest-specific rules and globals for test files
+ * Includes Vitest-specific rules, globals, and Testing Library rules for test files
  */
 export default defineConfig([
   {
@@ -17,6 +20,9 @@ export default defineConfig([
 
     ...vitest.configs.recommended,
 
+    ...ifAnyDep('react-testing-library', testingLibrary.configs['flat/react'], {}),
+    ...ifAnyDep('vue-testing-library', testingLibrary.configs['flat/vue'], {}),
+
     name: 'codfish/vitest',
 
     languageOptions: {
@@ -28,7 +34,7 @@ export default defineConfig([
 
     rules: {
       'no-console': 'off',
-      'tailwindcss/no-custom-classname': 'off',
+      ...ifAnyDep('tailwindcss', { 'tailwindcss/no-custom-classname': 'off' }, {}),
     },
   },
 ]);