🚀 个人主页 极客小俊 ✍🏻 作者简介：web开发者、设计师、技术分享博主 🐋 希望大家多多支持一下, 我们一起进步！😄 🏅 如果文章对你有帮助的话，欢迎评论 💬点赞👍🏻 收藏 📂加关注
以下是个人在工作学习当中使用vscode所遇见的一些常见问题和插件使用！ 废话不多说直接看把!!
Visual Studio Code的使用心得与常用插件技巧大全总结
1. 卸载vs code、及安装的插件和个人配置信息
第一步: 卸载软件
第二步: 找到下图中文件夹的目录，然后将之删除，即可彻底清除已安装的插件个个人配置信息
第三步:
2. 重置vs code所有设置 （还原vs code出厂默认设置）
解决问题场景: 配置失误，导致vscode无法使用，如窗口缩放太大，快捷键失效。
用记事本打开目录下的settings.json，修改里面的对应配置可以解决对应的问题，重置的话全部删除就好了!
3. vs code发光字主题与插件 SynthWave '84 - VS Code theme
- 在vs code插件市场里面搜索SynthWave '84基础主题包 进行安装 Custom CSS and JS Loader自定义css、JS插件
- 在 vs code插件市场里面搜索 Custom CSS and JS Loader自定义css、JS插件进行安装,
- 在本地新建一个css文件命名为synthwave84.css，并且写入如下内容。 注意这个CSS文件最好放在用户文件夹下，或者其他你喜欢的地方，并记住文件所在的路径
- 打开vscode的用户配置文件setting.json、
在setting.json中配置synthwave84.css的文件路径
- 在vscode主页调出“显示所有命令菜单
4. 取消修改synthwave主题的斜体注释
打开synthwave-color-theme文件
在synthwave-color-theme文件中, 搜索: italic 把fontStyle的值全部清空, 然后重启vscode 斜体注释就取消了!
5. 在vscode中,使用快捷键打开浏览器 预览html页面
vscode怎么用浏览器打开htm页面l预览？这里大家可以通过安装open in browser插件解决!
在安装完open in browser插件后，在html代码中鼠标右键可以看到多了两个打开选择，点击选项即可打开浏览器进行预览。
修改默认浏览器
那么怎么修改默认浏览器呢？
打开setting.json配置文件, 加入open-in-browser.default配置,例如: 把默认浏览器配置为火狐浏览器,如下图:
6. vs code背景图片设置的几种方法
方法1 修改workbench.desktop.main.css文件设置背景图片
vscode其实就是一个网页程序,所以可以找到vscode中的一个文件进行修改它的背景图片,这个文件就是:workbench.desktop.main.css
这个文件的路径是在vs code安装目录,如下
然后打开这个workbench.desktop.main.css 文件进行 背景的添加设置, 注意这个文件打开后需要格式化代码一下!
背景图可以设置全局显示背景图 也可以 局部显示背景图
局部显示背景图，如下css代码:
如下图: 
设置完成后重启vscode、效果如下图:
全局显示背景图，如下css代码:
设置完成后重启vscode、效果如下:
方法2 使用background插件
在vscode插件市场搜索: background插件、然后进行安装 如下图
安装background背景插件后重启 vscode 会看见走下角的背景图片效果, 如下：
这里background背景插件还提供了一些用户自定义的配置参数, 这些配置参数设定在setting.json文件中
如下表
在setting.json中配置案例:
如下图:
方法3 使用background-cover 背景插件
介绍: 这个插件的原理其实也就是修改workbench.desktop.main.css这个CSS文件，但是比起第一种方法 来说 使用插件去修改比手工去修改更方便一些而已
然后再安装background-cover 插件
安装后重启! 如果你看到依旧没有效果 那说明还没有进行设置, 可以使用 ctrl + shift + P 选择 “backgroundCover - start”,然后就可以对背景图片进行选择和设置了!
效果如下:
Notice
7. Browser Preview 内部浏览插件的使用
这个插件的作用就是快速的在vscode内部使用浏览器预览html页面效果, 在插件市场搜索Browser Preview
安装完成后，在Bar上多出一个图标，点击图标就可以在里打开浏览器了 ,
默认情况下打开的是vscode的官方网站, 如果要配置到我们自己的站点目录方法如下:
效果如下:
8. windos opacity 透明插件的使用
安装好后，需要重启一下VSCode，就可以出现透明效果了。
插件的设置: 打开设置界面，在左边找到选项卡，然后找到进行设置
9. Bracket Pair Colorizer 代码区块提示插件
为我们自动查找匹配标签开始结尾，括号匹配。从此再也不用花时间再成对标签或者括号开始与结尾的查找上了, 提高了工作效率
虽然vscode也自带了 标签，括号的代码区块提示，但是个人觉得不够明显!! 所以推荐这款插件
进入插件，在搜索栏上搜索, Bracket Pair Colorizer 然后找到如果插件，直接点击按钮进行安装
安装后 vscode重启 效果如下:
10.vscode高清代码截图插件
Polacode代码截图插件
这个插件就是可以快速生成漂亮的代码截图， 比如要在博客里放置一个漂亮的代码截图，或者是快速分享到其它网络平台 都可以使用这个截图插件 进行代码截图 非常漂亮!!
打开VSCode中的插件，搜索 Polacode，这个你可以找到多个版本，这里我推荐的是 2020版本 点击进行安装
使用方法
把自己想截图的代码拖拽选中后 就可以点击右边的截图按钮，生成图片了!
CodeSnap 苹果代码截图插件
也是一个vscode代码截图捕捉插件, 截图更加清晰, 清晰度类似于苹果电脑!
直接在插件市场搜索CodeSnap
安装后重启vscode
使用方法:
CodeSnap想更改相关配置如下可以在settings.json中添加相关配置
CodeSnap是高度可配置的, 以下是可以更改的设置列表，以调整屏幕截图的外观
我的配置如下:
11.better Comments 修改注释颜色插件
在代码中 注释的颜色 默认是灰色的 ，可能你会觉得不好看 那么 就可以使用这款插件来让注释更加漂亮
插件就可以实现注释代码高亮
点击中的插件，然后在搜索栏中输入，然后点击就可以安装
使用方法
在html,php代码中修改注释的颜色如下图:
PHP注释
HTML注释
配置颜色注释
修改完成之后一定要重启vscode!
12.koroFileHeader 文件头部注释和函数头部注释插件
作用是生成文件头部注释和函数注释 , 但这个插件可以支持所有主流语言生成注释!
安装完成后可以新建一个文件,就可以看到文件头部会自动生成一堆注释
==koroFileHeader Notice
这时候你会发现不管是文件头生成的注释，还是函数头部生成的注释 都是需要在settings.json中配置的!
文件头注释自定义配置 在settings.json中配置文件头的注释如下
修改完成后，要保存，然后退出，再进来，进入文件, 输入 就可以生成自定义文件头部注释了!
函数头注释自定义配置 在settings.json中配置文件头的注释如下
效果如下: 
Notice
13.vscode 字体推荐
Consolas在windows下是一款很好看的字体
同时两款值得推荐的字体是 Source Code Pro和Fira Code, 可以在settings.json中进行配置!
也可以直接修改settings.json配置文件 添加如下配置:
14.vscode编辑markdown相关插件
Markdown Preview Enhanced 预览插件
安装完成后重启vscode即可
markdown PDF 插件
markdown PDF这个插件可用于将markdown文档转化为 PDF、HTML、PNG等文件的插件
打开vscode插件市场搜索markdown PDF 进行安装
安装markdown PDF插件会依赖Chromium, 因此默认情况下 它会尝试下载Chromium, 并且时间会等待很长一段时间
但是 某些时候在国内，认情况下它是无法下载的，所以您得手动下载它。
其实不必非要下载 Chromium，如果您的电脑中已经安装了 Chrome 浏览器,那只需要简单配置一下路径即可。
配置完毕后，用 VS Code 随意打开一个 Markdown 文件，右击文本编辑区域，就可以看到 Markdown PDF 的上下文菜单了
15.Prettier - Code formatter 插件
这款插件的作用就是可以在保存的时候自动代码格式化,
直接在插件市场搜索它，并安装后重启vscode
这款插件需要进行一些配置,修改settings.json配置文件，添加如下配置信息
16.Community Material Theme插件
打开vscode插件市场搜索Community Material Theme 进行安装
然后点击图标下面的 set Color Theme按钮切换主题，如图：
17.indent-rainbow 缩进插件
使缩进更具可读性的简单扩展
打开vscode插件市场搜索indent-rainbow 直接安装即可!
插件效果如下：
18.LeetCode 刷题插件
它的作用就是刷算法题 可以在vscode内部进行测试!
打开vscode插件市场搜索LeetCode 进行安装
安装完成之后需要登录!
然后输出用户名与密码就可以登录了! 登录成功后如下图所示!
就可以刷题了!
19.Material Icon Theme 文件图标插件
这款插件的作用就是会让vscode的文件产生好看的文件图标
在插件市场中搜索Material Icon Theme 进行安装 后重启vscode即可
效果如下: 
20.VSCode Rainbow Fart彩虹屁语音插件
这个插件其实我认为没什么 多大的用处，但是 安装上玩玩倒是可以的!!
在插件市场搜索:Rainbow Fart
安装完成之后，在 VSCode 的菜单栏中找到 查看 - 命令面板，或使用快捷键 Ctrl + Shift + P（MacOS 使用 Command + Shift + P）呼出 命令面板。
在 命令面板 中输入 Enable Rainbow Fart 并回车。
此时应该会弹出一个消息通知，点击通知上的 Open 按钮。
在打开的页面上点击 授权 即可。
现在就可以在vscode中 输入代码的时候 会有语音声音了!!
