vscode-market-version-badge vscode-market-downloads-badge vscode-market-installs-badge open-vsx-version-badge open-vsx-downloads-badge license-badge Ask DeepWiki
旧版插件 vscode-mpx 基于 Vue 2 的 Vetur 实现,目前维护不活跃,且存在功能局限性。另一款旧插件 mpx-template-features 针对 Mpx 模板补强了定义跳转等功能,但仍存在不足。随着 Vue 3 转向基于 Volar 的新插件 Vue - Official,我们决定全新打造基于 Volar 的 Mpx 新版插件,提供更丰富的语言特性和更流畅的开发体验,以满足现代 Mpx 项目需求。
| Feature | Legacy | New |
|---|---|---|
| 语法高亮 | ✅ | ✅ |
| SFC blocks 语言支持 | ✅ | ✅ |
| Emmet 支持 | ✅ | ✅ |
| 代码片段 snippets | ✅ | ✅ (enhanced) |
| 格式化 formatter | ✅ | ✅ (enhanced) |
| <template> 原生组件标签及属性补全提示 | ✅ | ✅ (enhanced) |
| 关联 tsconfig 配置 | ✅ | ✅ (enhanced) |
| 支持 Monorepo | ❌ | ✅ |
| 支持选择 typescript 版本 | ❌ | ✅ |
| SFC 编辑器视图拆分 | ❌ | ✅ |
| <template> 支持 TS 类型检查、补全提示... | ❌ | ✅ |
| <template> 支持定义跳转、查找参考引用 | ❌ | ✅ |
| <template> 样式类名跳转 <style> | ❌ | ✅ |
| <template> style 属性支持原生 CSS 补全提示 | ❌ | ✅ |
| <template> 原生组件属性检查 | ❌ | ✅ |
| <template> 自定义组件跳转 | ❌ | ✅ |
<template> {{}} 内插值代码高亮显示 |
❌ | ✅ |
| <json> mpx json 语法 schema 支持 | ❌ | ✅ |
有关插件详细功能介绍和使用说明,请参阅 Wiki 文档。
| Package | Version | Description | Changelog |
|---|---|---|---|
| mpx-official | vscode-market-version-badge-1 | VS Code extension | changelog |
| @mpxjs/language-server | server-npm-version-badge | LSP server | changelog |
| @mpxjs/language-service | service-npm-version-badge | Language service layer | changelog |
| @mpxjs/language-core | core-npm-version-badge | Language core layer | changelog |
| @mpxjs/language-shared | shared-npm-version-badge | Shared utilities | changelog |
| @mpxjs/typescript-plugin | ts-plugin-npm-version-badge | TypeScript plugin | changelog |
---
config:
theme: neutral
---
flowchart TD
%% Define all packages
shared[ @mpxjs/language-shared ]
core[ @mpxjs/language-core ]
typescript[ @mpxjs/typescript-plugin ]
service[ @mpxjs/language-service ]
server[ @mpxjs/language-server ]
vscode[ Mpx VSCode extension ]
%% Define dependencies
typescript -.-> service
typescript -.-> vscode
shared --> core
shared --> service
core --> typescript
core --> service
service --> server
core --> server
server --> |LSP| vscode
%% Styling
classDef core fill:#d4f1f9
classDef typescript fill:#ececff
classDef extension fill:#d5e8d4
class shared,core,service,server core
class typescript typescript
class vscode,inspect extension
For details on how to contribute to this project, please refer to our Contributing Guide.
For architecture details and source code documentation, please refer to our Deepwiki.
For details on our planned features and future direction, please refer to our Roadmap.
- vue-language-tools & Volar, created by Johnson Chu.
- vscode-mpx, a legacy VS Code extension for Mpx, created by pagnkelly.
- mpx-template-features, a legacy VS Code extension for Mpx template, created by Soon Wang.