VScode基础设置

Posted chase-star

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VScode基础设置相关的知识,希望对你有一定的参考价值。

 

安装依赖包:

? One Monokai

? Aglia

? One Dark Pro

? Material Icon

    漂亮的主题: Themes

Quokka     

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

CSS Peek

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

HTML Boilerplate

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

Color Info

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

view in browser:

能够将所写的代码运行在浏览器上.

eslint、Vetur

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

Vetur -->文件->首选项->设置,搜索vetur,按如下图示将vetur插件的 vetur.format.defaultFormatter.html 的值修改成 js-beautify-html,

快捷键设置:

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

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

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

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












以上是关于VScode基础设置的主要内容,如果未能解决你的问题,请参考以下文章

[vscode]--HTML代码片段(基础版,reactvuejquery)

vscode的基础配置大全可收藏

VScode搭建C/C++编译环境

vscode设置鼠标移入阴影

设置vscode 显示当前文件完整目录

vscode新建html文件并快速生成标准的html代码