@viclafouch/eslint-config-viclafouch 4.22.0 → 4.22.1-beta.1

package/README.md

@@ -18,13 +18,14 @@ These are the ESLint and Prettier settings for a Next.js project ⚡️
   - [If you want to enable imports sorting](#if-you-want-to-enable-imports-sorting)
   - [If you use Next.js](#if-you-use-nextjs)
   - [If you use React.js](#if-you-use-reactjs)
+  - [If you use Tailwind CSS v4](#if-you-use-tailwind-css-v4)
   - [If you want to use Prettier](#if-you-want-to-use-prettier)
   - [If you use VS Code](#if-you-use-vs-code)
 
 ## What it does
 
 * Lints JavaScript / TypeScript based on the latest standards
-* Multiple configs `react` `hooks` `next`..
+* Multiple configs `react` `hooks` `next` `tailwindcss`..
 * Shared `tsconfig.json`
 * Fixes issues and formatting errors with Prettier
 * Check for accessibility rules on JSX elements.
@@ -39,29 +40,32 @@ These are the ESLint and Prettier settings for a Next.js project ⚡️
 npm i -D @viclafouch/eslint-config-viclafouch
 ```
 
-1. Create a `.eslintrc` file in the root of your project's directory (it should live where package.json does). Your `.eslintrc` file should look like this:
-
-2. Extends your config with the minimal base of @viclafouch config :
+3. Make sure your `package.json` has `"type": "module"`:
 
 ```json
 {
-  "extends": [
-    "@viclafouch/eslint-config-viclafouch"
-  ]
+  "name": "your-project",
+  "type": "module",
+  ...
 }
 ```
 
-or js version for `.eslintrc.js` file:
+4. Create a `eslint.config.js` file in the root of your project's directory (it should live where package.json does).
+
+5. Extends your config with the minimal base of @viclafouch config :
 
 ```js
+import { baseConfig } from '@viclafouch/eslint-config-viclafouch'
+
 /**
  * @type {import("eslint").Linter.Config}
  */
-module.exports = {
-  extends: [
-    "@viclafouch/eslint-config-viclafouch"
-  ]
-}
+export default [
+  ...baseConfig,
+  {
+    ignores: ['**/node_modules/**']
+  }
+]
 ```
 
 ### Scripts
@@ -71,7 +75,7 @@ You can add two scripts to your package.json to lint and/or fix your code:
 ```json
 {
   "scripts": {
-    "lint": "eslint .",
+    "lint": "eslint",
     "lint:fix": "npm run lint -- --fix",
   }
 }
@@ -94,31 +98,18 @@ First, extend your current config file `tsconfig.json` with this following snipp
 Then, add the TypeScript Eslint rules to your `.eslintrc` file:
 
 ```js
-{
-  "extends": [
-    "@viclafouch/eslint-config-viclafouch",
-    "@viclafouch/eslint-config-viclafouch/typescript"
-  ]
-}
-```
-
-or js version for `.eslintrc.js` file:
+import { baseConfig, typescriptConfig } from '@viclafouch/eslint-config-viclafouch'
 
-```js
 /**
  * @type {import("eslint").Linter.Config}
  */
-module.exports = {
-  extends: [
-    '@viclafouch/eslint-config-viclafouch',
-    '@viclafouch/eslint-config-viclafouch/typescript'
-  ],
-  parserOptions: {
-    project: true,
-    tsconfigRootDir: __dirname
-  },
-  root: true
-}
+export default [
+  ...baseConfig,
+  ...typescriptConfig,
+  {
+    ignores: ['**/node_modules/**']
+  }
+]
 ```
 
 ### Better typing
@@ -141,7 +132,7 @@ You can add two scripts to your package.json to lint and/or fix your code:
 ```json
 {
   "scripts": {
-    "lint": "tsc --noEmit && eslint . --ext .js,.jsx,.ts,.tsx",
+    "lint": "tsc --noEmit && eslint",
     "lint:fix": "npm run lint -- --fix",
   },
 }
@@ -152,25 +143,37 @@ You can add two scripts to your package.json to lint and/or fix your code:
 If you want to sort your imports using your alias at the same time from your `jsonfig.json` or `tsconfig.json` file.
 
 ```js
-{
-  "extends": [
-    "@viclafouch/eslint-config-viclafouch",
-    "@viclafouch/eslint-config-viclafouch/imports"
-  ]
-}
+import { baseConfig, importsConfig } from '@viclafouch/eslint-config-viclafouch'
+
+/**
+ * @type {import("eslint").Linter.Config}
+ */
+export default [
+  ...baseConfig,
+  ...importsConfig,
+  {
+    ignores: ['**/node_modules/**']
+  }
+]
 ```
 
 ## If you use Next.js
 
-You can also add additional rules for Next.js. It includes the following configurations : `@viclafouch/eslint-config-viclafouch/react`, `@viclafouch/eslint-config-viclafouch/hooks` and Next.js specific rules.
+You can also add additional rules for Next.js. It includes the following configurations : `reactConfig`, `hooksConfig` and Next.js specific rules.
 
 ```js
-{
-  "extends": [
-    "@viclafouch/eslint-config-viclafouch",
-    "@viclafouch/eslint-config-viclafouch/next"
-  ]
-}
+import { baseConfig, nextConfig } from '@viclafouch/eslint-config-viclafouch'
+
+/**
+ * @type {import("eslint").Linter.Config}
+ */
+export default [
+  ...baseConfig,
+  ...nextConfig,
+  {
+    ignores: ['**/node_modules/**', '**/dist/**', '**/.next/**']
+  }
+]
 ```
 
 ## If you use React.js
@@ -178,30 +181,70 @@ You can also add additional rules for Next.js. It includes the following configu
 You can also add additional rules for only React.js ecosystem (without Next.js).
 
 ```js
-{
-  "extends": [
-    "@viclafouch/eslint-config-viclafouch",
-    "@viclafouch/eslint-config-viclafouch/react",
-    "@viclafouch/eslint-config-viclafouch/hooks"
-  ]
-}
+import { baseConfig, hooksConfig, reactConfig } from '@viclafouch/eslint-config-viclafouch'
+
+/**
+ * @type {import("eslint").Linter.Config}
+ */
+export default [
+  ...baseConfig,
+  ...hooksConfig,
+  ...reactConfig,
+  {
+    ignores: ['**/node_modules/**']
+  }
+]
 ```
 
+## If you use Tailwind CSS v4
+
+You can add linting rules for Tailwind CSS v4 using `eslint-plugin-better-tailwindcss`. You need to provide the path to your CSS entry file via the `entryPoint` option.
+
+```js
+import { baseConfig, betterTailwindcssConfig } from '@viclafouch/eslint-config-viclafouch'
+
+/**
+ * @type {import("eslint").Linter.Config}
+ */
+export default [
+  ...baseConfig,
+  ...betterTailwindcssConfig({
+    entryPoint: 'src/global.css'
+  }),
+  {
+    ignores: ['**/node_modules/**']
+  }
+]
+```
 
 ## If you want to use Prettier
 
-Be sure to add the prettier config at the end of your `extends` array.
+Be sure for the prettier config to be the last one.
 
 ```js
-{
-  "extends": [
-    "@viclafouch/eslint-config-viclafouch",
-    "@viclafouch/eslint-config-viclafouch/imports",
-    "@viclafouch/eslint-config-viclafouch/react",
-    "@viclafouch/eslint-config-viclafouch/hooks",
-    "@viclafouch/eslint-config-viclafouch/prettier" // be sure to be the last
-  ]
-}
+import {
+  baseConfig,
+  hooksConfig,
+  importsConfig,
+  prettierConfig,
+  reactConfig,
+  typescriptConfig
+} from '@viclafouch/eslint-config-viclafouch'
+
+/**
+ * @type {import("eslint").Linter.Config}
+ */
+export default [
+  ...baseConfig,
+  ...reactConfig,
+  ...hooksConfig,
+  ...importsConfig,
+  ...typescriptConfig,
+  ...prettierConfig,
+  {
+    ignores: ['**/node_modules/**', '**/dist/**']
+  }
+]
 ```
 
 ## If you use VS Code

package/base.mjs

@@ -0,0 +1,36 @@
+import eslintPluginUnicorn from 'eslint-plugin-unicorn'
+import globals from 'globals'
+import bestPracticesConfig from './rules/best-practices.mjs'
+import errorConfig from './rules/errors.mjs'
+import es6Config from './rules/es6.mjs'
+import importsConfig from './rules/imports.mjs'
+import nodeConfig from './rules/node.mjs'
+import styleConfig from './rules/style.mjs'
+import variablesConfig from './rules/variables.mjs'
+
+/**
+ * @type {import("eslint").Linter.Config}
+ */
+export default [
+  {
+    files: ['**/*.{js,mjs,cjs,jsx,ts,tsx}'],
+    linterOptions: {
+      reportUnusedDisableDirectives: 'error'
+    }
+  },
+  {
+    languageOptions: {
+      globals: globals.builtin
+    },
+    plugins: {
+      unicorn: eslintPluginUnicorn
+    }
+  },
+  bestPracticesConfig,
+  nodeConfig,
+  errorConfig,
+  importsConfig,
+  styleConfig,
+  variablesConfig,
+  es6Config
+]

package/better-tailwindcss.mjs

@@ -0,0 +1,32 @@
+import betterTailwindcss from 'eslint-plugin-better-tailwindcss'
+
+/**
+ * @typedef {Object} BetterTailwindcssOptions
+ * @property {string} entryPoint - Path to the CSS entry file (Tailwind v4)
+ */
+
+/**
+ * Creates ESLint flat config for eslint-plugin-better-tailwindcss (Tailwind v4)
+ * @param {BetterTailwindcssOptions} options
+ * @returns {import("eslint").Linter.Config[]}
+ */
+export default function betterTailwindcssConfig({ entryPoint }) {
+  const recommendedRules = betterTailwindcss.configs?.recommended?.rules ?? {}
+
+  return [
+    {
+      files: ['**/*.{js,jsx,ts,tsx}'],
+      plugins: {
+        'better-tailwindcss': betterTailwindcss
+      },
+      settings: {
+        'better-tailwindcss': {
+          entryPoint
+        }
+      },
+      rules: {
+        ...recommendedRules
+      }
+    }
+  ]
+}

package/eslint.config.mjs

@@ -1,5 +1,4 @@
-import baseConfig from './index.mjs'
-import prettierConfig from './prettier.mjs'
+import { baseConfig, prettierConfig } from './index.mjs'
 
 /**
  * @type {import("eslint").Linter.Config}

package/index.d.ts

@@ -0,0 +1,18 @@
+import type { Linter } from 'eslint'
+
+export declare const baseConfig: Linter.Config[]
+export declare const typescriptConfig: Linter.Config[]
+export declare const reactConfig: Linter.Config[]
+export declare const nextConfig: Linter.Config[]
+export declare const prettierConfig: Linter.Config[]
+export declare const hooksConfig: Linter.Config[]
+export declare const importsConfig: Linter.Config[]
+
+export interface BetterTailwindcssOptions {
+  /** Path to the CSS entry file (Tailwind v4) */
+  entryPoint: string
+}
+
+export declare function betterTailwindcssConfig(
+  options: BetterTailwindcssOptions
+): Linter.Config[]

package/index.mjs

@@ -1,36 +1,8 @@
-import eslintPluginUnicorn from 'eslint-plugin-unicorn'
-import globals from 'globals'
-import bestPracticesConfig from './rules/best-practices.mjs'
-import errorConfig from './rules/errors.mjs'
-import es6Config from './rules/es6.mjs'
-import importsConfig from './rules/imports.mjs'
-import nodeConfig from './rules/node.mjs'
-import styleConfig from './rules/style.mjs'
-import variablesConfig from './rules/variables.mjs'
-
-/**
- * @type {import("eslint").Linter.Config}
- */
-export default [
-  {
-    files: ['**/*.{js,mjs,cjs,jsx,ts,tsx}'],
-    linterOptions: {
-      reportUnusedDisableDirectives: 'error'
-    }
-  },
-  {
-    languageOptions: {
-      globals: globals.builtin
-    },
-    plugins: {
-      unicorn: eslintPluginUnicorn
-    }
-  },
-  bestPracticesConfig,
-  nodeConfig,
-  errorConfig,
-  importsConfig,
-  styleConfig,
-  variablesConfig,
-  es6Config
-]
+export { default as baseConfig } from './base.mjs'
+export { default as typescriptConfig } from './typescript.mjs'
+export { default as reactConfig } from './react.mjs'
+export { default as nextConfig } from './next.mjs'
+export { default as prettierConfig } from './prettier.mjs'
+export { default as hooksConfig } from './hooks.mjs'
+export { default as importsConfig } from './imports.mjs'
+export { default as betterTailwindcssConfig } from './better-tailwindcss.mjs'

package/package.json

@@ -1,8 +1,16 @@
 {
   "name": "@viclafouch/eslint-config-viclafouch",
-  "version": "4.22.0",
+  "version": "4.22.1-beta.1",
   "description": "ESLint and Prettier Config from Victor de la Fouchardiere",
-  "main": "index.js",
+  "type": "module",
+  "main": "./index.mjs",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.mjs"
+    }
+  },
   "keywords": [
     "javascript",
     "ecmascript",
@@ -37,23 +45,24 @@
     "@total-typescript/ts-reset": "^0.6.1",
     "app-root-path": "^3.1.0",
     "babel-loader": "^10.0.0",
+    "eslint": ">= 9",
     "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-better-tailwindcss": "^3.8.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-promise": "^7.2.1",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-unicorn": "^58.0.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-testing-library": "^7.1.1",
+    "eslint-plugin-unicorn": "^58.0.0",
     "get-tsconfig": "^4.10.0",
     "globals": "^16.0.0",
     "prettier": ">= 3",
     "prettier-plugin-curly": "^0.3.1",
     "typescript": ">= 5",
-    "typescript-eslint": "^8.26.0",
-    "eslint": ">= 9"
+    "typescript-eslint": "^8.26.0"
   },
   "scripts": {
     "lint": "eslint .",