CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-eslint-plugin-vue

Official ESLint plugin for Vue.js applications, offering comprehensive linting rules and configurations specifically designed for Vue.js development.

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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;
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/eslint-plugin-vue@10.4.x
Publish Source
CLI
Badge
tessl/npm-eslint-plugin-vue badge