? ? ?極客小俊

?一個(gè)專注于web技術(shù)的80后

你不用拼過聰明人，你只需要拼過那些懶人 你就一定會(huì)超越大部分人!

1. 卸載vs code、及安裝的插件和個(gè)人配置信息

第一步: 卸載軟件

?注意:此步驟雖然刪掉了應(yīng)用軟件，但是此時(shí)重新安裝會(huì)發(fā)現(xiàn)之前下載的插件和個(gè)人配置信息都還會(huì)重新加載出來，所以繼續(xù)進(jìn)行以下步驟：

第二步: 找到下圖中文件夾的目錄，然后將之刪除，即可徹底清除已安裝的插件個(gè)個(gè)人配置信息

第三步:

?路徑是: C:\Users\Administrator\AppData\Roaming\Code
?注意:AppData默認(rèn)是隱藏文件夾

2. 重置vs code所有設(shè)置 （還原vs code出廠默認(rèn)設(shè)置）

解決問題場(chǎng)景: 配置失誤，導(dǎo)致vscode無法使用，如窗口縮放太大，快捷鍵失效。

?打開如目錄 例如: C:\Users\Administrator\AppData\Roaming\Code\User

用記事本打開目錄下的settings.json，修改里面的對(duì)應(yīng)配置可以解決對(duì)應(yīng)的問題，重置的話全部刪除就好了!

3. vs code發(fā)光字主題與插件 SynthWave '84 - VS Code theme

1. 在vs code插件市場(chǎng)里面搜索SynthWave '84基礎(chǔ)主題包 進(jìn)行安裝 Custom CSS and JS Loader自定義css、JS插件

1. 在 vs code插件市場(chǎng)里面搜索 Custom CSS and JS Loader自定義css、JS插件進(jìn)行安裝,

1. 在本地新建一個(gè)css文件命名為synthwave84.css，并且寫入如下內(nèi)容。 注意這個(gè)CSS文件最好放在用戶文件夾下，或者其他你喜歡的地方，并記住文件所在的路徑

?.mtk3 {
? ? ?color: #f92aad;
? ? ?text-shadow: 0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3;
?}
?
?.mtk4 {
? ? ?color: #6d77b3;
?}
?
?.mtk5 {
? ? ?color: #f97e72;
?}
?
?.mtk6 {
? ? ?color: #fdfdfd;
? ? ?text-shadow: 0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975;
?}
?
?.mtk7 {
? ? ?color: #fff5f6;
? ? ?text-shadow: 0 0 2px #000, 0 0 10px #fc1f2c75, 0 0 5px #fc1f2c75, 0 0 25px #fc1f2c75;
?}
?
?.mtk8 {
? ? ?color: #72f1b8;
? ? ?text-shadow: 0 0 2px #100c0f, 0 0 10px #257c5575, 0 0 35px #21272475;
?}
?
?.mtk9 {
? ? ?color: #f4eee4;
? ? ?text-shadow: 0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #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, #2a2139 75%, #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, #fff951 25%, #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 #fc28a825;
? ? ?position: relative;
?}
?
?/* Active tab stripe */
?.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fit.active::after {
? ? ?content: '';
? ? ?position: absolute;
? ? ?bottom: -1px;
? ? ?left: 0;
? ? ?right: 0;
? ? ?height: 4px;
? ? ?background: linear-gradient(to right, #fc28a8, #03edf9) !important;
? ? ?opacity: 1;
? ? ?z-index: 6;
?}
?
?.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fit::after {
? ? ?content: '';
? ? ?position: absolute;
? ? ?bottom: -1px;
? ? ?left: 0;
? ? ?right: 0;
? ? ?height: 0px;
? ? ?transition: opacity 1s;
? ? ?opacity: 0;
? ? ?z-index: 6;
?}
?
?/* Active sidebar item */
?.monaco-workbench .activitybar > .content .monaco-action-bar .action-item.checked {
? ? ?box-shadow: inset 0 -5px 25px #fc28a825;
? ? ?position: relative;
?}
?
?.monaco-workbench .activitybar > .content .monaco-action-bar .action-item.checked::after {
? ? ?content: '';
? ? ?position: absolute;
? ? ?bottom: 0px;
? ? ?top: 0px;
? ? ?left: 0px;
? ? ?width: 4px;
? ? ?background: linear-gradient(to bottom, #fc28a8, #03edf9) !important;
? ? ?opacity: 1;
?}
?
?.monaco-workbench .activitybar > .content .monaco-action-bar .action-item::after {
? ? ?content: '';
? ? ?position: absolute;
? ? ?bottom: 0px;
? ? ?top: 0px;
? ? ?left: 0px;
? ? ?width: 0px;
? ? ?transition: opacity 1s;
? ? ?opacity: 0;
?}
?
?/* update lightbuld to be neon */
?.lightbulb-glyph {
? ? ?background: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect fill='%23ffffff' x='5.68' y='6.93' width='2.1' height='6.1' rx='0.96' transform='translate(-1.94 1.63) rotate(-12.09)'/%3E%3Cpath fill='%2303edf9' d='M7.08,13.5a1.46,1.46,0,0,1-1.43-1.16L4.77,8.26A1.47,1.47,0,0,1,5.9,6.53l.17,0A1.46,1.46,0,0,1,7.81,7.61l.87,4.09a1.46,1.46,0,0,1-1.12,1.73l-.18,0Zm-.7-6h-.1l-.17,0a.45.45,0,0,0-.29.21.45.45,0,0,0-.07.34l.88,4.09a.46.46,0,0,0,.54.35l.18,0a.46.46,0,0,0,.29-.2.48.48,0,0,0,.07-.35L6.83,7.82A.46.46,0,0,0,6.38,7.46Z'/%3E%3Crect fill='%23ffffff' x='8.22' y='6.93' width='2.1' height='6.1' rx='0.96' transform='translate(16.25 21.68) rotate(-167.91)'/%3E%3Cpath fill='%2303edf9' d='M8.93,13.5a1.63,1.63,0,0,1-.31,0l-.18,0A1.46,1.46,0,0,1,7.32,11.7l.87-4.09A1.47,1.47,0,0,1,9.93,6.49l.18,0a1.45,1.45,0,0,1,.92.63,1.47,1.47,0,0,1,.2,1.1l-.88,4.08a1.45,1.45,0,0,1-.63.93A1.48,1.48,0,0,1,8.93,13.5Zm.69-6a.45.45,0,0,0-.25.07.5.5,0,0,0-.2.29L8.3,11.9a.43.43,0,0,0,.06.35.46.46,0,0,0,.29.2l.18,0a.47.47,0,0,0,.55-.35l.87-4.09a.45.45,0,0,0-.06-.34A.47.47,0,0,0,9.9,7.5l-.18,0Z'/%3E%3Cpath fill='%23ffffff' d='M11.77,9l-3.53.67a1,1,0,0,1-1.15-.88h0A1.09,1.09,0,0,1,7.9,7.48l3.53-.67a1,1,0,0,1,1.15.89h0A1.08,1.08,0,0,1,11.77,9Z'/%3E%3Cpath fill='%2303edf9' d='M8.07,10.18A1.54,1.54,0,0,1,6.6,8.83a1.74,1.74,0,0,1,.25-1.22,1.46,1.46,0,0,1,1-.66l3.52-.67A1.51,1.51,0,0,1,13.07,7.6a1.61,1.61,0,0,1-1.22,1.88l-3.52.67A1.15,1.15,0,0,1,8.07,10.18ZM11.6,7.34h-.09L8,8a.53.53,0,0,0-.4.62.5.5,0,0,0,.57.44l3.52-.67a.54.54,0,0,0,.41-.62A.53.53,0,0,0,11.6,7.34Z'/%3E%3Cpath fill='%23ffffff' d='M11.74,6.74,4.67,8.08A1,1,0,0,1,3.52,7.2h0A1.08,1.08,0,0,1,4.33,6l7.06-1.34a1,1,0,0,1,1.16.88h0A1.08,1.08,0,0,1,11.74,6.74Z'/%3E%3Cpath fill='%2303edf9' d='M4.5,8.64a1.44,1.44,0,0,1-.86-.29A1.64,1.64,0,0,1,3,7.29a1.72,1.72,0,0,1,.25-1.21,1.48,1.48,0,0,1,1-.67l7.07-1.34a1.39,1.39,0,0,1,1.11.27A1.65,1.65,0,0,1,13,5.4a1.72,1.72,0,0,1-.25,1.21,1.48,1.48,0,0,1-1,.67L4.76,8.62Zm7.07-3.5h-.09L4.42,6.49a.45.45,0,0,0-.32.22.56.56,0,0,0-.09.4.61.61,0,0,0,.21.35.47.47,0,0,0,.36.09L11.65,6.2A.47.47,0,0,0,12,6a.51.51,0,0,0,.08-.4.55.55,0,0,0-.2-.35A.47.47,0,0,0,11.57,5.14Z'/%3E%3Cpath fill='%23ffffff' d='M11.7,4.52,4.64,5.86A1,1,0,0,1,3.49,5h0A1.09,1.09,0,0,1,4.3,3.72l7.06-1.34a1,1,0,0,1,1.15.88h0A1.09,1.09,0,0,1,11.7,4.52Z'/%3E%3Cpath fill='%2303edf9' d='M4.46,6.42a1.36,1.36,0,0,1-.85-.3,1.58,1.58,0,0,1-.61-1A1.61,1.61,0,0,1,4.21,3.19l7.07-1.34a1.35,1.35,0,0,1,1.11.27,1.58,1.58,0,0,1,.61,1,1.74,1.74,0,0,1-.25,1.22,1.44,1.44,0,0,1-1,.66L4.72,6.39A1.09,1.09,0,0,1,4.46,6.42Zm7.07-3.51h-.08L4.38,4.26a.53.53,0,0,0-.4.62.5.5,0,0,0,.57.44L11.62,4a.47.47,0,0,0,.32-.22.62.62,0,0,0,.08-.4.56.56,0,0,0-.2-.35A.53.53,0,0,0,11.53,2.91Z'/%3E%3Cpath fill='%23ffffff' d='M8.34,2.89,4.57,3.6a1,1,0,0,1-1.15-.88h0a1.08,1.08,0,0,1,.81-1.25L8,.75a1,1,0,0,1,1.15.89h0A1.08,1.08,0,0,1,8.34,2.89Z'/%3E%3Cpath fill='%2303edf9' d='M4.4,4.16a1.44,1.44,0,0,1-.86-.29,1.69,1.69,0,0,1-.61-1.05A1.74,1.74,0,0,1,3.18,1.6a1.51,1.51,0,0,1,1-.67L7.91.22A1.38,1.38,0,0,1,9,.49a1.58,1.58,0,0,1,.61,1.05,1.74,1.74,0,0,1-.25,1.22,1.47,1.47,0,0,1-1,.66l-3.77.72A1.18,1.18,0,0,1,4.4,4.16ZM8.17,1.28H8.09L4.32,2A.45.45,0,0,0,4,2.23a.51.51,0,0,0-.08.4.55.55,0,0,0,.2.35.49.49,0,0,0,.37.09l3.77-.72a.47.47,0,0,0,.32-.22.62.62,0,0,0,.08-.4.56.56,0,0,0-.2-.35A.53.53,0,0,0,8.17,1.28Z'/%3E%3Cpolygon fill='%231e1e1e' points='5.5 11.1 5.5 11.1 5.5 14.4 7.1 16 9.1 16 10.6 14.4 10.6 11.1 5.5 11.1'/%3E%3Cpath fill='%23c5c5c5' d='M6.5,12h3v1h-3Zm1,3H8.6l.9-1h-3Z'/%3E%3C/svg%3E") 50% no-repeat !important;
? ? ?filter: drop-shadow(0 0 5px #03edf9);
?}

1. 打開vscode的用戶配置文件setting.json、

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

?注意: 如果還有其他的配置,需要在最后一個(gè)值后需要補(bǔ)一個(gè)逗號(hào)! 這是JSON格式的配置寫法
?注意: 文件路徑不一定非要在C盤,其他盤也是可以的
?注意: 本地路徑前面必須加 file:/// , 絕對(duì)不能刪!!!!
?注意: 下面的大括號(hào)并不一定復(fù)制過去,取決于有沒有其他配置,如果setting.json文件是空的就全部復(fù)制過去!?例如:
?windows格式:
?{
? ? ?"vscode_custom_css.imports": [ "file:///C:/Users/Administrator/synthwave84.css" ]
?}
?
?mac格式:
?
?{
? ? ?"vscode_custom_css.imports": [ "file:///Users/用戶名/synthwave84.css" ]
?}
?
?注意: 路徑是用的正斜杠

1. 在vscode主頁調(diào)出“顯示所有命令菜單

   ? windows : ?ctrl + shift + p
   ? 蘋果mac ?: ?command + shift + P
   ?
   ? 在出來的菜單中輸入: Enable custom CSS and JS 并點(diǎn)擊，重啟vscode即可。
   ? 關(guān)閉發(fā)光效果輸入 : Disable custom CSS and JS

4. 取消修改synthwave主題的斜體注釋

打開synthwave-color-theme文件

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

在synthwave-color-theme文件中, 搜索: italic ?把fontStyle的值全部清空, 然后重啟vscode 斜體注釋就取消了!

5. 在vscode中,使用快捷鍵打開瀏覽器 預(yù)覽html頁面

vscode怎么用瀏覽器打開htm頁面l預(yù)覽？這里大家可以通過安裝open in browser插件解決!

在安裝完open in browser插件后，在html代碼中鼠標(biāo)右鍵可以看到多了兩個(gè)打開選擇，點(diǎn)擊選項(xiàng)即可打開瀏覽器進(jìn)行預(yù)覽。

Open in Default Browsers：使用默認(rèn)瀏覽器打開 ?快捷鍵：alt+b Open in Other Browsers： ?使用其他瀏覽器打開 ?快捷鍵：alt+shift+b

修改默認(rèn)瀏覽器

那么怎么修改默認(rèn)瀏覽器呢？

打開setting.json配置文件, 加入open-in-browser.default配置,例如: 把默認(rèn)瀏覽器配置為火狐瀏覽器,如下圖:

6. vs code背景圖片設(shè)置的幾種方法

方法1 修改workbench.desktop.main.css文件設(shè)置背景圖片

vscode其實(shí)就是一個(gè)網(wǎng)頁程序,所以可以找到vscode中的一個(gè)文件進(jìn)行修改它的背景圖片,這個(gè)文件就是:workbench.desktop.main.css

這個(gè)文件的路徑是在vs code安裝目錄,如下

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

然后打開這個(gè)workbench.desktop.main.css 文件進(jìn)行 背景的添加設(shè)置, 注意這個(gè)文件打開后需要格式化代碼一下!

背景圖可以設(shè)置全局顯示背景圖 也可以 局部顯示背景圖

局部顯示背景圖，如下css代碼:

body { ? ? background-image: url('file:///圖片地址'); ? ? background-size: 20%; ? ? background-position: 100% 100%; ? ? opacity: 0.75; ? ? background-repeat: no-repeat; }

如下圖:

注意: 局部顯示的圖片格式最好選擇png格式的

設(shè)置完成后重啟vscode、效果如下圖:

全局顯示背景圖，如下css代碼:

body { ? ? background-image: url('file:///圖片地址'); ? ? background-size: 100%; ? ? opacity: 0.75; ? ? background-repeat: no-repeat; }

設(shè)置完成后重啟vscode、效果如下:

注意: 這種修改workbench.desktop.main.css 文件的方法來設(shè)置背景 如果VScode自動(dòng)軟件更新后 ?背景會(huì)消失，需要重新設(shè)置!

方法2 使用background插件

在vscode插件市場(chǎng)搜索: background插件、然后進(jìn)行安裝 ?如下圖

安裝background背景插件后重啟 vscode 會(huì)看見走下角的背景圖片效果, 如下：

這里background背景插件還提供了一些用戶自定義的配置參數(shù), 這些配置參數(shù)設(shè)定在setting.json文件中

如下表

nameTypeDescriptionbackground.enabledBoolean插件是否啟用 ? If background enabled ? 默認(rèn)truebackground.useDefaultBoolean是否使用默認(rèn)圖片 If use default images ? 默認(rèn)truebackground.customImagesArray<String地址>自定義圖片 Your Your custom imagesbackground.styleObject自定義樣式 Custom stylebackground.stylesArray<Object>每個(gè)圖片的獨(dú)立樣式 Style of each imagebackground.useFrontBoolean前景圖/背景圖。 在代碼上面還是下面 ?一般設(shè)置truebackground.loopBoolean循環(huán)模式，會(huì)重復(fù)顯示圖片 ? ?loop mode, may repeat your images

在setting.json中配置案例:

"background.customImages": [ ? ? ? ? "file:///D:/6.png" ? //圖片地址 ? ? ], ? ? "background.style": { ? ? ? ? "content":"''", ? ? ? ? "pointer-events":"none", ? ? ? ? "position":"absolute",//圖片位置 ? ? ? ? "width":"100%", ? ? ? ? "height":"100%", ? ? ? ? "z-index":"99999", ? ? ? ? "background.repeat":"no-repeat", ? ? ? ? "background-size":"25%,25%",//圖片大小 ? ? ? ? "opacity":0.2 //透明度 ? ? }, ? ? "background.useFront": true, ? ? "background.useDefault": false,//是否使用默認(rèn)圖片

如下圖:

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

介紹: 這個(gè)插件的原理其實(shí)也就是修改workbench.desktop.main.css這個(gè)CSS文件，但是比起第一種方法 來說 ?使用插件去修改比手工去修改更方便一些而已

為了測(cè)試方便,首先安裝這個(gè)插件之前 如果有設(shè)定前面兩種方法的背景配置 就先把setting.json中的相關(guān)配置注釋一下! 注意: 方法2 和 方法3 的背景設(shè)置時(shí)可以共存的!!

然后再安裝background-cover 插件

安裝后重啟! ?如果你看到依舊沒有效果 ?那說明還沒有進(jìn)行設(shè)置, 可以使用 ctrl + shift + P ?選擇 ?"backgroundCover - start",然后就可以對(duì)背景圖片進(jìn)行選擇和設(shè)置了!

其實(shí)在setting.json配置文件當(dāng)中也會(huì)產(chǎn)生一行配置: 例如 : "backgroundCover.imagePath": "d:\\background\\4.jpg",

效果如下:

Notice

1.點(diǎn)擊底部切換背景圖按鈕 / Click the bottom toggle background button 2.ctrl + shift + P > "backgroundCover - start" 3.ctrl + shift + F7 > "Random update background and restart"

注意: VSCode更新版本時(shí)會(huì)導(dǎo)致背景圖消失，需要手動(dòng)重新設(shè)置, 所以這種方法跟第一種其實(shí)也差不多! 只不過選擇圖片方便了一點(diǎn)!

7. Browser Preview 內(nèi)部瀏覽插件的使用

這個(gè)插件的作用就是快速的在vscode內(nèi)部使用瀏覽器預(yù)覽html頁面效果, 在插件市場(chǎng)搜索Browser Preview

安裝完成后，在Bar上多出一個(gè)圖標(biāo)，點(diǎn)擊圖標(biāo)就可以在VSCode里打開瀏覽器了 ,

默認(rèn)情況下打開的是vscode的官方網(wǎng)站, 如果要配置到我們自己的站點(diǎn)目錄方法如下:

打開設(shè)置，然后找到Extensions,再找到Browser Preview,找到Start Url寫上你默認(rèn)打開的地址就可以了。

效果如下:

8. windos opacity 透明插件的使用

安裝好后，需要重啟一下VSCode，就可以出現(xiàn)透明效果了。

插件的設(shè)置: 打開設(shè)置界面，在左邊找到Extensions選項(xiàng)卡，然后找到Windows opacity進(jìn)行設(shè)置

這里邊只有一個(gè)設(shè)置項(xiàng)，就是Opacity，也就是我們要設(shè)置的透明度，值從0-255,數(shù)值越小透明度越高，數(shù)值越大透明度越低。

如果想關(guān)閉透明 設(shè)置透明度255即可!!

9. Bracket Pair Colorizer 代碼區(qū)塊提示插件

為我們自動(dòng)查找匹配標(biāo)簽開始結(jié)尾，括號(hào)匹配。從此再也不用花時(shí)間再成對(duì)標(biāo)簽或者括號(hào)開始與結(jié)尾的查找上了, 提高了工作效率

雖然vscode也自帶了 標(biāo)簽，括號(hào)的代碼區(qū)塊提示，但是個(gè)人覺得不夠明顯!! 所以推薦這款插件

進(jìn)入插件，在搜索欄上搜索, Bracket Pair Colorizer ?然后找到如果插件，直接點(diǎn)擊Install按鈕進(jìn)行安裝

安裝后 vscode重啟 效果如下:

有興趣的同學(xué) 可以找到File-->Preferences-->settings-->Extensions-->BracketPair 進(jìn)行更多設(shè)置 ?這里就不多講了!

10.vscode高清代碼截圖插件

Polacode代碼截圖插件

這個(gè)插件就是可以快速生成漂亮的代碼截圖， 比如要在博客里放置一個(gè)漂亮的代碼截圖，或者是快速分享到其它網(wǎng)絡(luò)平臺(tái) 都可以使用這個(gè)截圖插件 進(jìn)行代碼截圖 非常漂亮!!

打開VSCode中的插件，搜索 Polacode，這個(gè)你可以找到多個(gè)版本，這里我推薦的是 2020版本 ? 點(diǎn)擊install進(jìn)行安裝

使用方法

安裝完成后,先打開你要分享的代碼,然后按Ctrl + Shift + p 打開命令面板,然后再輸入框中輸入Polacode,就可以打開使用了

把自己想截圖的代碼拖拽選中后 就可以點(diǎn)擊右邊的截圖按鈕，生成圖片了!

CodeSnap 蘋果代碼截圖插件

也是一個(gè)vscode代碼截圖捕捉插件, 截圖更加清晰, 清晰度類似于蘋果電腦!

直接在插件市場(chǎng)搜索CodeSnap

安裝后重啟vscode

使用方法:

安裝完成后,先打開你要分享的代碼,然后按Ctrl + Shift + p 打開命令面板,然后再輸入框中輸入CodeSnap,就可以截圖代碼了!

CodeSnap想更改相關(guān)配置如下可以在settings.json中添加相關(guān)配置

CodeSnap是高度可配置的, 以下是可以更改的設(shè)置列表，以調(diào)整屏幕截圖的外觀

配置名稱值說明codesnap.backgroundColor十六進(jìn)制顏色值代碼段容器邊緣的背景色?？梢允侨魏斡行У腃SS顏色。codesnap.boxShadow默認(rèn)值: rgba(0, 0, 0, 0.55) 0px 20px 68px代碼段的CSS框陰影。可以是任何有效的CSS框陰影codesnap.containerPadding整數(shù) , 默認(rèn)值: 3em, 也可以使用px代碼段容器邊緣的填充?？梢允侨魏斡行У腃SS填充codesnap.roundedCorners布爾值 默認(rèn)為:true圓角配置 用于配置邊緣內(nèi)部代碼塊邊緣是否是圓角或方形角codesnap.showWindowControls布爾值 默認(rèn)為:true顯示或隱藏OS X樣式窗口按鈕的布爾值。codesnap.showWindowTitle布爾值 默認(rèn)為:false顯示或隱藏窗口標(biāo)題欄上的文件夾或文件名。codesnap.showLineNumbers布爾值 默認(rèn)為:true顯示或隱藏行號(hào)的布爾值codesnap.realLineNumbers布爾值 默認(rèn)為:false從文件的實(shí)際行號(hào)開始的布爾值，而不是1。codesnap.transparentBackground布爾值 默認(rèn)為:false用于在拍攝屏幕快照時(shí)使用透明背景。codesnap.target值: window [不顯示邊緣容器] ? ? ? container [顯示邊緣容器]意思就是是否要顯示外部的邊緣容器

我的配置如下:

{ ? //codesnap代碼截圖配置 ? "codesnap.backgroundColor":"#f2f2f2", ?//截圖代碼容器邊緣顏色 ? "codesnap.boxShadow": "5px 5px 60px 0px #888888", //陰影設(shè)置 ? "codesnap.containerPadding":"3em", ? "codesnap.roundedCorners":true, ? "codesnap.showWindowControls":true, ? "codesnap.showWindowTitle":false, ? "codesnap.showLineNumbers":true, ? "codesnap.realLineNumbers":false, ? "codesnap.transparentBackground":false, ? "codesnap.target":"container" }

11.Better Comments 修改注釋顏色插件

在代碼中 注釋的顏色 默認(rèn)是灰色的 ，可能你會(huì)覺得不好看 那么 就可以使用這款插件來讓注釋更加漂亮

Better Comments插件就可以實(shí)現(xiàn)注釋代碼高亮

點(diǎn)擊VSCode中的插件，然后在搜索欄中輸入Better Comments，然后點(diǎn)擊install就可以安裝

使用方法

其實(shí)使用就是在注釋開頭加上特殊的符號(hào)。 ! ?: 紅色注釋 ? ?: 藍(lán)色注釋 // : 灰色刪除線注釋 todo : 橘紅色注釋 * : 淺綠色注釋

在html,php代碼中修改注釋的顏色如下圖:

PHP注釋

HTML注釋

配置顏色注釋

Notice: 你也可以自己定義屬于自己的顏色。方法如下： 點(diǎn)擊后打開了settings.json, 復(fù)制下面代碼到settings.json,根據(jù)自己的喜好自定義了 也可以增加新的注釋顏色標(biāo)識(shí)符到setting.json中, ?注意: 原有的配置不能刪除 如果刪除就沒有效果了 ，只能新增注釋顏色標(biāo)識(shí)!! 如下:"Better-comments.tags": [ ? ? { ? ? ? "tag": "@", //自己定義一個(gè)字符串名字 ? ? ? "color": "yellow", ? ?//顏色 ? ? ? "strikethrough": false, ? ? ? "backgroundColor": "transparent" ? ? }, ? ? ? { ? ? ? "tag": "!", ? ? ? "color": "#FF2D00", ? ?//顏色 ? ? ? "strikethrough": false, ? ? ? "backgroundColor": "transparent" ? ? }, ? ? { ? ? ? "tag": "?", ? ? ? "color": "#3498DB", ? ?//顏色 ? ? ? "strikethrough": false, ? ? ? "backgroundColor": "transparent" ? ? }, ? ? { ? ? ? "tag": "//", ? ? ? "color": "#474747", ?//顏色 ? ? ? "strikethrough": true, ? ? ? "backgroundColor": "transparent" ? ? }, ? ? { ? ? ? "tag": "todo", ?//顏色 ? ? ? "color": "#FF8C00", ? ? ? "strikethrough": false, ? ? ? "backgroundColor": "transparent" ? ? }, ? ? { ? ? ? "tag": "*", //顏色 ? ? ? "color": "#98C379", ? ? ? "strikethrough": false, ? ? ? "backgroundColor": "transparent" ? ? } ? ],

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

12.koroFileHeader 文件頭部注釋和函數(shù)頭部注釋插件

作用是生成文件頭部注釋和函數(shù)注釋 , 但這個(gè)插件可以支持所有主流語言生成注釋!

安裝完成后可以新建一個(gè)test.js文件,就可以看到文件頭部會(huì)自動(dòng)生成一堆注釋

如果你是windows電腦，使用ctrl+shift+p鍵 Mac電腦使用shift+command+p鍵 然后輸入: codeDesign，就可以選擇注釋圖案了

==koroFileHeader Notice

如果沒有注釋 ，或者 想快速生成文件頭部注釋: 在文件頭部點(diǎn)擊快捷鍵`ctrl+alt+i`（Windows） 函數(shù)注釋快捷鍵 `ctrl+alt+t` 如果你是Mac電腦點(diǎn)擊`ctrl+cmd+i` (Mac) 就會(huì)快速生成代碼注釋了!

這時(shí)候你會(huì)發(fā)現(xiàn)不管是文件頭生成的注釋，還是函數(shù)頭部生成的注釋 都是需要在settings.json中配置的!

文件頭注釋自定義配置 在settings.json中配置文件頭的注釋如下

"fileheader.customMade": { ? ? "Author": "3#", ? ? "objectDescription" : "目前是測(cè)試項(xiàng)目", ? ? "Date": "Do not edit", // 文件創(chuàng)建時(shí)間(不變) ? ? "LastEditors": "3#", // 文件最后編輯者 ? ? "LastEditTime": "Do not edit", // 文件最后編輯時(shí)間 ? ? "FilePath": "Do not edit" ,// 增加此項(xiàng)配置即可 ? ? "Version": "2.0", ?},

修改完成后，要保存，然后退出VSCode，再進(jìn)來，進(jìn)入文件, 輸入ctrl+alt+i ?就可以生成自定義文件頭部注釋了!

函數(shù)頭注釋自定義配置 在settings.json中配置文件頭的注釋如下

"fileheader.cursorMode": { ?//此為函數(shù)注釋 ? ? ? ? "author":"3#", ? ? ? ? "description":"", ? ? ? ? "param": "", ? ? ? ? "return": "" ?}

效果如下:

Notice

1. 描述內(nèi)容(descripition)為了便捷添加，直接設(shè)置為空； 2. 這里的日期(Date)和修改時(shí)間(LastEditTime)設(shè)置，本身軟件就會(huì)自行添加和更新，所以直接寫“Do not edit”即可。 3. 除日期和參數(shù)(param)外的其他內(nèi)容，均可嘗試設(shè)置為漢字，方便查看

13.vscode 字體推薦

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

同時(shí)兩款值得推薦的字體是 Source Code Pro和Fira Code, 可以在settings.json中進(jìn)行配置!

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

?"editor.fontFamily": "Fira Code", ? //字體 ? "editor.fontSize": 12, ?//字體大小 ? "editor.fontWeight":"normal", //字體粗細(xì) ? "editor.fontLigatures":true, //是否字體連字

14.vscode編輯markdown相關(guān)插件

Markdown Preview Enhanced 預(yù)覽插件

安裝完成后重啟vscode即可

markdown PDF 插件

markdown PDF這個(gè)插件可用于將markdown文檔轉(zhuǎn)化為 PDF、HTML、PNG等文件的插件

打開vscode插件市場(chǎng)搜索markdown PDF 進(jìn)行安裝

安裝markdown PDF插件會(huì)依賴Chromium, 因此默認(rèn)情況下 它會(huì)嘗試下載Chromium, 并且時(shí)間會(huì)等待很長(zhǎng)一段時(shí)間

但是 某些時(shí)候在國(guó)內(nèi)，認(rèn)情況下它是無法下載的，所以您得手動(dòng)下載它。

其實(shí)不必非要下載 Chromium，如果您的電腦中已經(jīng)安裝了 Chrome 瀏覽器,那只需要簡(jiǎn)單配置一下路徑即可。

1. 找到 Chrome 應(yīng)用的路徑，比如，在我的電腦上是 "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"。 2. 打開 VS Code settings.json設(shè)置 、建議在用戶設(shè)置下面添加 。注意: 這一項(xiàng)，注意路徑中是兩個(gè)反斜杠。 { ? ? "markdown-pdf.executablePath": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe" }

配置完畢后，用 VS Code 隨意打開一個(gè) Markdown 文件，右擊文本編輯區(qū)域，就可以看到 Markdown PDF 的上下文菜單了

15.Prettier - Code formatter 插件

這款插件的作用就是可以在保存的時(shí)候自動(dòng)代碼格式化,

直接在插件市場(chǎng)搜索它，并安裝后重啟vscode

這款插件需要進(jìn)行一些配置,修改settings.json配置文件，添加如下配置信息

配置名稱值說明editor.formatOnSavetrue | false保存時(shí)格式化editor.tabSizeint ?默認(rèn):2tab 大小為2個(gè)空格editor.wordWrapColumnint 自定義100 列后換行breadcrumbs.enabledtrue | false開啟 vscode 文件路徑導(dǎo)航prettier.semitrue | false設(shè)置語句末尾不加分號(hào) ?（有效果）prettier.singleQuotetrue | false設(shè)置強(qiáng)制單引號(hào) ?（有效果）vetur.format.defaultFormatter.htmlprettyhtml選擇 vue 文件中 template 的格式化工具editor.renderControlCharacterstrue | false顯示 markdown 中英文切換時(shí)產(chǎn)生的特殊字符vetur.format.defaultFormatterOptions"prettier": { ?"singleQuote": true, ? "semi":false }vetur 的自定義設(shè)置

16.Community Material Theme插件

打開vscode插件市場(chǎng)搜索Community Material Theme 進(jìn)行安裝

然后點(diǎn)擊圖標(biāo)下面的 set Color Theme按鈕切換主題，如圖：

17.indent-rainbow 縮進(jìn)插件

使縮進(jìn)更具可讀性的簡(jiǎn)單擴(kuò)展

打開vscode插件市場(chǎng)搜索indent-rainbow 直接安裝即可!

插件效果如下：

18.LeetCode 刷題插件

它的作用就是刷算法題 可以在vscode內(nèi)部進(jìn)行測(cè)試!

打開vscode插件市場(chǎng)搜索LeetCode 進(jìn)行安裝 ? ?

安裝完成之后需要登錄!

?登錄的時(shí)候有國(guó)際版 和 ?中國(guó)版 的選擇 我們 這里選擇的是中國(guó)版! ?如下圖

然后輸出用戶名與密碼就可以登錄了! ?登錄成功后如下圖所示!

就可以刷題了!

19.Material Icon Theme 文件圖標(biāo)插件

這款插件的作用就是會(huì)讓vscode的文件產(chǎn)生好看的文件圖標(biāo)

在插件市場(chǎng)中搜索Material Icon Theme ?進(jìn)行安裝 后重啟vscode即可

效果如下:

20.VSCode Rainbow Fart彩虹屁語音插件

這個(gè)插件其實(shí)我認(rèn)為沒什么 多大的用處，但是 安裝上玩玩倒是可以的!!

在插件市場(chǎng)搜索:Rainbow Fart

安裝完成之后，在 VSCode 的菜單欄中找到 查看 - 命令面板，或使用快捷鍵 Ctrl + Shift + P（MacOS 使用 Command + Shift + P）呼出 命令面板。

在 命令面板 中輸入 Enable Rainbow Fart 并回車。

此時(shí)應(yīng)該會(huì)彈出一個(gè)消息通知，點(diǎn)擊通知上的 Open 按鈕。

在打開的頁面上點(diǎn)擊 授權(quán) 即可。

現(xiàn)在就可以在vscode中 輸入代碼的時(shí)候 會(huì)有語音聲音了!!

如果喜歡話請(qǐng) 點(diǎn)贊 ?投幣 ?收藏 一鍵三連 ?

大家的支持就是我堅(jiān)持下去的動(dòng)力!

不要忘了?? 關(guān)注 ??哦！