or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration-presets.mdfile-processors.mdindex.mdlinting-rules.mdplugin-configuration.md
tile.json

index.mddocs/

ESLint Plugin Vue

ESLint Plugin Vue is the official ESLint plugin for Vue.js applications, offering comprehensive linting rules and configurations specifically designed for Vue.js development. It includes rules for both Vue 2 and Vue 3, template syntax validation, component structure enforcement, and code style consistency. The plugin integrates with vue-eslint-parser to properly analyze Vue Single File Components (SFCs) and provides multiple preset configurations that can be easily adopted in projects.

Package Information

  • Package Name: eslint-plugin-vue
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: npm install eslint-plugin-vue
  • Peer Dependencies: ESLint ^8.57.0 || ^9.0.0, vue-eslint-parser ^10.0.0

Core Imports

ESM Import (with modern Node.js/TypeScript):

import eslintPluginVue from "eslint-plugin-vue";

CommonJS Require (traditional):

const eslintPluginVue = require("eslint-plugin-vue");

Basic Usage

ESLint Flat Config (Recommended)

import eslintPluginVue from "eslint-plugin-vue";

export default [
  // Use a predefined configuration
  ...eslintPluginVue.configs["flat/essential"],
  
  // Or configure manually
  {
    files: ["*.vue"],
    languageOptions: {
      parser: require("vue-eslint-parser"),
    },
    plugins: {
      vue: eslintPluginVue,
    },
    rules: {
      "vue/multi-word-component-names": "error",
      "vue/no-unused-vars": "error",
    },
  },
];

Legacy ESLint Config

module.exports = {
  extends: [
    "plugin:vue/vue3-essential", // or vue2-essential for Vue 2
  ],
  plugins: ["vue"],
  rules: {
    "vue/multi-word-component-names": "error",
    "vue/no-unused-vars": "error",
  },
};

Architecture

ESLint Plugin Vue is structured around several key components:

  • Plugin Object: Main export containing meta, configs, rules, and processors
  • Configuration Presets: Pre-built ESLint configurations for different Vue versions and recommendation levels
  • Rules Engine: 266 individual linting rules covering all aspects of Vue development
  • Processors: Custom ESLint processors for handling Vue Single File Components (.vue files)
  • Utility Library: Comprehensive utilities for analyzing Vue components and templates

Capabilities

Plugin Configuration

Core plugin object structure and metadata for integrating with ESLint.

interface VueESLintPlugin {
  meta: {
    name: string;
    version: string;
  };
  configs: PluginConfigs;
  rules: PluginRules;
  processors: PluginProcessors;
}

Plugin Configuration

Configuration Presets

Pre-built ESLint configurations for different Vue.js versions and recommendation levels, supporting both legacy and flat config formats.

interface PluginConfigs {
  // Legacy configs
  base: LegacyConfig;
  essential: LegacyConfig;
  "strongly-recommended": LegacyConfig;
  recommended: LegacyConfig; 
  "vue2-essential": LegacyConfig;
  "vue2-strongly-recommended": LegacyConfig;
  "vue2-recommended": LegacyConfig;
  
  // Flat configs
  "flat/base": FlatConfig[];
  "flat/essential": FlatConfig[];
  "flat/strongly-recommended": FlatConfig[];
  "flat/recommended": FlatConfig[];
  "flat/vue2-essential": FlatConfig[];
  "flat/vue2-strongly-recommended": FlatConfig[];
  "flat/vue2-recommended": FlatConfig[];
  
  // Format-agnostic configs
  "no-layout-rules": LegacyConfig;
}

Configuration Presets

Linting Rules

266 comprehensive ESLint rules covering Vue.js template syntax, component structure, lifecycle methods, and best practices.

interface PluginRules {
  [ruleName: string]: ESLintRule;
}

interface ESLintRule {
  meta: RuleMeta;
  create: (context: RuleContext) => RuleListener;
}

Linting Rules

File Processors

Custom ESLint processors for analyzing Vue Single File Components and handling Vue-specific comment directives.

interface PluginProcessors {
  ".vue": ESLintProcessor;
  vue: ESLintProcessor;
}

interface ESLintProcessor {
  preprocess: (code: string, filename: string) => string[];
  postprocess: (messages: LintMessage[][]) => LintMessage[];
  supportsAutofix: boolean;
  meta: ProcessorMeta;
}

File Processors

Types

interface LegacyConfig {
  parser?: string;
  parserOptions?: ParserOptions;
  plugins?: string[];
  rules?: Record<string, RuleConfig>;
  overrides?: ConfigOverride[];
}

interface FlatConfig {
  files?: string[];
  ignores?: string[];
  languageOptions?: LanguageOptions;
  plugins?: Record<string, ESLintPlugin>;
  rules?: Record<string, RuleConfig>;
  processor?: string | ESLintProcessor;
}

interface RuleMeta {
  type: "problem" | "suggestion" | "layout";
  docs: {
    description: string;
    categories?: string[];
    url: string;
    extensionSource?: {
      url: string;
      name: string;
    };
  };
  fixable?: "code" | "whitespace";
  schema?: JSONSchema;
  deprecated?: boolean;
  replacedBy?: string[];
}

interface RuleContext {
  getSourceCode(): SourceCode;
  report(descriptor: ReportDescriptor): void;
  options: any[];
  filename: string;
}

type RuleConfig = "off" | "warn" | "error" | 0 | 1 | 2 | [RuleLevel, ...any[]];
type RuleLevel = "off" | "warn" | "error" | 0 | 1 | 2;