Broxus ESLint config

Recommended ESLint configuration to create formatted code with best practices based on the Airbnb JavaScript Style Guide.

Installation

Install the package as development dependency, alongside eslint package and it typings for best compatibility

npm i @broxus/eslint-config eslint @types/eslint -D

yarn add @broxus/eslint-config eslint @types/eslint -D

pnpm add @broxus/eslint-config eslint @types/eslint -D

bun add @broxus/eslint-config eslint @types/eslint -D

Usage

1. Add @broxus/eslint-config to your ESLint configuration - either in eslintrc or in the package.json file under the eslintConfig key.

   • eslintrc: Create the .eslintrc.* file in the root directory of your project and put code below to the file

     {
       "extends": [
         "@broxus"
       ]
     }

   • package.json: Add code below to the package.json

     {
       "eslintConfig": {
         "extends": "@broxus"
       }
     }

2. If you are using eslint.config.js (flat config) format, follow the instructions below.

   • JavaScript: Create the eslint.config.js file in the root directory of your project and put code below to the file

     import broxusEslint from '@broxus/eslint-config/flat'
     import { defineConfig } from 'eslint/config'
       
     export default defineConfig(
       { ignores: ['dist'] },
       
        ...broxusEslint.configs.recommended,
        ...broxusEslint.configs.react,
        ...broxusEslint.configs.reactHooks,
        ...broxusEslint.configs.typescript,
       
       {
         rules: {
           // ...your own custom rules and overrides
         },
       },
     )

   • TypeScript: Create the eslint.config.ts file in the root directory of your project and put code above (the format, imports, and syntax are identical to the JavaScript version - TypeScript simply provides better type checking and autocomplete support) to the file

     [!TIP] You need to install jiti package to enable ESLint to load TypeScript configuration files. This package allows ESLint to transpile and execute TypeScript config files on the fly.

     npm i jiti -D

     yarn add jiti -D

     pnpm add jiti -D

     bun add jiti -D

Vite bundler

To configure eslint-import-resolver-vite for resolving aliases when using eslint.config.ts, follow these steps:

Prerequisites

1. Set up ES Module project

   Your project must have "type": "module" in package.json:

   {
     "type": "module"
   }

2. Install required packages

   Install eslint-plugin-import-x and the Vite resolver alongside your existing eslint-plugin-import:

   npm i eslint-plugin-import-x eslint-import-resolver-vite -D

   yarn add eslint-plugin-import-x eslint-import-resolver-vite -D

   pnpm add eslint-plugin-import-x eslint-import-resolver-vite -D

   bun add eslint-plugin-import-x eslint-import-resolver-vite -D

3. Update TypeScript config

   Add eslint.config.ts to the include array in your tsconfig.json:

   {
     "include": [
       "src/**/*",
       "vite.config.ts",
       "eslint.config.ts"
     ]
   }

   This ensures TypeScript recognizes and type-checks your ESLint configuration file.

Configuration

4. Configure your Vite config

   In your vite.config.ts, export the configuration object separately for ESLint usage:

   import { type UserConfig, defineConfig } from 'vite'
   import path from 'path'
   
   export const viteConfigObject: UserConfig = {
     resolve: {
       alias: {
         '@': path.resolve(__dirname, 'src'),
         // ...other aliases
       }
     }
   }
   
   export default defineConfig({
     // ...other config
     resolve: { ...viteConfigObject.resolve },
     // ...other config
   })

5. Configure ESLint to use import-x with Vite resolver

   In your eslint.config.ts, use both eslint-plugin-import (existing) and eslint-plugin-import-x (for Vite):

   import { defineConfig } from 'eslint/config'
   import { createViteImportResolver } from 'eslint-import-resolver-vite'
   
   export default defineConfig(
     // ...all necessary configs
     {
       settings: {
         // ...other settings
         // Keep existing import plugin settings
         'import/extensions': [...allExtensions, '.json', '.scss', '.css'],
         'import/resolver': {
           node: allExtensions,
             typescript: true,
           },
           // Add import-x for Vite resolver
           'import-x/resolver-next': [
             createViteImportResolver({
               viteConfig: (await import('./vite.config')).viteConfigObject,
             }),
           ],
         },
       },
   )

   Key points:

   • Keep existing eslint-plugin-import - no need to remove, it continues to work as before
   • Add eslint-plugin-import-x specifically for Vite alias resolution
   • Use import-x/resolver-next for the Vite resolver while keeping import/resolver for other resolvers
   • Export vite config object separately to allow ESLint to import and use it
   • Async import of vite config using dynamic import with await

   This setup ensures that ESLint can properly resolve your Vite aliases while maintaining compatibility with existing import configurations.