VS Code中关于Vue的插件使用

插件安装文件位置：C:\Users\administrator\.vscode\extensions
主要是找到.vscode这个文件

安装之后记得重新启动VS Code

一、插件

1.建议部分

1.1Chinese(Simplified)(简体中文) Language Pack for Visual Studio Code

1.2Auto Close Tag （自动补全html标签）

1.3Auto Rename Tag （修改html标签，自动完成尾部闭合标签的同步修改）

clg 等于console.log()

1.4AutoFileName

1.5Code Runner

作用：用于运行程序

1.6Easy LESS

less动态样式语言，极大的提高了我们书写css样式的效率

1.7ESLint

ESLint插件能够检测代码语法问题与格式问题，对项目代码风格统一至关重要。

1.8HTML CSS Support

在编写样式表的时候，自动补全功能，大大缩减了编写时间，推荐！

1.9HTML Snippets

这款插件包含html标签，非常全，很实用。

1.10Javascript (ES6) code snippets

ES6语法快捷键支持,以及快速输入，不仅仅支持.js，还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间

1.11Open In Browser

这个插件能让你从 vscode 打开 html 文件，并且可以自由选择用哪个浏览器打开
VS Code不像IDE一样能够直接在浏览器中打开html，而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari设置默认浏览器

1.12Open In Default Browser

1.13Vetur

语法错误检查：包括 CSS、LESS、JavaScript、TypeScript
语法高亮：包括HTML、Pug CSS、LESS、Stylus JS、TS emmet
代码自动补全（目前还是初级阶段）：包括HTML、CSS、LESS、JavaScript、TypeScript

配合ESLint插件使用效果更佳

1.14VS Color Picker

#fff 自动提示

1.15Vue 3 Snippets

Vue 智能感知
在页面中输入vuein，然后按Tab

1.16Vue Language Features(volar)

2.可选择部分

2.0 会了吧（就是这个名字）

你是不是还在为英文单词不认识而发愁，是不是认识不会读而烦心， 这个插件你值得拥有。
里面会有单词介绍，点击还会有发音。

2.1Bracket Pair Colorizer（用于颜色匹配括号）

用于颜色匹配括号

2.2Codesnap（在编辑器中直接截图）

作用：在编辑器中直接截图
使用：选中截图代码，右键选择codesnap

2.3Code Spell Checker（代码拼写检查器）

代码拼写检查器，用于帮助我们发现代码中拼写错误的单词
可以自动检测驼峰式、下划线式单词

2.4Codelf（变量取名）

变量取名

2.5CSS peak（用于查看样式CSS）

作用：用于查看样式，切换HTML和CSS页面
使用：按住Ctrl，鼠标移动到样式名称，就可以看到样式了

2.6cssrem(px to rem & rpx)

在VSCode中的px和rem单位之间转换，并支持WXSS
这个插件默认的html文字大小 cssroot 为16px。
修改默认的16px为其他数值。设置(Ctrl + ,)——>在搜索框输入cssroot
可以看到默认的16px，修改为你想要的值就可以了。

2.6.1px2vw

将px转换为vw的插件。
在插件中打开扩展设置或者打开设置(Ctrl + ,)在搜索框输入px2vw

2.7Debugger for Chrome

直接在vscode里面进行调试js文件，跟谷歌的控制台是一样的功能，下载了它就不用打开浏览器的控制台就能进行打断点。
需要配置vscode的lauch.json的谷歌调试相关配置

2.8Document This（注释文档生成）

注释文档生成

2.9EditorConfig for Visual Studio Code

EditorConfig 是一种被各种编辑器广泛支持的配置，使用此配置有助于项目在整个团队中保持一致的代码风格。

2.10Error Lens（代码错误立即提示）

2.11filesize

在底部状态栏显示文件大小，点击后还可以看到详细创建、修改时间

2.12Guides（显示代码对齐辅助线，很好用）

2.13Git History（以图表的形式查看Git日志）（Git提交历史）

以图表的形式查看Git日志
Git提交历史

2.14GitLens----- Git Supercharged

查看git文件提交历史。
git功能增强插件，鼠标放到代码行上，每一行代码的变动都一清二楚

2.15Highlight Matching Tag（高亮匹配标签）

高亮匹配标签

2.16indent-rainbow（用于（彩虹色）缩进管理）

用于（彩虹色）缩进管理

2.17Live Server

在 vscode 中就可以直接启动一个本地服务，并且能监听文件变化自动刷新网页
这个插件很有用，安装之后可以打开一个简单的服务器，而且还会自动更新。
安装之后，打开项目文件夹，再在文件上点击右键>就会出现一个Open with Live Server的选项，就会自动打开浏览器了。
默认端口号是5500

2.18Npm Intellisense

require 时的包提示。
用于在 import 语句中自动填充 npm 模块

2.19Markdown Preview Enhanced

实时预览Markdown，Markdown使用者必备

2.20Markdownlint

作用：Markdown语法纠错

2.21JavaScript Snippet Pack

针对js的插件，包含了js的常用语法关键字，很实用。

2.22One Monokai Theme

能够选择自己喜欢的颜色主题来编写代码，比较喜欢用的是monokai。

2.23One Dark Pro

一款好看 vscode 的主题

2.24Path Intellisense（自动补全路径）

在编辑器中输入路径时，自动补全。
智能路径提示，可以在你输入文件路径时智能提示

2.25Project Manager

多个项目之间快速切换的工具，安装这个插件之后会在你的左栏中新建一个图标

2.26Todo Tree

它不仅帮助我们高亮一些的特定的注释，在左侧菜单栏还可以快速定位到该注释的位置。
使用的时候需要打开配置文件，在里面添加配置：

"todo-tree.general.tags": [
	"@todo",
	"@done",
	"@error",
	"@mark",
	"@mock",
],
"todo-tree.highlights.defaultHighlight": {
	"type": "tag",
	"opacity": 60,
},
"todo-tree.highlights.customHighlight": {
	"@todo": {
		"foreground": "#FFA500"
	},
	"@done": {
		"foreground": "#44FD00"
	},
	"@error": {
		"foreground": "#FF3900"
	},
	"@mark": {
		"foreground": "#FFC2FF"
	},
	"@mock": {
		"foreground": "#49d8fc"
	},
},

2.27View In Browser

在浏览器中查看静态文件。

2.28vscode-icons

能够选择自己喜欢的图标主题，比较推荐vscode icons