VScode基础插件设置

安装依赖包：

• One Monokai

• Aglia

• One Dark Pro

• Material Icon

　　  漂亮的主题: Themes

vscode-icons（文件图标）

Quokka     

 是一个调试工具插件，能够根据你正在编写的代码提供实时反馈

CSS Peek

 使用此插件，你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代码。

HTML Boilerplate

通过使用 HTML 模版插件，你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html，并按 Tab 键，即可生成干净的文档结构。

Bracket Pair Colorizer

超好用的代码片段插件，

Color Info

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

文件图标 vscode-icons

• 插件名称：vscode-icons
• 插件地址：https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons

vscode-icons 插件可以实现对各种文件类型的文件前的图标进行优化显示，这样我们在查看长长的文件列表的时候，可以直接通过文件的图标就可以快速知道文件的类型，而不是去看文件的后缀。

view in browser:（或者Open in Browser）

能够将所写的代码ctrl +ｆ１快捷运行在浏览器上.

Auto Complete Tag

集成了 Auto Close Tag 和 Auto Rename Tag 的功能，丰富了 VS Code 编写 HTML/XML 时候的标签自动补全功能。

• Auto Close Tag: 输入开始标签后，自动添加结束标签。比如输入<div>，自动添加</div>
• Auto Rename Tag: 更改 HTML/XML 标签名时，自动更新相对应的开始标签或结束标签的标签名

Path Intellisense

路径完成提示

HTML Snippets

超级实用且初级的H5代码片段以及提示

Color Picker

帮助用户GUI生成的颜色代码，如CSS颜色的符号。而且还可以命令转换颜色

Trailing Spaces

高亮那些冗余的空格，可以快速删掉

eslint、Vetur

代码格式化为eslint风格、HTML格式化代码缩进

Vetur (目前比较好的vue语法高亮)-->文件->首选项->设置，搜索vetur，按如下图示将vetur插件的 vetur.format.defaultFormatter.html 的值修改成 js-beautify-html，

快捷键设置：

VScode对多行编辑有两种模式。

（１）第一种模式
　　Alt+Shift 竖列选择
　　这种模式下只可以选择竖列，不可以随意插入光标。所以只限制于同一列且不间隔的情况下。

（２）第二种模式
　　Shift+Ctrl 竖列选择
　　Ctrl+光标点击 选择多个编辑位点
　　这种模式下不仅可以选择竖列，同时还可以在多个地方插入光标。

　　两种模式的切换
　　使用Shift+Ctrl+p快捷键调用查询输入栏，输入“cursor”，列表中会出现“切换多行修改键”这个选项。选择这个选项就可以在两种模式下切换。