推荐安装的 VScode 中的 Vue 插件

最新推荐文章于 2026-05-10 14:51:54 发布

原创最新推荐文章于 2026-05-10 14:51:54 发布 · 1.4k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vscode

VScode插件专栏收录该内容

1 篇文章

订阅专栏

本文介绍了VSCode中用于Vue开发的几个高效插件，包括PathAutocomplete（提供路径自动补全功能）、Vue3Snippets（提供Vue代码快捷编写和自动补全）、AutoCloseTag（自动闭合HTML标签）以及Vetur（全方位的Vue工具支持）。通过这些插件，开发者可以显著提高Vue项目的开发效率和代码质量。

推荐安装的 VScode工具中的 Vue 插件

Path Autocomplete

作用: 可以配置简写路径
名称: Path Autocomplete
ID: ionutvmi.path-autocomplete
说明: Provides path completion for visual studio code.
发布者: Mihai Vilcu
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete

先点开VScode中的设置, 再点开右上角拆分编辑器旁边的按钮, 即可以打开 settings.json 文件, 在settings.json内添加下面的代码

// 导入文件时 是否携带文件的扩展名
"path-autocomplete.extensionOnImport": true,
// 配置 @ 的路径提示
"path-autocomplete.pathMappings": {
     "@": "${folder}/src"
 },

Vue 3 Snippets

作用: vue代码的快捷编写功能,自动补全。
名称: Vue 3 Snippets
ID: hollowtree.vue-snippets
说明: A Vue.js 3 And Vue.js 2 Code Snippets Extension
发布者: hollowtree
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets

Auto Close Tag

名称: Auto Close Tag (自动闭合标签)
ID: formulahendry.auto-close-tag
说明: Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text
发布者: Jun Han
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

Vetur

名称: Vetur
ID: octref.vetur
说明: Vue tooling for VS Code
发布者: Pine Wu
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=octref.vetur

后续继续添加