vscode主題配置參考
有關(guān) VS?Code 的基本設(shè)置，本文不再贅述，請自行百度。VS?Code?可使用圖形化界面進(jìn)行設(shè)置，也可以直接寫配置文件進(jìn)行設(shè)置，這里只介紹直接寫配置文件的方法。打開配置文件：File >>?Preferences >>?Settings?然后點擊右上角的這個圖標(biāo)：
VS?Code?的主題配置主要包括各種語言代碼文本的語法高亮和編輯器內(nèi)的各種前景色和背景色（例如代碼智能補全提示候選項的高亮色）。其中大部分設(shè)置可通過安裝一個主題插件（插件的安裝配置方法可參考?vscode插件配置參考）搞定，啟用即生效，若感覺主題有些地方的效果不符合期望，則自己再做一些額外配置覆蓋主題默認(rèn)的配置即可。?
以下是基于?Bluloco Dark Theme?插件（或?Rainier?插件?也行，效果基本類似）做一定額外配置后的一套主題配置，僅供各位朋友參考：
{
? ?// 如果覺得有哪個顏色自己不喜歡，覺得太素了或者太花了，按照自己的習(xí)慣和喜好更改即可，VS Code 的配置修訂是保存即生效的，無需重啟，調(diào)試很方便
? ?/* ===主題色彩相關(guān)配置=== */
? ?"workbench.iconTheme": "vscode-icons", // 圖標(biāo)(插件)
? ?// "workbench.colorTheme": "Rainier", ?// 主題(插件)
? ?"workbench.colorTheme": "Bluloco Dark",
? ?// 語法高亮
? ?"editor.tokenColorCustomizations": {
? ? ? ?"comments": {
? ? ? ? ? ?// "fontStyle": "italic",
? ? ? ? ? ?// "foreground": "#666666"
? ? ? ?},
? ? ? ?"functions": {
? ? ? ? ? ?"fontStyle": "bold",
? ? ? ? ? ?"foreground": "#f770d9"
? ? ? ?},
? ? ? ?"keywords": {
? ? ? ? ? ?// "fontStyle": "bold",
? ? ? ? ? ?"foreground": "#937dd6"
? ? ? ?},
? ? ? ?"variables": {
? ? ? ? ? ?"fontStyle": "italic",
? ? ? ? ? ?"foreground": "#6cb900"
? ? ? ?},
? ? ? ?"numbers": {
? ? ? ? ? ?"fontStyle": "bold",
? ? ? ? ? ?"foreground": "#ffff00"
? ? ? ?},
? ? ? ?"strings": {
? ? ? ? ? ?// "fontStyle": "italic",
? ? ? ? ? ?// "foreground": "#fca106"
? ? ? ?},
? ? ? ?"types": {
? ? ? ? ? ?// "fontStyle": "bold",
? ? ? ? ? ?// "foreground": "#666666"
? ? ? ?},
? ? ? ?// 特定的文本色彩控制(高級設(shè)置)
? ? ? ?/*
? ? ? ?上述幾種設(shè)置的"scope":
? ? ? ? ? ?comments: 'comment',
? ? ? ? ? ?strings: 'string',
? ? ? ? ? ?keywords: 'keyword',
? ? ? ? ? ?numbers: 'constant.numeric',
? ? ? ? ? ?types: 'entity.name.type',
? ? ? ? ? ?functions: 'entity.name.function',
? ? ? ? ? ?variables: 'variable'
? ? ? ?*/
? ? ? ?"textMateRules": [
? ? ? ? ? ?{
? ? ? ? ? ? ? ?// html標(biāo)簽
? ? ? ? ? ? ? ?"scope": ["entity.name.tag.html"],
? ? ? ? ? ? ? ?"settings": {
? ? ? ? ? ? ? ? ? ?// "foreground": "#c54a67"
? ? ? ? ? ? ? ? ? ?"foreground": "#34a853"
? ? ? ? ? ? ? ?}
? ? ? ? ? ?}
? ? ? ?]
? ?},
? ?// 工作區(qū)顏色
? ?"workbench.colorCustomizations": {
? ? ? ?"editor.selectionBackground": "#fdfdda", // 選中區(qū)域高亮背景色
? ? ? ?"editor.lineHighlightBackground": "#000001", // 當(dāng)前活躍行背景色
? ? ? ?"editorCursor.foreground": "#ff5e11", // 光標(biāo)顏色(推薦可選: #ffff00 #ff5e11)
? ? ? ?"editorSuggestWidget.selectedBackground": "#34a853", // 提示選項選中項背景顏色
? ? ? ?"editorBracketMatch.border": "#666666", ?// 當(dāng)前被選中的成對括號高亮區(qū)邊框色
? ? ? ?"editorBracketMatch.background": "#666666", ?// 當(dāng)前被選中的成對括號高亮區(qū)背景色
? ? ? ?"editorWidget.background": "#322f3b", // 查找欄背景色(龍葵紫)
? ? ? ?"editor.findMatchBackground": "#8158fc", // 和查找項匹配的高亮背景色
? ? ? ?"tab.activeBackground": "#937dd6", // 當(dāng)前活動窗口tab標(biāo)簽顏色(可選: #fc58fe)
? ? ? ?"menu.selectionBackground": "#34a853", // 菜單選中項背景色
? ? ? ?"list.hoverBackground": "#34a853", // 文件列表光標(biāo)懸浮背景色
? ? ? ?"list.activeSelectionBackground": "#666666", // 文件列表中打開查看但未處于激活狀態(tài)的背景色
? ? ? ?"list.inactiveSelectionBackground": "#555555", // 文件列表中當(dāng)前處于激活狀態(tài)(可編輯)的背景色
? ? ? ?"minimap.errorHighlight": "#ff0000", ?// 代碼略縮圖里報錯所在行高亮色
? ? ? ?"minimap.findMatchHighlight": "#34a853", ?// 代碼略縮圖里匹配項所在行高亮色
? ? ? ?"minimap.selectionHighlight": "#ff5e11", ?// 代碼略縮圖里被選中區(qū)域高亮色
? ? ? ?"editorHoverWidget.foreground": "#6cb900" // 參數(shù)提示高亮 since V1.62.0
? ?},
}目前 VS Code 插件庫中非常受歡迎的主題插件包括但不僅限于如下這些：
Atom One Dark Theme
Atom One?Light?Theme
Bluloco Dark Theme
Bluloco?Light?Theme
Darcula Theme
Gruvbox Theme
Material Theme
One Monokai 80s Plus Theme
Palenight Theme
Rainier
RainbowDrops
Slack Theme
Super?One Dark?Theme
VS?Code?可以同時安裝多個插件看需要和心情切換著用（比如說光線弱時切深色主題，光線強(qiáng)時切淺色主題），切換的快捷鍵默認(rèn)是?Ctrl+`(反引號和波浪號鍵，位于鍵盤最左上角Esc鍵的正下方第一個就是)
無圖無真相，部分主題插件的效果圖如下（已做上文中設(shè)置示例中"editor.tokenColorCustomizations"部分的優(yōu)化處理，語言以JS為例，其他各種語言高亮效果都比較接近，因為高亮要素?zé)o非就是主背景色、主前景色、關(guān)鍵字、標(biāo)識符、數(shù)字、符號、方法、注釋、變量、常量等，各種語言這些要素基本都一樣）：
有關(guān) VS?Code 主題自定義的參考(高級設(shè)置，設(shè)置粒度更細(xì)膩，例如只調(diào)整XML標(biāo)簽的顏色):
https://www.alveeakand.com/how-to-modify-themes-in-vscode/
https://medium.com/@nuozheng/how-to-customize-visual-studio-code-theme-colors-a6fb1e94f71f/
https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide/ (官方文檔)
OK，這次有關(guān) VS Code 的主題配置參考就到這里。各位朋友如果還有其他比較好的關(guān)于 VS Code?主題的配置參考或推薦，歡迎在評論區(qū)留言。如發(fā)現(xiàn)任何錯誤（錯別字也算），也請不吝賜教于評論區(qū)指出，謝謝大家！祝各位編碼愉快~~ 贊美太陽?。。?/p>
最后順便一提 Bilibili 專欄的原創(chuàng)聲明不代表我的真實意愿，它說的是"本文為我原創(chuàng)，本文禁止轉(zhuǎn)載或摘編"，我的意愿是"本文為我原創(chuàng)，但本文在不用于商業(yè)盈利的前提下允許轉(zhuǎn)載或摘編，轉(zhuǎn)載請注明出處"。?
