npm package: @gateweb/eslint-config-gateweb
Description: A shared ESLint configuration project for frontEnd project.
Author: Gateweb
Latest version: 3.0.1

# @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](https://github.com/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:

```bash
# 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:

```javascript
// 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`.

```javascript
// 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:

```bash
pnpm add -D prettier eslint-config-prettier
```

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

```javascript
// 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:

```json
{
  "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.