vue3 使用什么 vscode 插件？

Question

我原先用的是 Vetur，在vue3的环境下用有一些问题

比如找不到某个模块，可能Vetur是给2用的，放在3会有一些不兼容的情况

代码高亮，语法提示是有了，就是这个在编译时报错运行时没啥毛病，看着有点不舒服:sweat。。
所以想问问有没有什么更好的插件推荐的
只要有代码提示，语法高亮，不要像上面这样报错的都行。。

Answer 1

Vue - IDE 支持

推荐使用的 IDE 是 VS Code，配合 Vue - Official 扩展 (之前是 Volar)。该插件提供了语法高亮、TypeScript 支持，以及模板内表达式与组件 props 的智能提示。

Answer 2

针对Vue 3开发，在VS Code中有一些插件可以替代或补充Vetur，以提供更好的支持和功能。以下是一些推荐的插件：

1. Volar

   • 描述：Volar是一个专为Vue 3设计的现代化插件，旨在替代Vetur并提供更好的支持。它特别针对Vue 3的新特性（如Composition API）进行了优化，并提供了更好的TypeScript集成和高性能代码提示。
   • 功能：语法高亮、智能感知、自动补全、错误检查等。

2. Vue 3 Snippets

   • 描述：这个插件提供了大量的Vue 3代码片段，用于快速生成常用的Vue.js代码。它支持Vue 3.x版本的代码片段，如模板、组件、钩子函数等，可以帮助开发者节省编码时间。
   • 功能：快速插入代码片段、自定义片段等。

3. ESLint

   • 描述：ESLint是一个JavaScript代码检查工具，它可以帮助开发者发现和修复代码中的问题，如语法错误、代码风格不一致等。在Vue.js项目中使用ESLint可以帮助规范代码风格，提高代码质量和可维护性。
   • 功能：代码风格检查、错误提示、可配置性等。

4. Prettier

   • 描述：Prettier是一个代码格式化工具，它可以帮助开发者自动格式化代码，使代码具有统一的风格。在Vue项目中使用Prettier可以让代码更加易读、易维护。
   • 功能：自动格式化代码、支持多种语言（如JavaScript、CSS、HTML等）、与ESLint规则协调工作等。

5. Path Intellisense

   • 描述：这个插件提供路径自动补全功能，可以快速找到文件和目录，减少手动输入路径的工作量。对于大型项目，路径自动补全能节省大量时间。
   • 功能：路径补全、减少错误等。

6. Auto Import

   • 描述：Auto Import插件可以自动导入需要的模块和组件。在使用新组件或函数时，它会自动添加import语句，减少手动操作，提高开发效率。
   • 功能：模块自动导入、提高开发效率等。

7. Vue Peek

   • 描述：Vue Peek插件允许开发者快速查看Vue组件中的模板、样式和脚本代码。通过按住Ctrl键并单击Vue组件的标签，可以跳转到相关的代码部分，方便理解和调试代码。
   • 功能：快速查看Vue组件定义、支持在模板、样式和脚本之间轻松切换等。

8. Debugger for Chrome

   • 描述：这个插件与Chrome调试器集成，方便调试Vue 3应用程序。它支持断点、监视变量等调试功能，有助于开发者在开发过程中快速定位和解决问题。
   • 功能：断点调试、监视变量、集成Chrome调试器等。

这些插件可以提供比Vetur更好的Vue 3支持，并解决一些兼容性问题。你可以根据自己的需求和喜好选择合适的插件进行安装和配置。