How to Configure eslint-config-airbnb with Webpack: Complete Integration Guide

To configure eslint-config-airbnb with Webpack, install the config and its peer dependencies, extend "airbnb" in your .eslintrc.json, and add eslint-webpack-plugin to your webpack.config.js to enforce Airbnb's style rules during the bundling process.

The airbnb/javascript repository provides one of the most widely adopted ESLint configurations in the JavaScript ecosystem, enforcing strict code quality standards for modern React and Node.js applications. When you configure eslint-config-airbnb with Webpack, you integrate these rigorous linting rules directly into your build pipeline, catching style violations and import errors before they reach production.

Understanding the Airbnb ESLint Configuration Structure

The eslint-config-airbnb package exports a comprehensive rule set that extends the base configuration (eslint-config-airbnb-base) with React-specific linting rules. According to the usage description in the package README at packages/eslint-config-airbnb/README.md (lines 7-14), you can extend "airbnb" for the full rule set or "airbnb/hooks" to include React Hooks validation.

For Webpack-based projects, the configuration includes specific safeguards against common bundler anti-patterns. The base rule set explicitly forbids inline loader syntax through the import/no-webpack-loader-syntax rule defined in packages/eslint-config-airbnb-base/rules/imports.js (lines 88-91). Additionally, the configuration recognizes standard Webpack filenames like webpack.config.js and webpack.config.*.js as development dependencies, exempting them from the import/no-extraneous-dependencies rule (lines 82-86).

Step-by-Step Integration Guide

Install Dependencies

Use the included install script to automatically add the config and its required peer dependencies:

npx install-peerdeps --dev eslint-config-airbnb

This command installs eslint, eslint-plugin-import, eslint-plugin-react, eslint-plugin-react-hooks, and eslint-plugin-jsx-a11y with compatible versions.

Configure ESLint

Create or update your .eslintrc.json to extend the Airbnb configuration:

{
  "extends": ["airbnb", "airbnb/hooks"],
  "env": {
    "browser": true,
    "node": true
  }
}

The "airbnb" entry automatically applies the Webpack-specific import rules, including the prohibition against inline loader syntax.

Integrate ESLint with Webpack

Add eslint-webpack-plugin to your build process to lint files during compilation. First, install the plugin:

npm install --save-dev eslint-webpack-plugin

Then configure it in your webpack.config.js:

const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
  // ... existing configuration
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  plugins: [
    new ESLintPlugin({
      extensions: ['js', 'jsx'],
      eslintPath: require.resolve('eslint'),
    }),
  ],
};

The plugin reads your .eslintrc.json configuration, applying Airbnb's rules to all specified extensions during the build.

Handle Webpack Loader Syntax (Optional)

If your project requires inline loader syntax (e.g., import img from 'url-loader!./logo.png'), you must explicitly disable the corresponding rule:

{
  "rules": {
    "import/no-webpack-loader-syntax": "off"
  }
}

However, the Airbnb style guide recommends keeping loader configuration in your Webpack config files rather than source imports.

Key Webpack-Specific Rules in the Airbnb Config

Import/No-Webpack-Loader-Syntax: This rule is enabled by default in packages/eslint-config-airbnb-base/rules/imports.js to prevent inline loader usage like !loader-name!./resource, ensuring imports remain bundler-agnostic in source code.

Import/No-Extraneous-Dependencies: The configuration automatically ignores webpack.config.js and webpack.config.*.js patterns when checking for extraneous dependencies, allowing these files to import devDependencies like webpack, webpack-merge, or loaders without triggering linting errors.

Summary

• Install eslint-config-airbnb using npx install-peerdeps to ensure all peer dependencies are compatible.
• Extend "airbnb" or "airbnb/hooks" in your .eslintrc.json to activate the rule set, including Webpack-specific import validations.
• Integrate eslint-webpack-plugin into your webpack.config.js to enforce linting during the build process.
• Respect the import/no-webpack-loader-syntax rule by keeping loader configuration in Webpack config files rather than inline imports.
• Leverage automatic devDependency recognition for files matching webpack.config.*.js patterns.

Frequently Asked Questions

Does eslint-config-airbnb work with Webpack 5?

Yes. The eslint-config-airbnb package is bundler-agnostic and works with any Webpack version. The configuration focuses on JavaScript and React code quality rather than bundler internals, though it does include specific rules to prevent Webpack-specific syntax in source files. Use eslint-webpack-plugin instead of the deprecated eslint-loader for Webpack 5 compatibility.

Why does ESLint report errors on my webpack.config.js file?

The Airbnb config treats webpack.config.js as a development configuration file, allowing it to import packages listed in devDependencies. However, if you named your config file differently, you may need to add it to the import/no-extraneous-dependencies rule's devDependencies pattern or move those dependencies to dependencies in your package.json.

Can I use eslint-config-airbnb without React?

Yes. If you are using Webpack for a non-React project, extend eslint-config-airbnb-base instead of eslint-config-airbnb. The base configuration includes all the Webpack-specific import rules without the React, JSX, or Hooks plugins, making it suitable for vanilla JavaScript or Node.js applications bundled with Webpack.

How do I disable the rule against inline Webpack loaders?

To allow inline loader syntax (e.g., !!loader!path), set "import/no-webpack-loader-syntax": "off" in your ESLint configuration's rules section. According to the source code in packages/eslint-config-airbnb-base/rules/imports.js (lines 88-91), this rule is enabled by default to discourage bundler-specific syntax in application code.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}