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

Project Configuration

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

Factory function for configuring Vue project-specific options like script language support, type checking behavior, and parser settings for optimal performance and accuracy.

Capabilities

configureVueProject Function

Configures global Vue project settings that affect how ESLint processes Vue files and applies TypeScript rules.

/**
 * Configure Vue project-specific options globally
 * Must be called before defineConfigWithVueTs to take effect
 * @param userOptions - Project configuration options
 */
function configureVueProject(userOptions: ProjectOptions): void;

interface ProjectOptions {
  /** 
   * Whether to parse TypeScript syntax in Vue templates
   * Defaults to `true`
   * Setting to `false` improves performance but disables TS syntax in templates
   */
  tsSyntaxInTemplates?: boolean;

  /** 
   * Allowed script languages in `vue` files
   * Defaults to `['ts']`
   */
  scriptLangs?: ScriptLang[];

  /** 
   * Whether to override some `no-unsafe-*` rules to avoid false positives on Vue component operations
   * Defaults to `true`
   * Set to `false` for stricter type checking in TSX-only or metaframework projects
   */
  allowComponentTypeUnsafety?: boolean;

  /** 
   * The root directory of the project
   * Defaults to `process.cwd()`
   */
  rootDir?: string;
}

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

Usage Examples:

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

// Basic configuration - TypeScript only
configureVueProject({
  tsSyntaxInTemplates: true,
  scriptLangs: ["ts"],
  allowComponentTypeUnsafety: true,
});

export default defineConfigWithVueTs(vueTsConfigs.recommended);

// Advanced configuration - Multiple script languages
configureVueProject({
  tsSyntaxInTemplates: false, // Better performance
  scriptLangs: ["ts", "js"], // Allow both TS and JS
  allowComponentTypeUnsafety: true,
  rootDir: __dirname,
});

export default defineConfigWithVueTs(vueTsConfigs.strictTypeChecked);

// Strict TypeScript-only setup
configureVueProject({
  tsSyntaxInTemplates: true,
  scriptLangs: ["ts"], // Only TypeScript
  allowComponentTypeUnsafety: false, // Strict type checking
  rootDir: process.cwd(),
});

export default defineConfigWithVueTs(vueTsConfigs.strictTypeChecked);

Configuration Options

tsSyntaxInTemplates

Controls whether TypeScript syntax is parsed in Vue templates.

// Enable TypeScript in templates (default)
configureVueProject({
  tsSyntaxInTemplates: true,
});

// This allows TypeScript syntax in templates:
// <template>
//   <div>{{ (user as User).name }}</div>
//   <MyComponent :prop="someValue!" />
// </template>

// Disable for better performance
configureVueProject({
  tsSyntaxInTemplates: false,
});

Trade-offs:

true: Full TypeScript support in templates, type-aware rules work on template expressions
false: Better performance, but TypeScript syntax in templates will cause parse errors

scriptLangs

Specifies which script languages are allowed in Vue single-file components.

// TypeScript only (recommended)
configureVueProject({
  scriptLangs: ["ts"],
});

// Allow JavaScript (may cause false positives)
configureVueProject({
  scriptLangs: ["ts", "js"],
});

// Allow JSX/TSX (strongly discouraged - conflicts with type-aware rules)
configureVueProject({
  scriptLangs: ["ts", "tsx", "js", "jsx"],
});

Script Language Support:

"ts": TypeScript - Recommended, full type checking support
"js": JavaScript - Requires allowJs and checkJs in tsconfig.json
"tsx": TypeScript with JSX - Conflicts with type-aware rules
"jsx": JavaScript with JSX - May cause false positives

allowComponentTypeUnsafety

Controls whether to override no-unsafe-* rules for Vue component operations.

// Allow Vue component type patterns (default)
configureVueProject({
  allowComponentTypeUnsafety: true,
});

// This allows patterns like:
// createApp(App)
// useTemplateRef()
// createRouter({ ... })

// Strict type checking (for TSX-only or metaframework projects)
configureVueProject({
  allowComponentTypeUnsafety: false,
});

When to use false:

TSX-only projects without Vue SFCs
Metaframeworks (Nuxt, Quasar) that handle app creation
Projects where you don't directly interact with Vue component types

rootDir

Specifies the project root directory for file discovery and type checking setup.

// Default - current working directory
configureVueProject({
  rootDir: process.cwd(),
});

// Custom root directory
configureVueProject({
  rootDir: "/path/to/project/root",
});

// Relative to current file
configureVueProject({
  rootDir: __dirname,
});

Internal Processing

The configuration affects several internal processes:

Vue File Categorization

Based on scriptLangs and file content analysis:

// Files are categorized as:
type VueFilesByGroup = {
  typeCheckable: string[];    // .vue files with <script lang="ts">
  nonTypeCheckable: string[]; // .vue files with other script languages
};

Parser Configuration

Script language settings determine parser selection:

// Parser mapping based on scriptLangs
const parser = {
  js: "espree",           // For JavaScript files
  jsx: "espree",          // For JSX files  
  ts: tseslint.parser,    // For TypeScript files
  tsx: tseslint.parser,   // For TSX files
};

Rule Application

Configuration affects which rules are applied:

Type-aware rules only apply to typeCheckable Vue files
Performance optimizations skip type checking for nonTypeCheckable files
no-unsafe-* rule overrides are applied based on allowComponentTypeUnsafety

Best Practices

Performance Optimization

// For large projects - disable TS in templates if not needed
configureVueProject({
  tsSyntaxInTemplates: false,
  scriptLangs: ["ts"],
});

Type Safety

// Maximum type safety
configureVueProject({
  tsSyntaxInTemplates: true,
  scriptLangs: ["ts"], // TypeScript only
  allowComponentTypeUnsafety: false, // If applicable to your project
});

Migration from JavaScript

// Gradual migration approach
configureVueProject({
  tsSyntaxInTemplates: false, // Start with false, enable later
  scriptLangs: ["ts", "js"], // Allow both during migration
  allowComponentTypeUnsafety: true,
});

Install with Tessl CLI

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

docs