Vue 的开发环境 VSCode，使用VS Code开发VUE: 必备的插件清单

 Bracket Pair Color DLW

Bracket Pair Colorization Toggler

 

 

开发环境  Visual Studio Code
官网：https://code.visualstudio.com


1 开发插件
    中文插件：Chinese (Simplified) (简体中文)
    Vue代码高亮插件：Vue Volar extension Pack
    浏览器实时预览插件：Live Server

2 Vue 项目结构
.vscode     --- vscode工具的配置文件
.gitignore   --- git忽略文件

================================

1. Vetur

Vetur 是VSCode中最受欢迎的Vue插件之一。它提供了语法高亮、智能感知、Emmet、linting/错误检查、格式化、自动补全、调试等功能。Vetur的的linting功能可以帮助您检查代码中的错误和不良实践，而自动补全功能则可以大大提高编写Vue代码的速度。

2. Vue VSCode Snippets

Vue VSCode Snippets插件提供了大量的Vue代码片段，可以帮助您快速编写常见的Vue代码结构，如组件、指令、混入等。这个插件极大地提高了编写Vue代码的效率。

3. Vue 3 Snippets

对于正在使用Vue 3的开发者来说，Vue 3 Snippets插件是一个不错的选择。它提供了针对Vue 3的代码片段，包括Composition API等。

4. ESLint

ESLint是一个强大的linting工具，可以帮助您检查JavaScript代码中的错误和不良实践。对于Vue项目来说，使用ESLint可以确保代码的一致性和可维护性。

5. Prettier - Code formatter

Prettier是一个流行的代码格式化工具，可以自动调整您的代码风格，使其符合一致的规范。在Vue项目中，使用Prettier可以确保代码风格的统一，减少不必要的格式争议。

6. Debugger for Chrome

Debugger for Chrome插件允许您在VSCode中直接调试Chrome浏览器中的代码。这对于Vue开发者来说非常有用，因为您可以在编写代码的同时实时查看和调试页面效果。

7. Bracket Pair Colorizer

Bracket Pair Colorizer插件可以为括号加上不同的颜色，帮助您更好地区分代码块和嵌套结构。这对于编写复杂的Vue代码来说非常有帮助。

8. Material Icon Theme

Material Icon Theme插件为VSCode提供了丰富的文件图标，使得项目结构更加清晰易读。这对于管理大型Vue项目来说非常有帮助。

9. One Dark Pro

One Dark Pro是一款流行的深色主题插件，可以减少眼睛疲劳，提高编程舒适度。对于长时间编写Vue代码的开发者来说，这是一个不错的选择。

10. npm Intellisense

npm Intellisense插件可以帮助您快速查找和导入npm包，减少了在项目中搜索和手动输入包名的时间。在Vue项目中，我们经常需要导入各种库和组件，这个插件可以大大提高我们的工作效率。

https://developer.baidu.com/article/details/3235505

================================

Vue.js 是一个流行的前端框架，而 Visual Studio Code (VSCode) 是许多开发者的首选代码编辑器。为了提高开发效率，有许多 VSCode 插件可以帮助 Vue 开发者。以下是十款 Vue 开发必备的 VSCode 插件及其使用方式的介绍：

  1. ChatGPT GPT-4 - 海鲸AI

    • 介绍：包含了ChatGPT(3.5/4.0)等多个AI模型。可以实现代码优化，代码解读，代码bug修复等功能，反应迅捷，体验出色，是一个多功能的AI插件。
    • 使用方式：安装后，点击鼠标右键即可显示出代码功能，会在操作面板上弹出海鲸AI，点击相应功能即可

  2. Vue VSCode Snippets

    • 介绍：这个插件提供了一系列的代码片段，帮助你快速编写 Vue 模板、脚本和样式。
    • 使用方式：安装插件后，输入特定的缩写（如 vbase）即可生成基础的 Vue 模板代码。 

  3. ESLint

    • 介绍：ESLint 是一个插件，用于识别和报告 JavaScript 代码中的模式，它可以帮助你保持代码质量和编码风格的一致性。
    • 使用方式：安装 ESLint 插件和相应的 Vue ESLint 配置包后，在 .eslintrc 文件中配置你的规则。 

  4. Prettier - Code formatter

    • 介绍：Prettier 是一个流行的代码格式化工具，它支持多种语言和框架，包括 Vue。
    • 使用方式：安装后，可以通过快捷键（通常是 Shift + Alt + F）或保存时自动格式化代码。 

  5. Vue Peek

    • 介绍：Vue Peek 插件允许你对 Vue 组件进行快速导航，特别是在查找组件定义的时候非常有用。
    • 使用方式：安装后，只需点击组件名，即可跳转到组件的定义处。 

    •  

  6. Vue 3 Snippets

    • 介绍：这个插件专为 Vue 3 提供了代码片段，帮助开发者快速编写 Composition API 等新特性的代码。
    • 使用方式：输入特定的缩写，如 v3setup，插件会自动展开为对应的代码片段。 

  7. Auto Rename Tag

    • 介绍：当你修改一个 HTML/XML 标签时，这个插件会自动帮你修改对应的闭合标签。
    • 使用方式：安装后，当你更改任何标签的名称时，它的配对标签也会自动更新。 

  8. Bracket Pair Colorizer

    • 介绍：这个插件会用不同的颜色来区分代码中的括号对，使得代码更加易于阅读。
    • 使用方式：安装后，可以在设置中自定义不同括号对的颜色。 

  9. Path Intellisense

    • 介绍：自动完成文件路径，这对于在 Vue 文件中导入组件或其他文件非常有用。
    • 使用方式：安装后，当你输入 import 语句或其他需要文件路径的地方时，插件会提供自动完成建议。 

  10. Vuesion-Theme

    • 介绍：Vuesion-Theme 是一个为VSCode设计的颜色主题，它提供了一种专为Vue.js开发者优化的界面配色方案。以下是如何使用Vuesion-Theme的步骤：

    • 使用方式：转到“扩展”视图，可以通过点击侧边栏的扩展图标或者按下Ctrl+Shift+X（在Mac上是Cmd+Shift+X）来实现。

以上插件大多数都可以通过 VSCode 的扩展商店进行安装，安装方法如下：

  1. 打开 VSCode。
  2. 转到侧边栏的扩展视图，可以通过点击左侧的扩展图标或者按下 Ctrl+Shift+X 快捷键。
  3. 在搜索框中输入插件的名称。
  4. 找到插件后，点击“安装”按钮。

安装完毕后，大部分插件会自动启动并开始工作。对于需要额外配置的插件，如 ESLint 或 Prettier，你可能需要创建或修改项目中的配置文件，或者调整 VSCode 的工作区或全局设置。

 
https://juejin.cn/post/7330115846139215912

================================

1、vetur

2、Vue 2 Snippets：主要加强vue的便捷写法

3、language-stylus

4、Auto Close Tag：自动闭合标签所用

5、Auto Rename Tag：自动修改重命名配对的标签

6、Bookmarks：可以对成片的代码做一些书签标记，方便后续查看

7、Bracket Pair Colorizer：对括号进行着色，方便区分，

8、Copy Relative Path：用于复制文件的完整路径和相对路径

9、Path Intellisense：路径自动感知，在配置文件中配置@后我们就可以很方便快捷的引用各种文件了

10、Vue Peek：用于Vue快速查看组件定义以及组件跳转。

11、JavaScript (ES6) code snippets：用于快速生成ES6代码片段

12、Material Icon Theme：Material风格的icon文件图标

13、One Dark Pro：一款热门的主题

14、Version Lens：显示npm，jspm，bower，dub和dotnet核心的软件包版本信息

15、vscode-element-helper：element-ui插件

16、Beautify：主要拿它来格式话html的

17、StandardJS - JavaScript Standard Style：配合该插件可以自动将你的代码格式化成规范的代码。

18、ESLint：规范代码格式的

https://cloud.tencent.com/developer/article/1687219

 ================================

1. Auto Close Tag  自动闭合html标签
2. Auto Rename Tag 修改HTML标签时，自动修改匹配的标签
3. Debugger for Chrome 调试工具
4. ESLint 高亮提示
5. open in browser 将html文件在浏览器中打开
6. Prettier - Code formatter 代码格式化工具
7. Vetur 目前比较好的Vue语法高亮
8. vscode-icons  文件图标，方便定位文件
9. vue VSCode Snippets 生成vue的模板代码
10. vue-helper 代码提示插件

https://segmentfault.com/a/1190000022861278

================================

 

 

 

 

 

================================

 

posted @ 2025-04-05 17:52  emanlee  阅读(6834)  评论(0)    收藏  举报