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

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

or

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

Usage

Basic Setup (TypeScript)

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

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:

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:

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:

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