Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

vscode 編輯器護眼樣式

Bealei 2021-08-16 23:24:24 阅读数:5493 评论数:0 点赞数:0 收藏数:0

vscode自帶暗黑炫酷是挺好看的,但是看久了眼睛會疲勞,這裏模仿HBuilderX的綠柔主題做的這個vs code主題,代碼如下。

先看最終效果圖

在這裏插入圖片描述

設置方法

  • windows: Ctrl + Shift + P
  • macOS: Command + Shift + P
  • 選擇Open Settings(JSON)然後將代碼複制進去

代碼塊

{
"window.zoomLevel": 1, //窗口.縮放級別
"editor.tabSize": 2, //工作臺主題顏色
"typescript.updateImportsOnFileMove.enabled": "always",
"editor.formatOnSave": true, // 保存時格式化
"breadcrumbs.enabled": false, // 開啟 vscode 文件路徑導航
// "tslint.autoFixOnSave": true, // #每次保存的時候將代碼按tslint格式進行修複
"eslint.autoFixOnSave": true, // #每次保存的時候將代碼按eslint格式進行修複
// "prettier.semi": false,//prettier 設置語句末尾不加分號
"prettier.singleQuote": true, // prettier 設置强制單引號
"vetur.format.defaultFormatter.js": "vscode-typescript", // #讓vue中的js按編輯器自帶的ts格式進行格式化 
"window.enableMenuBarMnemonics": false,
"liveServer.settings.donotShowInfoMsg": true,
// "workbench.colorTheme": "Winter is Coming (Light)", //窗口.不啟用菜單欄輸入法,修改主題配色
// "workbench.colorTheme": "Visual Studio Light",
"workbench.colorTheme": "Default Light+",
//代碼注釋部分顏色
"editor.tokenColorCustomizations": {
"comments": "#95a3ab"
},
"workbench.colorCustomizations": {
"editorGroupHeader.tabsBackground": "#FFFAE8", // 標題欄未使用的地方
"editorLineNumber.foreground": "#9F9371", //代碼行號顏色 
"editor.lineHighlightBackground": "#E8DFC4", //代碼選中高亮顏色
"editor.selectionBackground": "#BCD68D",
"editor.background": "#FFFAE8",
"editorIndentGuide.background": "#cecdc2", //代碼對齊線顏色
//標題欄顏色設置
"titleBar.activeBackground": "#fffef9",
"titleBar.inactiveBackground": "#fffef9", //失去焦點時titlebar顏色
//活動欄顏色
//"activityBar.background": "#FFFAE8", //設置這個顏色圖標顯示不清楚
"activityBar.background": "#539c5f", //最左邊的活動欄背景顏色
"activityBar.activeBorder": "#41A863", //好像沒有什麼用
//選項卡顏色設置 
"tab.activeModifiedBorder": "#41A863",
"tab.hoverBackground": "#daeace",
"tab.border": "#fffae8",
"tab.activeBackground": "#41A863",
"tab.activeForeground": "#ffffff",
"tab.inactiveBackground": "#fffae8",
"tab.inactiveForeground": "#41A863",
//側邊欄顏色設置
"sideBarSectionHeader.background": "#FFFAE8",
"sideBar.background": "#FFFAE8",
"sideBarSectionHeader.foreground": "#AB7E05",
"sideBar.border": "#d8ca9e",
"sideBar.foreground": "#46433c",
"sideBarTitle.foreground": "#46433c",
//底部狀態欄顏色設置
"statusBar.background": "#fffdf4",
//滾動條顏色
"scrollbarSlider.background": "#cfb56a",
"scrollbarSlider.hoverBackground": "#cfb56a",
"scrollbarSlider.activeBackground": "#cfb56a",
//終端窗口面板顏色設置
"panel.background": "#fffcf3",
"panel.border": "#d8ca9e",
//彈出小窗口:選項設置提示窗口,源代碼補全窗口
"editorWidget.background": "#BCD68D", // 彈出小窗口的背景
"editorSuggestWidget.selectedBackground": "#e8dfc4", //代碼提示選中行高亮
"list.hoverBackground": "#e8dfc4", // 鼠標所在行的顏色
"editorWidget.border": "#BCD68D", // 彈出小窗口的邊框
"list.activeSelectionBackground": "#41A863", //側邊欄選中高亮
"list.inactiveSelectionBackground": "#d8ca9e" //側邊欄選中未獲得焦點顏色
},
"editor.fontSize": 18,
"files.autoSave":"afterDelay",
"editor.wordWrap":"on",
}
複制代碼

SmartyPants

editor.rangeHighlightBackground 突出顯示範圍的背景顏色,例如 "Quick Open" 和“查找”功能

SmartyPants將ASCII標點字符轉換為“智能”印刷標點HTML實體。例如:

圖示 參數名 作用
1 activityBar.foreground 活動欄前景色(例如用於圖標)
2 activityBar.background 活動欄背景色
3 sideBarSectionHeader.background 側邊欄節標題的背景顏色
4 sideBar.foreground 側邊欄前景色
5 sideBar.background 側邊欄背景色
6 tab.inactiveForeground 活動組中非活動選項卡的前景色
7 tab.inactiveBackground 非活動選項卡的背景色
8 tab.activeForeground 活動組中活動選項卡的前景色
9 tab.activeBackground 活動選項卡的背景色
10 editorLineNumber.foreground 編輯器行號顏色
11 editorGutter.background 編輯器導航線的背景色,導航線包括邊緣符號和行號
12 editor.background 編輯器背景顏色
13 editor.foreground 編輯器默認前景色
14 editorCursor.foreground 編輯器光標顏色
15 editor.lineHighlightBackground 光標所在行高亮文本的背景顏色
16 editorBracketMatch.background 匹配括號的背景色
17 statusBar.background 標准狀態欄背景色
17 statusBar.noFolderBackground 沒有打開文件夾時狀態欄的背景色
17 statusBar.debuggingBackground 調試程序時狀態欄的背景色
editor.findMatchBackground 當前搜索匹配項的顏色
editor.findMatchHighlightBackground 其他搜索匹配項的顏色
editor.selectionBackground 編輯器所選內容的顏色
editor.selectionHighlightBackground 與所選內容具有相同內容的區域顏色
editor.rangeHighlightBackground 突出顯示範圍的背景顏色,例如 "Quick Open" 和“查找”功能
在這裏插入圖片描述
大家可以根據以上參數代碼自定義顏色。
版权声明
本文为[Bealei]所创,转载请带上原文链接,感谢

编程之旅,人生之路,不止于编程,还有诗和远方。
阅代码原理,看框架知识,学企业实践;
赏诗词,读日记,踏人生之路,观世界之行;

支付宝红包,每日可领