VScode 插件開發（三）主題

我們上回書說道，安裝完基礎環境，咱們要來玩本身的主題了

1. 建立一個主題項目

$ yo code
複製代碼

選中 New Color Theme

接下來照圖中所選，完成項目建立（簡單英語不作解釋）

打開項目如圖

2. 配置文件

2.1 themes

這個文件夾包含主題配置文件，能夠新建兩個，一個暗色主題，一個亮色主題

如圖所示

{
	"name": "test theme", // 姓名
	"type": "dark",  // 類型（暗色仍是亮色）
	"colors": {  // 配置外框主題，導航欄，文件欄，等
    	    "editor.background": "#263238",
    	    "editor.foreground": "#eeffff",
    	    "activityBarBadge.background": "#007acc",
    	    "sideBarTitle.foreground": "#bbbbbb"
	},
	"tokenColors": [    // 配置代碼的顏色
            {
    		"name": "Comment",   // 隨便起名，本身知道什麼意思就好
    		"scope": [    // 這個顏色要應用於哪一種類型的代碼上 
    			"comment",
    			"punctuation.definition.comment"
    		],
    		"settings": {   // 配置顏色，斜體，粗體等
    			"fontStyle": "italic",
    			"foreground": "#546E7A"
    		}
    	    }
	]
}
複製代碼

以上就是一個主題的配置，這篇文章就說完了~~~

那不可能的，這麼兩句東西，誰能知道怎麼寫，我本身也不知道，哈哈哈，因此用了偷懶的方法

偷懶步驟 一、下載一個主題插件

偷懶步驟 二、找到這個主題插件，而後複製其中顏色部分代碼

偷懶步驟 三、按照字段找顏色替換

ps: mac 中主題文件在 users -> .vscode -> extensions 中

2.2 修改顏色

通過一番研究（取巧、偷懶、抄襲），將字段一個個調整爲本身喜歡的顏色

ps：調試小技巧 cmd + shift + p 找到命令

此時咱們鼠標點到任何一個字段上面，就會有提示，這樣咱們修改起顏色就很方便

點擊 vscode 小蟲子就能夠直接調試 ~~

推銷主題

通過三天的研究顏色問題，怎麼搭配讓個人眼睛舒服，畢竟我不想由於代碼讓眼睛配上一個500度的眼鏡

因此本身製做了主題

代碼看起來，簡直不要太舒服！

清晰，舒服，大氣！！！

可是大家有時間最好仍是弄本身的吧，本身作的才舒服。

VScode 插件開發（一）絮叨

VScode 插件開發（二）package.json詳解

VScode 插件開發（三）主題

VScode 插件開發（四）代碼段

VScode 插件開發（五）插件包

VScode 插件開發（六）打包發佈