vscode插件開發（2）-主題插件

創建

What type of extension do you want to create?：New Color Theme
Do you want to import or convert an existing Textmate color theme?：是否導入已經存在的主題文件
What's the name of your extension?：擴展插件的名字
What's the identifier of your extension?：擴展的標誌（也是接下來創建的擴展項目文件夾名）
What's the description of your extension?：主題擴展的描述
What's the name of your theme shown to the user?：用戶看到的名字
Select a base theme：創建的主題是深色、淺色、還是高對比度的，選擇後會根據主題默認提供一部分顏色，基於它再進行擴展

這是我選擇的配置項：

目錄結構

• .vscode
  • launch.json
• themes
  • mytheme-color-theme.json：配置插件入口文件
• .vscodeignore：配置不需要加入最終發佈到擴展中的文件
• CHANGELOG.md：變更記錄
• package.json：資源配置文件
• READE.md
• vsc-extension.quickstart.md
• LICENSE：生成的文件目錄是沒有license文件的，發佈需要有license這裏創建了一個

package.json

{
	//擴展名-應該全部爲小寫字母，沒有空格
    "name": "girls-theme",
    //擴展在市場中顯示的名稱
    "displayName": "Cool-girls-theme",
    //擴展的說明
    "description": "a cool pink theme for girls",
    //版本號
    "version": "0.0.1",
    //插件在市場中顯示的icon圖標
    "icon": "icon.png",
    //擴展在網頁版的vscode微軟開發市場中的banner設置
    "galleryBanner": {
    	//banner圖背景顏色
        "color": "#c7ADFB",
       	// 主圖：light或dark
        "theme": "light"
    },
    // 發佈者
    "publisher": "suwanqing",
    //
    "repository": {
        "type": "git",
        "url": "https://github.com/sususususususs/girls-theme.git"
    },
    //一組關鍵字，查找擴展名更加容易，目前最多五個
    "keywords": ["theme", "pink", "girls", "pink-theme", "girl", "cool"],
    //插件最低支持的vscode版本
    "engines": {
        "vscode": "^1.44.0"
    },
    //插件應用市場分類
    "categories": [
        "Themes",
        "Other"
    ],
    //開發這信息
    "author": {
        "name": "suwanqing",
        "email": "[email protected]",
        "url": "https://github.com/sususususususs"
    },
    //貢獻點(最重要的就是contributes)
    "contributes": {
    	//主題
        "themes": [
            {
            	//插件在UI界面功能貢獻顯示的名稱
                "label": "Coolgirls-theme",
                //vscode整體的UI主題，vs-dark爲深色主題，vs爲淺色主題
                "uiTheme": "vs-dark",
                //主題配色方案文件路徑
                "path": "./themes/mytheme-color-theme.json"
            }
        ]
    },
    //bugs
    "bugs": {
        "url": "https://github.com/sususususususs/girls-theme/issues"
    },
    //主頁
    "homepage": "https://github.com/sususususususs/girls-theme/readme",
    //協議
    "license": "SEE LICENSE IN LICENSE",
    ...
}

更多配置項官方文檔傳送

mytheme-color-theme.json

{
	//名
	"name": "girls-theme",
	//類型
	"type": "dark",
	//vscode界面(比如主題的背景顏色，按鈕，終端面板等)的配置
	"colors": {
		...
	},
	//代碼語法高亮的配置
	"tokenColors": {
		...
	}
}

colors

colors配置項過多在另外一篇文章裏：vscode插件開發②-主題插件：colors配置項

tokenColors

tokenColors使用對象和數組描述語法高亮顏色，結構如下

{
			//規則描述，可選
			"name": "Comment",
			//作用域，作用於哪些代碼
			"scope":[
				"comment",
				"keyword.control",
				"keyword.operator",
				"variable.language",
				"storage.type",
				"markup.italic.markdown",
				"punctuation.definition.keyword"
			],
			"settings": {
				//文字顏色，可選
				"foreground": "#cccccc",
				//文字字體，可選
				"fontStyle": "italic",
				//背景顏色，可選
				"background": "#ffffff",
			}
		},

tokenColors中scope配置項說明：vscode插件開發②-主題插件：tokenColors配置項

調試

按F5即可打開調試窗口，看到配置的主題樣式

打包發佈

vscode插件開發③-打包發佈