@dimensional-innovations/tool-config

Universal configuration package for ESLint, Prettier, Stylelint, TypeScript, and semantic-release with automatic framework detection.

One package. Five tools. Zero configuration.

Stop juggling multiple config packages. This single package provides battle-tested configurations for ESLint, Prettier, Stylelint, TypeScript, and semantic-release that automatically detect your project's framework, environment, and TypeScript setup.

Why This Package?

Before:

yarn add --dev \
  eslint @eslint/js eslint-config-airbnb eslint-plugin-react \
  prettier prettier-config-standard \
  stylelint stylelint-config-standard \
  semantic-release @semantic-release/git @semantic-release/changelog

# ...then configure each one individually

After:

yarn add --dev @dimensional-innovations/tool-config

Features

• 🎯 Zero Configuration - Auto-detects your framework, environment, and TypeScript
• 🧰 Multi-Tool Support - ESLint, Prettier, Stylelint, TypeScript, semantic-release in one package
• ⚛️ 9 Frameworks - React, Vue, Svelte, Solid, Astro, Angular, Vanilla JS, Node.js, Electron
• 📦 All-In-One - All plugins and parsers included as dependencies
• 🔧 Customizable - Override any setting while keeping smart defaults
• 🚀 Modern - ESLint 9+ flat config, TypeScript with tsgo support (10x faster)
• 🔄 Uninstall Support - Clean removal with safety checks for modified files
• 🎬 Smart Scripts - Auto-generated check-all script runs tools in optimal order
• ✅ Battle-Tested - 556 tests with 96% coverage

Quick Start

Installation

yarn add --dev @dimensional-innovations/tool-config

Or use the interactive CLI:

npx @dimensional-innovations/tool-config

Basic Usage

Create config files in your project root:

ESLint (eslint.config.js):

import { createConfig } from '@dimensional-innovations/tool-config'

export default await createConfig('eslint')

Prettier (prettier.config.js):

import { createConfig } from '@dimensional-innovations/tool-config'

export default createConfig('prettier')

Stylelint (stylelint.config.js):

import { createConfig } from '@dimensional-innovations/tool-config'

export default createConfig('stylelint')

TypeScript (tsconfig.json):

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "compilerOptions": {
    "strict": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Or use the factory function to generate framework-specific TypeScript configs programmatically.

semantic-release (release.config.js):

import { createConfig } from '@dimensional-innovations/tool-config'

export default createConfig('semantic-release')

That's it! The configs will automatically detect your framework and TypeScript setup.

Add Scripts

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint --fix .",
    "prettier": "prettier --check .",
    "prettier:fix": "prettier --write .",
    "style": "stylelint '**/*.css' --allow-empty-input",
    "style:fix": "stylelint '**/*.css' --fix --allow-empty-input",
    "typecheck": "tsc --noEmit",
    "typecheck:watch": "tsc --noEmit --watch",
    "check-all": "yarn prettier && yarn style && yarn lint && yarn typecheck"
  }
}

Tip: The CLI automatically adds a check-all script when you setup multiple tools. This runs all validation tools in the optimal order: formatting → styles → linting → type checking.

Supported Frameworks

Meta-frameworks: Next.js (→ React), Nuxt (→ Vue), SvelteKit (→ Svelte)

API Documentation

createConfig(tool, options)

The main factory function that creates configurations for any supported tool.

Parameters:

• tool (string, required): Tool name - 'eslint', 'prettier', 'stylelint', 'typescript', or 'semantic-release'
• options (object, optional): Configuration options

Common Options:

{
  framework: 'auto',      // 'auto' | 'react' | 'vue' | 'svelte' | etc.
  typescript: undefined,  // undefined (auto-detect) | true | false
  cwd: process.cwd()     // Working directory for detection
}

ESLint Options

await createConfig('eslint', {
  framework: 'auto', // Auto-detect or specify framework
  environment: 'auto', // 'auto' | 'browser' | 'node' | 'universal'
  typescript: undefined, // Auto-detect TypeScript
  ignore: [], // Additional ignore patterns
  rules: {} // Custom rule overrides
})

Custom rules:

export default await createConfig('eslint', {
  rules: { 'no-console': 'off' }
})

Prettier Options

createConfig('prettier', {
  framework: 'auto',
  printWidth: 100, // Override any Prettier option
  semi: false,
  singleQuote: true
})

Stylelint Options

createConfig('stylelint', {
  framework: 'auto',
  cssType: 'auto', // 'auto' | 'scss' | 'css'
  cssType: { preprocessor: 'scss', tailwind: true }, // Or object
  rules: {} // Custom rule overrides
})

TypeScript Options

await createConfig('typescript', {
  framework: 'auto', // Auto-detect or specify framework
  environment: 'auto', // 'auto' | 'browser' | 'node' | 'universal'
  checker: 'auto', // 'auto' | 'modern' (tsgo) | 'legacy' (tsc)
  strict: true, // Enable strict type checking
  compilerOptions: {
    // Custom compiler options
    baseUrl: '.',
    paths: { '@/*': ['src/*'] }
  }
})

tsgo Support: Install @typescript/native-preview for 10x faster type checking. Auto-detected or set checker: 'modern' to force it.

semantic-release Options

createConfig('semantic-release', {
  preset: 'default', // 'default' | 'library' | 'monorepo'
  gitProvider: 'auto' // 'auto' | 'gitlab' | 'github' | 'bitbucket'
})

Framework-Specific Guides

React

Auto-detected when:

• react or react-dom in dependencies
• next in dependencies (Next.js)

ESLint features:

• React hooks rules
• JSX best practices
• React 18+ features

Prettier features:

• JSX formatting
• Component style consistency

Stylelint features:

• CSS Modules support (:global, :local, composes)
• Tailwind CSS support (auto-detected)

Example:

// eslint.config.js - automatically detects React
export default await createConfig('eslint')

// prettier.config.js - automatically formats JSX
export default createConfig('prettier')

Vue

Auto-detected when:

• vue in dependencies
• nuxt in dependencies (Nuxt)

ESLint features:

• Vue 3 Composition API
• <script setup> support
• Template linting

Prettier features:

• SFC (Single File Component) formatting
• prettier-plugin-vue integration

Stylelint features:

• Scoped styles support
• Vue SFC style blocks

Example:

// stylelint.config.js - automatically handles .vue files
export default createConfig('stylelint')

// npm scripts
{
  "style": "stylelint '**/*.css' '**/*.vue'"
}

Svelte

Auto-detected when:

• svelte in dependencies
• @sveltejs/kit in dependencies (SvelteKit)

ESLint features:

• Svelte 5 runes support
• Component linting
• Reactive statements

Prettier features:

• Svelte component formatting
• prettier-plugin-svelte integration

Stylelint features:

• Component-scoped styles
• .svelte file support

TypeScript

Auto-detected when:

• typescript in devDependencies
• tsconfig.json exists

Features:

• Type-aware linting
• Strict type checking rules
• Import/export type syntax
• Works with all frameworks

Disable if needed:

export default await createConfig('eslint', {
  typescript: false // Force disable even if detected
})

CLI Tool

Interactive setup wizard for quick configuration:

npx @dimensional-innovations/tool-config

Features:

• Choose which tools to configure
• Auto-detects framework and TypeScript
• Creates config files automatically
• Adds scripts to package.json (including check-all for multiple tools)
• Automated CI/CD pipeline setup
• Uninstall support - Clean removal of configs and scripts
• Supports dry-run mode

Setup Options:

# Interactive mode
npx @dimensional-innovations/tool-config                 # Choose tools interactively

# Single tool setup
npx @dimensional-innovations/tool-config eslint          # Setup ESLint only
npx @dimensional-innovations/tool-config prettier        # Setup Prettier only
npx @dimensional-innovations/tool-config stylelint       # Setup Stylelint only

# Setup all tools
npx @dimensional-innovations/tool-config --all           # Setup all tools at once

# CI/CD setup
npx @dimensional-innovations/tool-config --ci gitlab     # Setup GitLab CI/CD
npx @dimensional-innovations/tool-config --ci github     # Setup GitHub Actions
npx @dimensional-innovations/tool-config --setup-ci      # Interactive CI setup

# Preview mode
npx @dimensional-innovations/tool-config --dry-run       # Preview without creating files

# Help
npx @dimensional-innovations/tool-config --help          # Show all options

Uninstall Options:

# Interactive uninstall
npx @dimensional-innovations/tool-config --uninstall     # Choose which tools to remove

# Uninstall specific tool
npx @dimensional-innovations/tool-config --uninstall eslint

# Uninstall all detected tools
npx @dimensional-innovations/tool-config --uninstall --all

# Remove CI/CD configuration
npx @dimensional-innovations/tool-config --uninstall --ci

# Preview uninstall
npx @dimensional-innovations/tool-config --uninstall --dry-run

Safety Features:

The uninstall command includes safety features to protect your customizations:

• Only removes files that match the original generated templates
• Skips modified configuration files (warns you instead)
• Only removes auto-generated package.json scripts
• Preserves custom scripts with the same names
• Supports dry-run to preview what will be removed
• Cleans up empty directories (e.g., .github/workflows)
• Idempotent - safe to run multiple times

CI/CD Integration:

When you select semantic-release in interactive mode, the CLI will automatically prompt you to setup CI/CD for automated releases. Or use the --ci flag to setup CI/CD directly:

# Interactive: prompts for provider if not detected
npx @dimensional-innovations/tool-config --setup-ci

# Direct: specify provider
npx @dimensional-innovations/tool-config --ci gitlab
npx @dimensional-innovations/tool-config --ci github
npx @dimensional-innovations/tool-config --ci bitbucket

# Combined: setup semantic-release + CI/CD
npx @dimensional-innovations/tool-config semantic-release --ci

The CLI will:

• Auto-detect your git provider (GitLab/GitHub/Bitbucket)
• Copy the appropriate CI/CD template
• Show environment variable configuration instructions
• Guide you through the setup process

CI/CD Setup

Ready-to-use CI/CD templates for GitLab CI, GitHub Actions, and Bitbucket Pipelines.

Automated Setup (Recommended)

The CLI tool can automatically setup CI/CD for you:

npx @dimensional-innovations/tool-config --ci gitlab  # Or github, bitbucket

This will:

• Auto-detect your git provider
• Copy the appropriate template
• Show configuration instructions

Manual Setup

Alternatively, copy templates manually from src/tools/semantic-release/templates/.

Each template includes:

• Lint Stage - Runs ESLint, Prettier, and Stylelint
• Test Stage - Runs tests with coverage reporting
• Release Stage - Automated semantic-release (main branch only)

GitLab CI

cp node_modules/@dimensional-innovations/tool-config/src/tools/semantic-release/templates/.gitlab-ci.yml .gitlab-ci.yml

Configure these CI/CD variables in GitLab:

• GL_TOKEN: GitLab Personal Access Token
• NPM_TOKEN: npm authentication token

GitHub Actions

mkdir -p .github/workflows
cp node_modules/@dimensional-innovations/tool-config/src/tools/semantic-release/templates/github-workflow.yml .github/workflows/ci.yml

Configure these secrets in GitHub:

• GITHUB_TOKEN: Automatically provided
• NPM_TOKEN: npm authentication token

Bitbucket Pipelines

cp node_modules/@dimensional-innovations/tool-config/src/tools/semantic-release/templates/bitbucket-pipelines.yml bitbucket-pipelines.yml

Configure this repository variable in Bitbucket:

• NPM_TOKEN: npm authentication token

See CI_SETUP.md for detailed configuration instructions.

Examples

See the examples/ directory for complete working examples:

• React App - TypeScript, CSS Modules
• Vue App - Composition API, Scoped Styles
• Svelte App - Svelte 5, Component Styles
• Solid App - TypeScript, Reactive Primitives
• Astro App - Multi-framework, TypeScript
• Angular App - TypeScript, Standalone Components
• Node Backend - Express, TypeScript
• Vanilla JS - Pure JavaScript, no framework

Each example includes all 5 tool configurations and npm scripts.

Advanced Usage

Monorepo Support:

// apps/frontend/eslint.config.js
export default await createConfig('eslint', { framework: 'react' })

// apps/backend/eslint.config.js
export default await createConfig('eslint', { framework: 'node' })

Custom Ignore Patterns:

export default await createConfig('eslint', {
  ignore: ['dist/**', '**/*.generated.ts']
})

Environment-Specific Rules:

export default await createConfig('eslint', {
  rules: {
    'no-console': process.env.NODE_ENV === 'development' ? 'off' : 'error'
  }
})

Combining with Other Configs:

const baseConfig = await createConfig('eslint')
export default [...baseConfig, { files: ['**/*.js'], rules: customRules }]

Ignoring Files

All tools automatically ignore common build outputs and generated files to prevent unnecessary linting and formatting. This happens automatically when you create a config - no manual setup required.

What Gets Ignored

Common directories (all tools):

• node_modules/ - Dependencies
• dist/, build/, out/ - Build outputs
• coverage/ - Test coverage reports
• .nyc_output/ - NYC coverage data

Framework build outputs (all tools):

• .next/ - Next.js
• .nuxt/, .output/ - Nuxt
• .svelte-kit/ - SvelteKit
• .vite/ - Vite cache
• .cache/, .parcel-cache/, .turbo/ - Build caches

Generated files (Prettier only):

• Lock files (package-lock.json, yarn.lock, pnpm-lock.yaml)
• CHANGELOG.md (auto-generated by semantic-release)

How It Works

ESLint: Uses runtime ignores array in flat config Stylelint: Uses runtime ignoreFiles property in config Prettier: Auto-generates .prettierignore file on first run

Customizing Ignore Patterns

ESLint - Add custom ignores:

export default await createConfig('eslint', {
  ignorePaths: ['generated/**', 'legacy/**']
})

Stylelint - Extend ignoreFiles:

export default createConfig('stylelint', {
  ignoreFiles: ['**/*.min.css', 'vendor/**']
})

Prettier - Edit .prettierignore file:

generated/
legacy/

Verifying Ignore Patterns

Check what files are being processed:

# ESLint
npx eslint --debug . 2>&1 | grep "Ignored"

# Stylelint
npx stylelint "**/*.css" --formatter verbose

# Prettier
npx prettier --check . --debug-check

Troubleshooting

ESLint not detecting framework: Ensure framework is in package.json dependencies, or explicitly set framework: 'react'.

TypeScript parsing errors: Install TypeScript: yarn add --dev typescript

Prettier plugin not found: Install required peer dependency:

yarn add --dev prettier-plugin-svelte  # Svelte
yarn add --dev prettier-plugin-astro   # Astro

Stylelint not linting .vue files: Update script: "style": "stylelint '**/*.css' '**/*.vue' --allow-empty-input"

Config not updating: Delete node_modules/.cache and restart editor.

Requirements

• Node.js: >= 22.20.0 (Node.js 22 LTS "Jod")
• Yarn: >= 4.0.0 (or npm >= 10.0.0)
• ECMAScript: ES2025 (ESM modules required)

Philosophy

This package follows these principles:

• Zero Config by Default - Works out of the box with sensible defaults
• Smart Detection - Automatically adapts to your project structure
• Fail Loudly - Errors for critical issues, warnings for quality improvements
• Framework Agnostic - No opinions about which framework you use
• Modern Standards - Uses latest tooling and ESLint flat config
• Comprehensive Coverage - 96% test coverage, battle-tested in production

Contributing

Contributions welcome! To add a new framework:

1. Add detection logic in src/detectors.js
2. Create presets in src/tools/{tool}/presets/frameworks/
3. Add tests with 100% coverage
4. Update documentation

See CLAUDE.md for architecture details.

License

MIT © DIMENSIONAL INNOVATIONS

Links

• npm package
• GitLab repository
• Issue tracker
• Changelog

Made with ❤️ by DIMENSIONAL INNOVATIONS