tessl/npm-vue--eslint-config-typescript

ESLint configuration library for Vue.js + TypeScript projects with advanced utilities and preset configurations

—

Pending

Overview

Eval results

Files

Configuration Management

Name: tessl/npm-vue--eslint-config-typescript
Author: tessl

Core utility for creating ESLint configurations with Vue.js + TypeScript support, handling complex config merging, type-aware rule processing, and Vue file integration.

Capabilities

defineConfigWithVueTs Function

Creates and processes ESLint configurations with Vue.js + TypeScript support, automatically handling rule merging, type checking setup, and Vue file parsing.

import type { TSESLint } from '@typescript-eslint/utils';

/**
 * Creates ESLint configurations with Vue + TypeScript support
 * @param configs - Configuration objects with support for extends and Vue-specific settings
 * @returns Processed configuration array ready for ESLint consumption
 */
function defineConfigWithVueTs(
  ...configs: InfiniteDepthConfigWithExtendsAndVueSupport[]
): ConfigItem[];

type InfiniteDepthConfigWithExtendsAndVueSupport =
  | TsEslintConfigForVue
  | ConfigItemWithExtendsAndVueSupport
  | InfiniteDepthConfigWithExtendsAndVueSupport[];

interface ConfigItemWithExtendsAndVueSupport extends ConfigItem {
  /** Array of configurations to extend from, with nested support */
  extends?: InfiniteDepthConfigWithExtendsAndVueSupport[];
}

type ConfigItem = TSESLint.FlatConfig.Config;

Usage Examples:

import pluginVue from "eslint-plugin-vue";
import { defineConfigWithVueTs, vueTsConfigs } from "@vue/eslint-config-typescript";

// Basic configuration
export default defineConfigWithVueTs(
  pluginVue.configs["flat/essential"],
  vueTsConfigs.recommended,
);

// Advanced configuration with custom rules
export default defineConfigWithVueTs(
  {
    name: "app/files-to-lint",
    files: ["**/*.{ts,mts,tsx,vue}"],
  },
  {
    name: "app/files-to-ignore", 
    ignores: ["**/dist/**", "**/coverage/**"],
  },
  pluginVue.configs["flat/essential"],
  vueTsConfigs.strictTypeChecked,
  {
    name: "custom-overrides",
    files: ["**/*.vue"],
    rules: {
      "@typescript-eslint/no-unused-vars": "warn",
    },
  },
);

// Configuration with extends pattern
export default defineConfigWithVueTs({
  extends: [
    vueTsConfigs.recommended,
    {
      name: "vue-specific",
      files: ["**/*.vue"],
      rules: {
        "vue/multi-word-component-names": "off",
      },
    },
  ],
});

Configuration Processing

The function performs several key processing steps:

Config Flattening: Recursively flattens nested configurations and extends arrays
Vue Plugin Deduplication: Ensures consistent eslint-plugin-vue versions across configs
Rule Reordering: Automatically orders configs for optimal Vue + TypeScript integration
Type-Aware Rule Extraction: Separates type-aware rules for performance optimization
Vue File Integration: Configures parsers and rules specifically for Vue single-file components

Internal Processing Types

interface ExtendsOptions {
  name?: string;
  files?: (string | string[])[];
  ignores?: string[];
}

Error Handling

The function validates configurations and provides meaningful error messages for common issues:

Invalid configuration names in extends arrays
Missing required Vue plugin configurations
Conflicting rule definitions between configs
Type checking setup issues for Vue files

Common Errors:

// This will throw an error - invalid config name
vueTsConfigs.recommendedTypecheck // Should be: recommendedTypeChecked

// This will warn about plugin version conflicts
// when multiple vue plugin instances are detected

Install with Tessl CLI

npx tessl i tessl/npm-vue--eslint-config-typescript

docs