vscode好用的插件

图标工具 vscode-icons

介绍:

VsCode中的图标插件,可以控制vscode中的文件管理的树目录显示图标

screenshot.gif

官网地址:https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons

使用方法:

1.快捷键 Ctrl+P ,输入 ext install vscode-icons ,然后点击安装插件

  1. 右侧插件商店 搜索 vscode-icons 进行安装
配置

安装成功后,点击Reload重新加载。
然后配置,当前图标使用VsCode-Icons
Go to File > Preferences > File Icon Theme > VSCode Icons.

相关扩展

代码高亮工具 Beautify

描述:

美化css,sass和更少的代码(Visual Studio代码的扩展)
命令“beautify.format”
如果您美化其他语言,代码/文本将被美化为Visual Studio Code的默认格式化程序。
官网地址:[https://marketplace.visualstudio.com/items?itemName=michelemelluso.code-beautifier#overview)

选项:

beautify.tabSize(缩进代码的制表符大小)
beautify.options(Beautifier选项:https//github.com/beautify-web/js-beautify#css--html

自动重命名标签- Auto rename tag

介绍:

自动重命名配对的HTML / XML标记,与Visual Studio IDE一样。
重命名一个HTML / XML标记时,会自动重命名配对的HTML / XML标记

usage.gif

官网地址:[https://github.com/formulahendry/vscode-auto-rename-tag)

配置:

添加条目auto-rename-tag.activationOnLanguage以设置将激活扩展的语言。默认情况下,它将["*"]被激活并将被激活所有语言。

{
     “ auto-rename-tag.activationOnLanguage ”:[
         “ html ”,
         “ xml ”,
         “ php ”,
         “ javascript ”
    ]
}
注意:

应使用VS Code中定义的语言ID设置该设置。以javascript定义为例,我们需要使用javascriptfor .js.es6use javascriptreactfor .jsx。因此,如果要在.js文件中启用此扩展,则需要添加javascriptsettings.json。

代码对齐辅助线 -Guides

辅助线如何与内置缩进辅助线不同?
  • 缩进背景
  • 颜色和样式自定义
  • 隐藏选择
自定义
  • 请查看首选项以查看所有可用选项。可以通过自动完成对话框访问可能的值。以下选项可能会影响指南的执行方式......

  • guides.indent.backgrounds:
    此设置可能会导致多个缩进的性能降低。每种颜色都将用于每个缩进级别,并将循环自身。值必须采用rgba(red, green, blue, alpha)格式

  • guides.limit.maximum:
    设置-1为无限制的最大渲染边界。
    设置为浮点数0,1将基于文档大小的限制。例如,0.5当前文档中的渲染指南最多可覆盖50%。
    设置为1或更多以呈现指定行数的最大值。

  • guides.overrideDefault:
    设置为“true”以禁止对默认Visual Studio代码行为的任何建议。

主题 OneDark

推荐阅读更多精彩内容