Skip to content

README.md

Latest commit

 

History

History
119 lines (85 loc) · 4.94 KB

README.md

File metadata and controls

119 lines (85 loc) · 4.94 KB

Vue (Official)

Version Downloads

Vue language support extension for VSCode, providing a full development experience for Vue Single File Components (SFCs).

Features

  • Syntax Highlighting - Supports HTML, CSS, JavaScript, TypeScript, Pug, SCSS, Less, etc. in Vue SFCs
  • Intelligent Completion - Auto-completion for components, props, events, slots, and directives
  • Type Checking - Full TypeScript type inference, including expressions in templates
  • Error Diagnostics - Real-time display of Vue compiler errors
  • Code Navigation - Go to definition, find references
  • Refactoring - Rename, extract component
  • Formatting - Format SFCs by block

Installation

Search for Vue (Official) or Vue.volar in the VSCode extension marketplace and click install.

Configuration

Editor Settings

Option Type Default Description
vue.editor.focusMode boolean false Enable focus mode
vue.editor.reactivityVisualization boolean true Show reactivity variable visualization
vue.editor.templateInterpolationDecorators boolean true Show template interpolation decorators

Completion Settings

Option Type Default Description
vue.suggest.componentNameCasing string preferPascalCase Component name casing style (preferKebabCase, preferPascalCase, alwaysKebabCase, alwaysPascalCase)
vue.suggest.propNameCasing string preferCamelCase Prop name casing style (preferKebabCase, preferCamelCase, alwaysKebabCase, alwaysCamelCase)
vue.suggest.defineAssignment boolean true Suggest assignments for defineProps, etc.

Auto-Insert Settings

Option Type Default Description
vue.autoInsert.dotValue boolean false Auto-insert .value
vue.autoInsert.bracketSpacing boolean true Auto-insert spaces in {{ }}

Inlay Hints Settings

Option Type Default Description
vue.inlayHints.destructuredProps boolean false Show types for destructured props
vue.inlayHints.inlineHandlerLeading boolean false Show parameters for inline handlers
vue.inlayHints.missingProps boolean false Show missing required props
vue.inlayHints.optionsWrapper boolean false Show Options API wrapper
vue.inlayHints.vBindShorthand boolean false Show v-bind shorthand hints

Formatting Settings

Option Type Default Description
vue.format.script.enabled boolean true Enable script block formatting
vue.format.template.enabled boolean true Enable template block formatting
vue.format.style.enabled boolean true Enable style block formatting
vue.format.wrapAttributes string auto Attribute wrapping style

Server Settings

Option Type Default Description
vue.server.path string - Custom language server path
vue.server.includeLanguages string[] ["vue"] Language IDs to process
vue.trace.server string off Server trace level

Commands

Command Description
Vue: Welcome Open the welcome page
Vue: Restart Server Restart the language server

Using Workspace TypeScript

It is recommended to use the TypeScript version from your project instead of the one built into VSCode:

  1. Create .vscode/settings.json in your project root
  2. Add the following settings:
{
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}

Troubleshooting

If you encounter any issues, you can try the following steps:

  1. Reload Window: Run the Developer: Reload Window command in VSCode
  2. Check vue-tsc: Run npx vue-tsc --noEmit in the command line to check for type errors
  3. Check Output Channel: In VSCode's "Output" panel, select Vue Language Server to see if there are any error messages

If the problem persists, feel free to open an issue on GitHub Issues.

❤️ Sponsors

This project's continued development is made possible by our generous sponsors:

License

MIT License