@gateweb/eslint-config-gateweb

Gateweb's ESLint config presets for modern front-end projects.

[!NOTE] This project is a customized version of the excellent @antfu/eslint-config, adapted to fit the specific needs of Gateweb's front-end projects.

Features

• Comprehensive Rules: Integrates multiple ESLint plugins like @typescript-eslint, eslint-plugin-react, eslint-plugin-import-x, eslint-plugin-jsdoc, and more.
• Flat Config Format: Uses the new ESLint flat config format (eslint.config.js).
• TypeScript Support: First-class support for TypeScript.
• React Support: Includes rules for React and JSX.
• Prettier Integration: Option to integrate with Prettier for code formatting.
• Highly Customizable: Provides flexible options to tailor the configuration to your project's needs.
• Automatic Package Detection: Automatically enables rules for TypeScript if typescript is detected in your project.

Installation

Install the package using your preferred package manager:

# Using pnpm
pnpm add -D @gateweb/eslint-config-gateweb eslint

# Using npm
npm install -D @gateweb/eslint-config-gateweb eslint

# Using yarn
yarn add -D @gateweb/eslint-config-gateweb eslint

Usage

Create an eslint.config.js file in your project root and add the following:

// eslint.config.js
import { createConfig } from '@gateweb/eslint-config-gateweb';

export default createConfig();

Advanced Configuration

You can customize the configuration by passing an options object to createConfig.

// eslint.config.js
import { createConfig } from '@gateweb/eslint-config-gateweb';

export default createConfig(
  {
    // Enable/disable features
    typescript: true,
    react: true,
    prettier: true,

    // Customize stylistic rules
    stylistic: {
      indent: 2,
      quotes: 'single',
    },

    // Override specific rules
    overrides: {
      javascript: {
        'no-console': 'warn',
      },
      typescript: {
        '@typescript-eslint/no-explicit-any': 'off',
      },
    },
  },
  // You can also append your own flat configs
  {
    files: ['**/*.test.ts'],
    rules: {
      'no-unused-expressions': 'off',
    },
  }
);

Options

The createConfig function accepts the following options:

• typescript: boolean | object - Enable or configure TypeScript support. Defaults to auto-detection.
• react: boolean | object - Enable or configure React support. Defaults to true.
• jsx: boolean - Enable JSX support. Defaults to true.
• prettier: boolean - Enable Prettier integration. Defaults to false.
• test: boolean | object - Enable test file linting. Defaults to true.
• stylistic: boolean | object - Enable or configure stylistic rules. Defaults to true unless prettier is enabled.
• gitignore: boolean | object - Enable gitignore support. Defaults to true.
• componentExts: string[] - File extensions for component files.
• isInEditor: boolean - Manually specify if running in an editor environment.
• overrides: object - Override rules for specific configurations (e.g., javascript, typescript, react).

Prettier Integration

To use Prettier for formatting, first install it:

pnpm add -D prettier eslint-config-prettier

Then, enable the prettier option in your eslint.config.js:

// eslint.config.js
import { createConfig } from '@gateweb/eslint-config-gateweb';

export default createConfig({
  prettier: true,
});

This will disable stylistic rules that conflict with Prettier.

VS Code Integration

For the best experience with VS Code, create a .vscode/settings.json file with the following content:

{
  "eslint.experimental.useFlatConfig": true,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

This enables ESLint's flat config support, formats on save, and enables auto-fixing of ESLint errors.