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

Preset Configurations

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

Collection of shared TypeScript-ESLint configurations adapted for Vue single-file components, providing comprehensive rule coverage for different strictness levels and use cases.

Capabilities

vueTsConfigs Object

Contains all shared configurations from typescript-eslint, modified to work with Vue files in addition to TypeScript files.

/**
 * Collection of TypeScript-ESLint configurations adapted for Vue files
 * Each config is a TsEslintConfigForVue instance that can be used in defineConfigWithVueTs
 */
const vueTsConfigs: Record<ExtendableConfigName, TsEslintConfigForVue>;

type ExtendableConfigName =
  | "all"
  | "base"
  | "disableTypeChecked"
  | "eslintRecommended"
  | "recommended"
  | "recommendedTypeChecked"
  | "recommendedTypeCheckedOnly"
  | "strict"
  | "strictTypeChecked"
  | "strictTypeCheckedOnly"
  | "stylistic"
  | "stylisticTypeChecked"
  | "stylisticTypeCheckedOnly";

Usage Examples:

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

// Use recommended config (no type checking)
export default defineConfigWithVueTs(vueTsConfigs.recommended);

// Use type-checked recommended config
export default defineConfigWithVueTs(vueTsConfigs.recommendedTypeChecked);

// Use strict type-checked config
export default defineConfigWithVueTs(vueTsConfigs.strictTypeChecked);

// Combine multiple configs
export default defineConfigWithVueTs(
  vueTsConfigs.base,
  vueTsConfigs.stylistic,
);

TsEslintConfigForVue Class

Wrapper class for typescript-eslint configs that adapts them to work with Vue single-file components.

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

class TsEslintConfigForVue {
  /** The name of the config as defined in typescript-eslint */
  configName: ExtendableConfigName;
  /** Display name for better error messages */
  name: string;

  constructor(configName: ExtendableConfigName);

  /** 
   * Determines if this config requires type checking services
   * @returns true if config includes type-aware rules
   */
  needsTypeChecking(): boolean;

  /**
   * Creates extended version with additional options merged
   * @param restOfConfig - Additional configuration options to merge
   * @returns New TsEslintConfigForVue instance with merged options
   */
  asExtendedWith(restOfConfig: ExtendsOptions): TsEslintConfigForVue;

  /**
   * Converts to ESLint flat config array with Vue file support
   * @returns Array of ESLint configuration objects
   */
  toConfigArray(): FlatConfig.ConfigArray;
}

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

Available Configurations

Basic Configurations

base: Foundational configuration without specific rule recommendations

vueTsConfigs.base

eslintRecommended: ESLint's recommended rules adapted for TypeScript + Vue

vueTsConfigs.eslintRecommended

Syntax-Only Configurations

recommended: TypeScript-ESLint recommended rules (no type checking required)

vueTsConfigs.recommended

strict: Stricter rule set (no type checking required)

vueTsConfigs.strict

stylistic: Style-focused rules (no type checking required)

vueTsConfigs.stylistic

Type-Aware Configurations

recommendedTypeChecked: Recommended rules with type-aware rules enabled

vueTsConfigs.recommendedTypeChecked

recommendedTypeCheckedOnly: Only type-aware recommended rules

vueTsConfigs.recommendedTypeCheckedOnly

strictTypeChecked: Strict rules with type-aware rules enabled

vueTsConfigs.strictTypeChecked

strictTypeCheckedOnly: Only type-aware strict rules

vueTsConfigs.strictTypeCheckedOnly

stylisticTypeChecked: Stylistic rules with type-aware rules enabled

vueTsConfigs.stylisticTypeChecked

stylisticTypeCheckedOnly: Only type-aware stylistic rules

vueTsConfigs.stylisticTypeCheckedOnly

Special Configurations

all: All available rules from typescript-eslint (includes type-aware rules)

vueTsConfigs.all

disableTypeChecked: Explicitly disables type-checked rules

vueTsConfigs.disableTypeChecked

Configuration Behavior

Vue File Integration

Each configuration automatically:

Applies TypeScript rules to .vue files in addition to .ts files
Configures vue-eslint-parser for proper Vue SFC parsing
Sets up TypeScript parser for <script> blocks in Vue files
Handles mixed script languages (ts, js, tsx, jsx) as configured

Type Checking Integration

Type-aware configurations require:

A valid TypeScript project (tsconfig.json)
Proper parser services setup (handled automatically by defineConfigWithVueTs)
Vue files with TypeScript script blocks for full type checking benefits

Example with type checking:

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

// Configure project for optimal type checking
configureVueProject({
  tsSyntaxInTemplates: true,
  scriptLangs: ["ts"],
  allowComponentTypeUnsafety: true,
});

export default defineConfigWithVueTs(
  vueTsConfigs.strictTypeChecked,
  {
    // Type-aware rules will work on these files
    files: ["**/*.{ts,vue}"],
  },
);

Install with Tessl CLI

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

docs