vscode 开发vue需要安装的插件

https://blog.csdn.net/WindSneaker/article/details/123244006

Vetur
支持.vue文件的语法高亮显示,除了支持template模板以外,还支持大多数主流的前端开发脚本和插件,比如Sass和TypeScript

eslint插件
可以帮助我们检查Javascript编程时的语法错误

Auto Rename Tag
这是一个修改标签对的插件,自动重命名配对的HTML / XML标签
// 默认情况下,它将["*"]为所有语言激活。

{
"auto-rename-tag.activationOnLanguage": ["html", "xml", "php", "javascript"]
}
1
2
3
HTML CSS Support
在编写样式表的时候,自动补全功能大大缩减了编写时间

Chinese (Simplified) Language Pack for Visual Studio Code
中文简体语言包

Auto Close Tag
自动添加HTML / XML关闭标签

HTML Snippets
代码自动填充

HTML Boilerplate
提供生成标准HTML样板代码

Image Preview
鼠标移到路径里显示图像预览

intelliSense for CSS class names in HTML
项目中 css 文件里的名称智能提示在 html 中

JavaScript (ES6) code snippets
es6代码片段

Live Server
浏览器实时刷新

Path Intellisense
路径自动补全

open in browser
浏览器中打开html

Markdown Preview Enhanced
实时预览markdown,markdown使用者必备

Color Info
这个便捷的插件,将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标,就可以预览色块中色彩模型的(HEX、 RGB、HSL 和 CMYK)相关信息了

Beautify
格式化代码

Git History
查看git日志以及图表和详细信息

Guides
代码的标签对齐线

jQuery Code Snippets
jq代码段提示

IntelliSense for CSS class names in HTML
智能地给你已定义CSS类名的提示

VSCode Great Icons
小图标区分不同的文件类型

Bracket Pair Colorizer
给括号加上不同的颜色,便于区分不同的区块
-----------------------------------------------------------------------------------------------

https://jiannuan.blog.csdn.net/article/details/90340647?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-90340647-blog-123244006.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-90340647-blog-123244006.pc_relevant_default&utm_relevant_index=1

 

工欲善其事,必先利其器

以下就是开发Vue必备插件:
Vetur —— 语法高亮、智能感知、Emmet等
包含格式化功能, Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化选中代码,两个Ctrl需要同时按着)

EsLint —— 语法纠错

Debugger for Chrome —— 映射vscode上的断点到chrome上,方便调试(配置有点麻烦,其实我没用这个)

Auto Close Tag —— 自动闭合HTML/XML标签

Auto Rename Tag —— 自动完成另一侧标签的同步修改

JavaScript(ES6) code snippets —— ES6语法智能提示以及快速输入,除js外还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间

Path Intellisense —— 自动路径补全

HTML CSS Support —— 让 html 标签上写class 智能提示当前项目所支持的样式

Beautify——格式化代码,值得注意的是,beautify插件支持自定义格式化代码规则

Bracket Pair Colorizer——给括号加上不同的颜色,便于区分不同的区块,使用者可以定义不同括号类型和不同颜色

open in browser——直接右键项目单击启动

posted on 2022-06-27 10:12  四海骄阳  阅读(844)  评论(0编辑  收藏  举报

导航