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

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

@vue/eslint-config-typescript

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

@vue/eslint-config-typescript provides ESLint configuration for Vue.js 3 + TypeScript projects with advanced utilities for seamless integration. It offers utilities like defineConfigWithVueTs for configuration management, vueTsConfigs containing shared TypeScript-ESLint configurations adapted for Vue files, and configureVueProject factory for advanced project-specific setup.

Package Information

Package Name: @vue/eslint-config-typescript
Package Type: npm
Language: TypeScript/JavaScript
Installation: npm add --dev @vue/eslint-config-typescript

Core Imports

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

For CommonJS:

const {
  defineConfigWithVueTs,
  vueTsConfigs,
  configureVueProject,
} = require("@vue/eslint-config-typescript");

Legacy import (deprecated):

import createConfig from "@vue/eslint-config-typescript";

Basic Usage

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

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

Architecture

@vue/eslint-config-typescript is built around several key components:

Configuration Factory: defineConfigWithVueTs handles complex config processing and merging with TypeScript-ESLint rules
Preset Configurations: vueTsConfigs provides all shared TypeScript-ESLint configurations adapted for Vue files
Project Configuration: configureVueProject allows fine-tuning of Vue-specific settings like script languages and type checking behavior
Vue File Processing: Automatic detection and categorization of Vue files for optimal type checking performance
Type-Aware Rule Management: Intelligent handling of type-aware rules with performance optimizations

Capabilities

Configuration Management

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

function defineConfigWithVueTs(
  ...configs: InfiniteDepthConfigWithExtendsAndVueSupport[]
): ConfigItem[];

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

interface ConfigItemWithExtendsAndVueSupport extends ConfigItem {
  extends?: InfiniteDepthConfigWithExtendsAndVueSupport[];
}

Configuration Management

Preset Configurations

Collection of shared TypeScript-ESLint configurations adapted for Vue single-file components with comprehensive rule coverage.

const vueTsConfigs: Record<ExtendableConfigName, TsEslintConfigForVue>;

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

class TsEslintConfigForVue {
  configName: ExtendableConfigName;
  name: string;
  needsTypeChecking(): boolean;
  asExtendedWith(restOfConfig: ExtendsOptions): TsEslintConfigForVue;
  toConfigArray(): FlatConfig.ConfigArray;
}

Preset Configurations

Project Configuration

Factory function for configuring Vue project-specific options like script language support and type checking behavior.

function configureVueProject(userOptions: ProjectOptions): void;

interface ProjectOptions {
  /** Whether to parse TypeScript syntax in Vue templates. Defaults to `true` */
  tsSyntaxInTemplates?: boolean;
  /** Allowed script languages in `vue` files. Defaults to `['ts']` */
  scriptLangs?: ScriptLang[];
  /** Whether to override some `no-unsafe-*` rules for Vue components. Defaults to `true` */
  allowComponentTypeUnsafety?: boolean;
  /** The root directory of the project. Defaults to `process.cwd()` */
  rootDir?: string;
}

type ScriptLang = "ts" | "tsx" | "js" | "jsx";

Project Configuration

Legacy API (Deprecated)

Deprecated functions provided for backward compatibility with versions ≤14.2.0.

/** @deprecated Use `defineConfigWithVueTs` + `vueTsConfigs` instead */
export default function createConfig(options?: ConfigOptions): FlatConfig.ConfigArray;

/** @deprecated `defineConfig` is renamed to `defineConfigWithVueTs` in 14.3.0 */
export const defineConfig: typeof defineConfigWithVueTs;

Legacy API

Types

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

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

type ConfigItem = TSESLint.FlatConfig.Config;