vuejs/vetur
Vetur
Vetur is a Visual Studio Code extension that provides comprehensive language support for Vue single-file components. It parses .vue files into separate template, script, and style regions, then delegates each region to its own language service for independent processing. This architecture enables IntelliSense, type-checking, formatting, and linting across all embedded languages within a Vue file.
The extension distinguishes itself through deep integration with Vue's component model. It infers TypeScript types for template expressions by analyzing component props, data, and computed properties, and validates prop signatures and types against declared definitions. Vetur also runs type-checking on Vue templates from the command line, catching type errors that Vue and TypeScript alone miss. For component libraries, it supports embedding tag and attribute definitions inside npm packages, ensuring version-matched auto-completion when users install those packages.
Beyond core editing features, Vetur handles multi-project workspace configuration for monorepos, resolves module aliases from Webpack or TypeScript path mappings, and integrates with Yarn Plug'n'Play. It provides syntax highlighting, Emmet abbreviation expansion, and per-language formatter selection for each embedded region. The extension also supports launching a Chrome debugger from the editor to set breakpoints and step through Vue component code during development.
Features
- Vue Language Extensions - A VS Code extension providing IntelliSense, formatting, linting, and debugging for Vue single-file components.
- Vue IDE Workflows - Provides full language support including IntelliSense, type-checking, formatting, and debugging for Vue inside VS Code.
- Single-File Component Parsers - Parses .vue files into separate template, script, and style sections for independent language service processing.
- IntelliSense Providers - Provides auto-completion, hover information, and type-checking for expressions and components inside Vue templates.
- JavaScript IntelliSense - Offers standard IntelliSense for JavaScript and TypeScript code within script blocks of .vue files.
- Vue Template Type Checkers - Runs type-checking on Vue templates from the command line to catch type errors before runtime.
- Component Inspection Tools - Shows auto-completion and hover details for component properties from popular frameworks and custom components.
- Template Expression IntelliSense - Provides IntelliSense, diagnostics, hover, jump-to-definition, and find-references for JavaScript expressions inside Vue templates.
- Vue File Linters - Checks .vue files for errors and style violations using built-in linting rules.
- Component API Metadata Extraction - Shows hover information and auto-completion for component properties, events, and slots from frameworks or custom components.
- Component Tag and Attribute Completions - Reads project dependencies and loads bundled tag/attribute definitions for auto-completion of Vue components.
- Template Type Inference - Infers TypeScript types for template expressions by analyzing component props, data, and computed properties.
- Component Auto-Completions - Suggests component names, props, and events from frameworks or custom components as the user types.
- Template Expression Type Validators - Verifies that interpolation expressions assigned to component props match declared prop types.
- Vue - Implements a language server that parses .vue files and delegates template, script, and style regions to their respective services.
- Vue Template Type Checkers - Runs type-checking on Vue templates from the command line or editor to catch type errors before runtime.
- Script Block Error Captures - Checks JavaScript and TypeScript code inside script blocks for errors and highlights them inline.
- Vue Template Type Checkers - Runs type-checking on Vue templates from the command line to catch type errors that Vue and TypeScript alone miss.
- Vue File - Automatically formats and lints Vue single-file components with configurable rules for embedded languages.
- HTML Syntax Validations - Checks HTML templates for syntax errors and reports problems directly in the editor.
- Single File Components - Parses .vue files into separate template, script, and style sections for independent language service processing.
- HTML Attribute Bindings - Completes HTML tags, attributes, Vue directives, and template interpolation expressions in .vue files.
- Syntax Highlighters - Applies syntax highlighting to template, script, and style sections of .vue files, including Vue directives and interpolations.
- Style Block Validators - Validates CSS, SCSS, and Less code inside style blocks and highlights errors inline.
- Embedded Language Service Delegators - Delegates each embedded language region to its respective language service for IntelliSense, diagnostics, and formatting.
- Vue Component Libraries - Provides auto-completion for Vue component names, props, and events from libraries and custom components.
- Auto-Completion Providers - Ships an IntelliSense provider that auto-completes Vue component names, props, and events in templates.
- Component Data Bundles - Embeds tag and attribute definitions inside npm packages for version-matched auto-completion.
- Multi-Language Formatters - Selects which formatter to apply for each embedded language in a .vue file, with an option to disable formatting for a language.
- Import Alias Mappings - Maps custom import paths from Webpack aliases or TypeScript path mappings to real file locations for IntelliSense.
- Component Data Bundles - Embeds tag and attribute definitions inside npm packages for version-matched auto-completion.
- Monorepo Project Definitions - Uses a configuration file to define multiple sub-projects with their own package.json and TypeScript config.
- Template File Linting - Applies eslint-plugin-vue rules to template code, flagging violations of configurable style and correctness rules.
- Project Configuration - Reads local configuration files like .prettierrc or .eslintrc to apply project-specific formatting rules.
- Project Scope Resolution - Reads tsconfig, jsconfig, and workspace configuration files to resolve module aliases and project settings.
- Vue Debugging Integrations - Sets breakpoints and steps through Vue component code directly from the editor during development.
- Vue.js Tooling Configurations - Configures the project root with package.json and tsconfig/jsconfig for Vue version detection and file indexing.
- Vue Multi-Project Workspace Configurations - Sets up monorepo or multi-project Vue workspaces with shared configuration for language support and IntelliSense.
- Project Workspace Mapping - Maps multiple Vue projects in a monorepo using a configuration file for per-project language support.
- Type Definition Resolvers - Provides IntelliSense for imported modules by resolving their bundled or community-provided type definitions.
- Component Prop Types - Verifies that expression types bound to component props match declared prop types, including TypeScript-annotated types.
- Embedded Language Validations - Checks JavaScript, TypeScript, CSS, SCSS, and Less code inside .vue files for errors.
- Embedded Language Formatters - Formats each language region in a Vue file independently using language-specific formatters.
- Global Component Registration - Lists globally available Vue components in a configuration file so the editor offers completions for them across the project.
- Multi-Project Workspace Definitions - Uses a configuration file to define settings, TypeScript configs, and global components for monorepo layouts.
- Component Prop Validations - Checks that props passed to child components match declared prop names and required status.
- Custom Component Tags - Defines custom HTML tags and their attributes in a workspace for auto-completion in templates.
- Workspace Component Definitions - Lets a workspace declare its own tags and attributes via a vetur key in package.json for auto-completion.
- Formatters - Ships an automatic formatter that applies consistent style rules across template, script, and style sections of .vue files.
- Vue Single-File Type Shims - Provides a shim type file so TypeScript can import and type-check .vue files without errors.
- Formatters - Automatically formats Vue template, script, and style sections according to configured rules.
- CSS IntelliSense Providers - Provides IntelliSense for CSS properties and values inside style blocks using css, scss, less, postcss, or stylus.
- Semantic Highlighters - Applies semantic token coloring to TypeScript and JavaScript code inside .vue files for richer syntax highlighting.
- Component Data Bundling - Allows a Vue UI library to bundle tags/attributes JSON in its package for automatic auto-completion.
- Vue Component Debuggers - Launches a Chrome debugger from VS Code to set breakpoints and step through Vue component code.
