npm package: @juuso.piikkila/eslint-config-typescript
Description: ESLint config for typescript projects
Author: Juuso Piikkilä
Latest version: 4.5.0

# eslint-config-typescript

ESLint shareable config for TypeScript projects by Juuso Piikkilä.

## Purpose
This repository publishes an ESLint configuration package for TypeScript projects. It provides opinionated, production-ready ESLint rules built on top of `eslint-config-canonical` with customizations for TypeScript and Vue.js projects.

## Installation

```bash
npm install --save-dev @juuso.piikkila/eslint-config-typescript
```

or

```bash
yarn add -D @juuso.piikkila/eslint-config-typescript
```

## Usage

### Basic Setup (TypeScript)

Create an `eslint.config.mjs` file in your project root:

```javascript
import config from '@juuso.piikkila/eslint-config-typescript';

export default config;
```

This includes both the base configuration and TypeScript-specific rules.

### Custom Configuration

You can extend or override the configuration:

```javascript
import config from '@juuso.piikkila/eslint-config-typescript';

export default [
    ...config,
    {
        rules: {
            // Your custom rules here
        },
    },
];
```

### Modular Configurations

The package exports modular configurations that you can compose:

```javascript
import base from '@juuso.piikkila/eslint-config-typescript/configurations/base/index.mjs';
import typescript from '@juuso.piikkila/eslint-config-typescript/configurations/typescript/index.mjs';
import vue from '@juuso.piikkila/eslint-config-typescript/configurations/vue/index.mjs';

export default [
    ...base,
    ...typescript,
    ...vue, // Add if using Vue.js
];
```

## Configuration Modules

### Base Configuration
- **Built on**: `eslint-config-canonical` (canonical + regexp presets)
- **Key features**:
  - 4-space indentation
  - Max line length: 120 characters
  - Consistent array/object formatting
  - Enforces trailing commas in multiline structures
  - Sorted imports with `perfectionist/sort-imports`
  - Numeric separators for readability (e.g., `10_000`)
  - Arrow functions: concise style when possible
  - Function declarations preferred (arrow functions allowed)

### TypeScript Configuration
- **Built on**: `eslint-config-canonical/typescript` + type-checking rules
- **Key features**:
  - Interfaces preferred over type aliases
  - Strict naming conventions:
    - Variables: `camelCase`, `UPPER_CASE`, or `PascalCase`
    - Parameters: `camelCase` (leading underscore allowed)
    - Enum members: `UPPER_CASE`
    - Types/Interfaces: `PascalCase`
  - No extraneous classes (except with decorators)
  - TypeScript member delimiter: none for multiline, semicolon for single-line
  - Type-checked rules enabled (requires `tsconfig.json`)

### Vue Configuration
- **Built on**: `eslint-plugin-vue` (recommended) + `eslint-plugin-vuejs-accessibility`
- **Key features**:
  - 4-space HTML indentation
  - Component names: `PascalCase`
  - Custom events: `kebab-case`
  - Attribute hyphenation: always
  - Self-closing components: always for non-HTML elements
  - Multi-word component names enforced
  - Accessibility (a11y) rules enabled

## Highlighted Rules

### Import Sorting (`perfectionist/sort-imports`)
Imports are automatically sorted with blank lines between groups:
1. Type imports
2. Built-in and external modules
3. Internal type imports
4. Internal modules
5. Parent/sibling/index type imports
6. Parent/sibling/index modules
7. Object imports
8. Unknown imports

### Numeric Separators (`unicorn/numeric-separators-style`)
- Numbers ≥ 10,000: grouped by thousands (e.g., `10_000`)
- Hexadecimal: grouped by 2 digits (e.g., `0xFF_FF`)
- Binary/Octal: grouped by 4 digits

## TypeScript Project Setup

This configuration requires a `tsconfig.json` in your project root for type-checked rules to work. Example:

```json
{
    "compilerOptions": {
        "strict": true,
        "target": "ES2020",
        "module": "ESNext"
    },
    "include": ["src/**/*"]
}
```

## Release & dependency automation
- Renovate is configured to:
  - Ignore patch updates.
  - Open grouped PRs for minor updates (group name: "all minor dependency updates").
  - Open grouped PRs for major updates (group name: "all major dependency updates").
  - Use semantic commit types so semantic-release can create releases:
    - Minor updates use `feat` → triggers a minor release.
    - Major updates use `feat!` → triggers a major release.
- This repository uses tilde (`~`) version ranges in `package.json` so minor bumps are treated as out-of-range and will trigger Renovate PRs.

## semantic-release
- `@semantic-release/commit-analyzer` and `@semantic-release/release-notes-generator` are configured with the `conventionalcommits` preset in `.releaserc.json`.
- When Renovate PRs are merged they produce semantic commits which in turn cause semantic-release to publish new package versions according to Conventional Commits.

## Notes for maintainers
- Dev dependency updates and scheduling are handled by the main Renovate configuration (inherited via `github>optioni/renovate-config`).
- If you'd like patch updates to be opened instead of ignored, change `renovate.json` packageRules for `patch` updates.

## Files of interest
- `renovate.json` — Repository Renovate configuration (overrides and grouping for minor/major updates).
- `.releaserc.json` — semantic-release configuration (conventional commits preset).
- `package.json` — package metadata and dependency ranges.