// Description
Language Support for Vue
// Readme
Open VSX#Vue (Official)
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:
- ›Create
.vscode/settings.jsonin your project root - ›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:
- ›Reload Window: Run the
Developer: Reload Windowcommand in VSCode - ›Check
vue-tsc: Runnpx vue-tsc --noEmitin the command line to check for type errors - ›Check Output Channel: In VSCode's "Output" panel, select
Vue Language Serverto 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
// Install
Open this extension directly in your IDE — no CLI, no extra tools.
vue.volarIf your IDE doesn't open automatically, copy the ID above and paste it into the Extensions view (⌘P → ext install <id>).
// Source signals
Live from open-vsx.org. Refreshed hourly.
// Are you the author?
This listing is mirrored from Open VSX. Claim it to ship a native OXP build, customise the page, and respond to reviews.
Claim this listing// Package Info
- Version
- 3.2.8
- Owner
- @vsx-vue
- Downloads
- 4.9M
- Stars
- 0