一个专注于web技术的80后

你不用拼过聪明人，你只需要拼过那些懒人 你就一定会超越大部分人!

进入正题!

1. 卸载vs code、及安装的插件和个人配置信息

第一步: 卸载软件

 注意:此步骤虽然删掉了应用软件，但是此时重新安装会发现之前下载的插件和个人配置信息都还会重新加载出来，所以继续进行以下步骤：

第二步: 找到下图中文件夹的目录，然后将之删除，即可彻底清除已安装的插件个个人配置信息

第三步:

 路径是: C:\Users\Administrator\AppData\Roaming\Code 注意:AppData默认是隐藏文件夹

2. 重置vs code所有设置 （还原vs code出厂默认设置）

解决问题场景: 配置失误，导致vscode无法使用，如窗口缩放太大，快捷键失效。

 打开如目录 例如: C:\Users\Administrator\AppData\Roaming\Code\User

用记事本打开目录下的settings.json，修改里面的对应配置可以解决对应的问题，重置的话全部删除就好了!

3. vs code发光字主题与插件 SynthWave &39;84基础主题包 进行安装 Custom CSS and JS Loader自定义css、JS插件

在 vs code插件市场里面搜索 Custom CSS and JS Loader自定义css、JS插件进行安装。

在本地新建一个css文件命名为synthwave84.css，并且写入如下内容。 注意这个CSS文件最好放在用户文件夹下，或者其他你喜欢的地方，并记住文件所在的路径

vscode第一次使用， .mtk3 {     color: 100c0f，0 0 5px fff3; }  .mtk4 {     color: f97e72; }  .mtk6 {     color: 001716，0 0 3px 03edf975，0 0 8px fff5f6;     text-shadow: 0 0 2px fc1f2c75，0 0 5px fc1f2c75; } ​ .mtk8 {     color: 100c0f，0 0 10px 21272475; } ​ .mtk9 {     color: 393a33，0 0 8px f39f0575; } ​ .monaco-editor .margin，.monaco-editor-background，.monaco-editor .inputarea.ime-input {     background: transparent; } ​ /* Add the subtle gradient to the editor background */ .monaco-editor {     background-color: transparent !important;     background-image: linear-gradient(to bottom，34294f);     background-size: auto 100vh;     background-position: top;     background-repeat: no-repeat; } ​ /* Sweet sunset dots */ .monaco-workbench .activitybar > .content .monaco-action-bar .badge .badge-content {     background: linear-gradient(to bottom，fc28a8); } ​ /* Active tab neon */ .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fit.active {     box-shadow: inset 0 -5px 25px 39;&fc28a8，39;&fc28a825;     position: relative; } ​ .monaco-workbench .activitybar > .content .monaco-action-bar .action-item.checked::after {     content: &39;;     position: absolute;     bottom: 0px;     top: 0px;     left: 0px;     width: 4px;     background: linear-gradient(to bottom，03edf9) !important;     opacity: 1; } ​ .monaco-workbench .activitybar > .content .monaco-action-bar .action-item::after {     content: &39;;     position: absolute;     bottom: 0px;     top: 0px;     left: 0px;     width: 0px;     transition: opacity 1s;     opacity: 0; } ​ /* update lightbuld to be neon */ .lightbulb-glyph {     background: url(&39;Layer_1&39;Layer 1&39;; viewBox=&39;%3E%3Crect fill=&39; x=&39; y=&39; width=&39; height=&39; rx=&39; transform=&39;/%3E%3Cpath fill=&39; d=&39;/%3E%3Crect fill=&39; x=&39; y=&39; width=&39; height=&39; rx=&39; transform=&39;/%3E%3Cpath fill=&39; d=&39;/%3E%3Cpath fill=&39; d=&39;/%3E%3Cpath fill=&39; d=&39;/%3E%3Cpath fill=&39; d=&39;/%3E%3Cpath fill=&39; d=&39;/%3E%3Cpath fill=&39; d=&39;/%3E%3Cpath fill=&39; d=&39;/%3E%3Cpath fill=&39; d=&39;/%3E%3Cpath fill=&39; d=&39;/%3E%3Cpolygon fill=&39; points=&39;/%3E%3Cpath fill=&39; d=&39;/%3E%3C/svg%3E&03edf9); }

打开vscode的用户配置文件setting.json、

在setting.json中配置synthwave84.css的文件路径

 例如:  windows格式: {      &34;: [ &34; ] } ​ mac格式: ​ {      &34;: [ &34; ] } ​ 注意: 路径是用的正斜杠

在vscode主页调出“显示所有命令菜单 windows : ctrl + shift + p苹果mac : command + shift + P在出来的菜单中输入: Enable custom CSS and JS 并点击，重启vscode即可。关闭发光效果输入 : Disable custom CSS and JS

4. 取消修改synthwave主题的斜体注释

温湿度监测系统用vscode步骤如下：1、使用DHT11温湿度传感器完成测量。2、打印结果到串口。3、使用SDCC工具链编译即可。

打开synthwave-color-theme文件

 位置: C:\Users\Administrator\.vscode\extensions\robbowen.synthwave-vscode-0.1.5\themes

在synthwave-color-theme文件中，搜索: italic 把fontStyle的值全部清空，然后重启vscode 斜体注释就取消了!

5. 在vscode中，使用快捷键打开浏览器 预览html页面

vscode怎么用浏览器打开htm页面l预览？这里大家可以通过安装open in browser插件解决!

在安装完open in browser插件后，在html代码中鼠标右键可以看到多了两个打开选择，点击选项即可打开浏览器进行预览。

Open in Default Browsers：使用默认浏览器打开快捷键：alt+bOpen in Other Browsers：使用其他浏览器打开快捷键：alt+shift+b

修改默认浏览器

那么怎么修改默认浏览器呢？

打开setting.json配置文件，加入open-in-browser.default配置，例如: 把默认浏览器配置为火狐浏览器，如下图:

1、通过快捷方式打开Visual Studio Code工具，然后新建静态页面。2、创建一个静态页面table.html，并添加页面代码，然后保存，使用浏览器查看。3、点击File菜单，选择Open Folder，将项目导入到Visual Studio Code。4、导入进去后。

6. vs code背景图片设置的几种方法

方法1 修改workbench.desktop.main.css文件设置背景图片

vscode其实就是一个网页程序，所以可以找到vscode中的一个文件进行修改它的背景图片，这个文件就是:workbench.desktop.main.css

这个文件的路径是在vs code安装目录，如下

例如: D:\Microsoft VS Code\resources\app\out\vs\workbench\workbench.desktop.main.css

然后打开这个workbench.desktop.main.css 文件进行 背景的添加设置，注意这个文件打开后需要格式化代码一下!

背景图可以设置全局显示背景图 也可以 局部显示背景图

局部显示背景图，如下css代码:

如下图:

注意: 局部显示的图片格式最好选择png格式的

设置完成后重启vscode、效果如下图:

全局显示背景图，如下css代码:

body {background-image: url(&39;);background-size: 100%;opacity: 0.75;background-repeat: no-repeat;}

设置完成后重启vscode、效果如下:

注意: 这种修改workbench.desktop.main.css 文件的方法来设置背景 如果VScode自动软件更新后背景会消失，需要重新设置!

方法2 使用background插件

在vscode插件市场搜索: background插件、然后进行安装 如下图

安装background背景插件后重启 vscode 会看见走下角的背景图片效果，如下：

这里background背景插件还提供了一些用户自定义的配置参数，这些配置参数设定在setting.json文件中

如下表

在setting.json中配置案例:

&34;: [&34; //图片地址]， &34;: {&34;:&39;&34;， &34;:&34;， &34;:&34;，//图片位置&34;:&34;， &34;:&34;， &34;:&34;， &34;:&34;， &34;:&34;，//图片大小&34;:0.2 //透明度}， &34;: true， &34;: false，//是否使用默认图片

如下图:

方法3 使用background-cover 背景插件

介绍: 这个插件的原理其实也就是修改workbench.desktop.main.css这个CSS文件，但是比起第一种方法 来说 使用插件去修改比手工去修改更方便一些而已

按Ctrl+Shift+P打开VSCode控制台，在控制台中输入命令可以实现很多功能。3. 打开工程 在VSCode界面点击File->Open Folder，然后选择文件夹 在终端中运行code [project path]4. 配置文件 用VSCode打开一个工程后，它会在工程。

为了测试方便，首先安装这个插件之前 如果有设定前面两种方法的背景配置 就先把setting.json中的相关配置注释一下!注意: 方法2 和 方法3 的背景设置时可以共存的!!

然后再安装background-cover 插件

安装后重启! 如果你看到依旧没有效果 那说明还没有进行设置，可以使用 ctrl + shift + P 选择 &34;，然后就可以对背景图片进行选择和设置了!

其实在setting.json配置文件当中也会产生一行配置: 例如 : &34;: &34;。

效果如下:

Notice

1.点击底部切换背景图按钮 / Click the bottom toggle background button2.ctrl + shift + P > &34;3.ctrl + shift + F7 > &34;

注意: VSCode更新版本时会导致背景图消失，需要手动重新设置，所以这种方法跟第一种其实也差不多! 只不过选择图片方便了一点!

7. Browser Preview 内部浏览插件的使用

这个插件的作用就是快速的在vscode内部使用浏览器预览html页面效果，在插件市场搜索Browser Preview

安装完成后，在Bar上多出一个图标，点击图标就可以在VSCode里打开浏览器了 。

默认情况下打开的是vscode的官方网站，如果要配置到我们自己的站点目录方法如下:

效果如下:

8. windos opacity 透明插件的使用

安装好后，需要重启一下VSCode，就可以出现透明效果了。

插件的设置: 打开设置界面，在左边找到Extensions选项卡，然后找到Windows opacity进行设置

这里边只有一个设置项，就是Opacity，也就是我们要设置的透明度，值从0-255，数值越小透明度越高，数值越大透明度越低。

如果想关闭透明 设置透明度255即可!!

9. Bracket Pair Colorizer 代码区块提示插件

为我们自动查找匹配标签开始结尾，括号匹配。从此再也不用花时间再成对标签或者括号开始与结尾的查找上了，提高了工作效率

虽然vscode也自带了 标签，括号的代码区块提示，但是个人觉得不够明显!! 所以推荐这款插件

进入插件，在搜索栏上搜索，Bracket Pair Colorizer 然后找到如果插件，直接点击Install按钮进行安装

安装后 vscode重启 效果如下:

有兴趣的同学 可以找到File-->Preferences-->settings-->Extensions-->BracketPair 进行更多设置这里就不多讲了!

10.vscode高清代码截图插件

Polacode代码截图插件

这个插件就是可以快速生成漂亮的代码截图， 比如要在博客里放置一个漂亮的代码截图，或者是快速分享到其它网络平台 都可以使用这个截图插件 进行代码截图 非常漂亮!!

打开VSCode中的插件，搜索 Polacode，这个你可以找到多个版本，这里我推荐的是 2020版本 点击install进行安装

使用方法

安装完成后，先打开你要分享的代码，然后按Ctrl + Shift + p 打开命令面板，然后再输入框中输入Polacode，就可以打开使用了

把自己想截图的代码拖拽选中后 就可以点击右边的截图按钮，生成图片了!

CodeSnap 苹果代码截图插件

也是一个vscode代码截图捕捉插件，截图更加清晰，清晰度类似于苹果电脑!

直接在插件市场搜索CodeSnap

安装后重启vscode

使用方法:

安装完成后，先打开你要分享的代码，然后按Ctrl + Shift + p 打开命令面板，然后再输入框中输入CodeSnap，就可以截图代码了!

CodeSnap想更改相关配置如下可以在settings.json中添加相关配置

CodeSnap是高度可配置的，以下是可以更改的设置列表，以调整屏幕截图的外观

配置名称值说明codesnap.backgroundColor十六进制颜色值代码段容器边缘的背景色。可以是任何有效的CSS颜色。codesnap.boxShadow默认值: rgba(0，0，0，0.55) 0px 20px 68px代码段的CSS框阴影。可以是任何有效的CSS框阴影codesnap.containerPadding整数 ，默认值: 3em，也可以使用px代码段容器边缘的填充。可以是任何有效的CSS填充codesnap.roundedCorners布尔值 默认为:true圆角配置 用于配置边缘内部代码块边缘是否是圆角或方形角codesnap.showWindowControls布尔值 默认为:true显示或隐藏OS X样式窗口按钮的布尔值。codesnap.showWindowTitle布尔值 默认为:false显示或隐藏窗口标题栏上的文件夹或文件名。codesnap.showLineNumbers布尔值 默认为:true显示或隐藏行号的布尔值codesnap.realLineNumbers布尔值 默认为:false从文件的实际行号开始的布尔值，而不是1。codesnap.transparentBackground布尔值 默认为:false用于在拍摄屏幕快照时使用透明背景。codesnap.target值: window [不显示边缘容器] container [显示边缘容器]意思就是是否要显示外部的边缘容器

我的配置如下:

{//codesnap代码截图配置&34;:&f2f2f2&34;codesnap.boxShadow&34;5px 5px 60px 0px 34;，//阴影设置&34;:&34;， &34;:true， &34;:true， &34;:false， &34;:true， &34;:false， &34;:false， &34;:&34;}

11.better Comments 修改注释颜色插件

在代码中 注释的颜色 默认是灰色的 ，可能你会觉得不好看 那么 就可以使用这款插件来让注释更加漂亮

Better Comments插件就可以实现注释代码高亮

使用方法

其实使用就是在注释开头加上特殊的符号。!: 红色注释?: 蓝色注释// : 灰色删除线注释todo : 橘红色注释* : 浅绿色注释

1、打开你要写c++程序的文件夹，我们这里新建一个Test文件夹并打开test，打开后：使用VScode运行调试C/C++，在左侧打开的目录中新建一个 main.cpp 文件。2、新建后点左侧的调试按钮（英文：Debug），可以看到，目前没有调试。

在html，php代码中修改注释的颜色如下图:

PHP注释

HTML注释

配置颜色注释

Notice: 你也可以自己定义属于自己的颜色。方法如下：点击后打开了settings.json，复制下面代码到settings.json，根据自己的喜好自定义了也可以增加新的注释颜色标识符到setting.json中，注意: 原有的配置不能删除 如果删除就没有效果了 ，只能新增注释颜色标识!!如下:

&34;: [{&34;: &34;， //自己定义一个字符串名字&34;: &34;， //颜色&34;: false， &34;: &34;}， {&34;: &34;， &34;: &FF2D00&34;strikethrough&34;backgroundColor&34;transparent&34;tag&34;?&34;color&34;34;， //颜色&34;: false， &34;: &34;}， {&34;: &34;， &34;: &474747&34;strikethrough&34;backgroundColor&34;transparent&34;tag&34;todo&34;color&34;34;， &34;: false， &34;: &34;}， {&34;: &34;， //颜色&34;: &98C379&34;strikethrough&34;backgroundColor&34;transparent"}]。

修改完成之后一定要重启vscode!

12.koroFileHeader 文件头部注释和函数头部注释插件

作用是生成文件头部注释和函数注释 ，但这个插件可以支持所有主流语言生成注释!

安装完成后可以新建一个test.js文件，就可以看到文件头部会自动生成一堆注释

如果你是windows电脑，使用ctrl+shift+p键Mac电脑使用shift+command+p键然后输入: codeDesign，就可以选择注释图案了

==koroFileHeader Notice

如果没有注释 ，或者 想快速生成文件头部注释:在文件头部点击快捷键`ctrl+alt+i`（Windows）函数注释快捷键 `ctrl+alt+t`如果你是Mac电脑点击`ctrl+cmd+i` (Mac)就会快速生成代码注释了!

这时候你会发现不管是文件头生成的注释，还是函数头部生成的注释 都是需要在settings.json中配置的!

文件头注释自定义配置 在settings.json中配置文件头的注释如下

&34;: {&34;: &&34;objectDescription&34;目前是测试项目&34;Date&34;Do not edit&34;LastEditors&34;334;，// 文件最后编辑者&34;: &34;，// 文件最后编辑时间&34;: &34; ，// 增加此项配置即可&34;: &34;，}。

函数头注释自定义配置 在settings.json中配置文件头的注释如下

&34;: {//此为函数注释&34;:&&34;description&34;&34;param&34;&34;return&34;" }

效果如下:

Notice

1. 描述内容(descripition)为了便捷添加，直接设置为空；2. 这里的日期(Date)和修改时间(LastEditTime)设置，本身软件就会自行添加和更新，所以直接写“Do not edit”即可。3. 除日期和参数(param)外的其他内容，均可尝试设置为汉字，方便查看

13.vscode 字体推荐

Consolas在windows下是一款很好看的字体

同时两款值得推荐的字体是 Source Code Pro和Fira Code，可以在settings.json中进行配置!

也可以直接修改settings.json配置文件 添加如下配置:

&34;: &34;，//字体&34;: 12， //字体大小&34;:&34;， //字体粗细&34;:true， //是否字体连字

14.vscode编辑markdown相关插件

Markdown Preview Enhanced 预览插件

安装完成后重启vscode即可

markdown PDF 插件

markdown PDF这个插件可用于将markdown文档转化为 PDF、HTML、PNG等文件的插件

打开vscode插件市场搜索markdown PDF 进行安装

安装markdown PDF插件会依赖Chromium，因此默认情况下 它会尝试下载Chromium，并且时间会等待很长一段时间

但是 某些时候在国内，认情况下它是无法下载的，所以您得手动下载它。

其实不必非要下载 Chromium，如果您的电脑中已经安装了 Chrome 浏览器，那只需要简单配置一下路径即可。

1. 找到 Chrome 应用的路径，比如，在我的电脑上是 &34;。2. 打开 VS Code settings.json设置 、建议在用户设置下面添加 。

注意: 这一项，注意路径中是两个反斜杠。{&34;: &34;}

配置完毕后，用 VS Code 随意打开一个 Markdown 文件，右击文本编辑区域，就可以看到 Markdown PDF 的上下文菜单了

15.Prettier - Code formatter 插件

这款插件的作用就是可以在保存的时候自动代码格式化。

直接在插件市场搜索它，并安装后重启vscode

这款插件需要进行一些配置，修改settings.json配置文件，添加如下配置信息

配置名称值说明editor.formatOnSavetrue | false保存时格式化editor.tabSizeint 默认:2tab 大小为2个空格editor.wordWrapColumnint 自定义100 列后换行breadcrumbs.enabledtrue | false开启 vscode 文件路径导航prettier.semitrue | false设置语句末尾不加分号 （有效果）prettier.singleQuotetrue | false设置强制单引号 （有效果）vetur.format.defaultFormatter.htmlprettyhtml选择 vue 文件中 template 的格式化工具editor.renderControlCharacterstrue | false显示 markdown 中英文切换时产生的特殊字符vetur.format.defaultFormatterOptions&34;: { &34;: true，&34;:false }vetur 的自定义设置

16.Community Material Theme插件

打开vscode插件市场搜索Community Material Theme 进行安装

然后点击图标下面的 set Color Theme按钮切换主题，如图：

VSCode所有的快捷键，都可以进行自定义，只需要通过 设置->键盘快捷键方式->搜索快捷键->双击键入自定义快捷方式 进行设定。以下是一些常用的快捷方式和本人的习惯偏好，仅供参考：前进：control + = 后退：control + - 向上。

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中 输入代码的时候 会有语音声音了!!

持续更新..........

今日头条@极客小俊，首发原创文章

如果喜欢话请 &34; 一键三连

大家的支持就是我坚持下去的动力!

不要忘了❤️哦！

B站: