關於VsCode源碼編譯運行,請參考這篇文章:VsCode源碼編譯運行
當然了,也可以參考官方文檔(所以這里就不再贅述):https://github.com/Microsoft/vscode/wiki/How-to-Contribute#build-and-run
今天主要分享的是關於VsCode源碼修改之布局。
如圖所示(圖畫的不是特別好看):
簡單做個說明(主要文件存在目錄(src\vs\workbench\browser\parts):
1是titlebar
目錄在src\vs\workbench\browser\parts\titlebar
2是activitybar
目錄在src\vs\workbench\browser\parts\activitybar
3是sidebar
目錄在src\vs\workbench\browser\parts\sidebar
4是statusbar
目錄在src\vs\workbench\browser\parts\statusbar
5是welcome
目錄在src\vs\workbench\parts\welcome
如果你要想修改對應的樣式,可以分別去對應的文件下修改,下面我分別來介紹這些文件的一些簡單的修改,不過在此之前有一點還是要強調的,那就是關於VsCode的源碼解析,這里不作深入講解,但是既然是要二次開發,源碼中各個文件作用是必須要知道的。
整體文件目錄結構如下所示:
build文件夾 #gulp編譯構建腳本
extensions #內置插件
gulpfile.js #gulp task
node_modules #node.js依賴模塊(相當於java中的maven依賴)
out #編譯輸出目錄(typescript通常編譯會產生js文件,你可以翻看下out,發現這里邊基本都是js文件,當然了,也包含一些少量的json文件)
product.json #App meta信息
resources #平台相關靜態資源,圖標等
scripts #工具腳本,開發/測試
src #源碼目錄
test #測試套件
src下文件目錄結構,如下圖:
bootstrap-amd.js #子進程實際入口
bootstrap.js #子進程環境初始化
buildfile.js #構建config
cli.js #CLI入口
main.js #主進程入口
paths.js #AppDataPath與DefaultUserDataPath
typings #ts類型聲明
vs下文件目錄結構,如下圖所示:
bash #通用工具/協議和UI庫
-browser #基礎UI組件,dom操作,交互事件,DnD等
-common #diff描述,markdown解析器,worker協議,各種工具函數
-node #Node工具函數
-part #IPC協議(Electron、Node)、quickopen、tree組件
-test #bash單測用例
-worker #Worker factory 和main Worker(運行IDE Core:Monaco)
code #Vs Code主窗體相關
editor #對接IDE Core(讀取編輯/交互狀態),提供命令、上下文菜單、hover、snippet等支持
platform #支持注入服務和平台相關基礎服務(文件、剪切板、窗體、狀態欄)
workbench #協調editor並給viewlets提供框架,比如目錄查看器、狀態欄、活動欄等,全局搜索,集成Git,Debug
buildunit.json
css.build.js #用於插件構建css loader
css.js #css loader
loader.js #AMD loader(用於異步加載AMD模塊,類似於require.js)
nls.build.js #用於插件構建的NLS loader
nls.js #NLS(National Language Support)多語言支持
其中最關鍵的部分(業務相關的)是:
.src/vs/code:主窗體、工具類菜單創建
.src/vs/editor:代碼編輯器,IDE核心相關
.src/vs/workbench:UI布局,功能服務對接
P.S.IDE Core 可獨立使用,叫Monaco
每層按照目標執行環境細分組織:
common:可跨環境復用
browser:依賴瀏覽器API,比如DOM操作
node:依賴Node API
electron-browser:依賴electron renderer-process API
electron-main:依賴electron main-process API
上述目錄分別之作用參考鏈接為:http://ju.outofmemory.cn/entry/345080
通過上述的講解,明白了每個目錄及其文件的作用,我們着手開始對布局的修改。
一、titlebar修改
找到titlebar.css文件,如圖:
我們將display改為none即可隱藏titlebar
如果看titlebar左側的菜單欄(像file、edit等)這些不爽,想讓其消失,也是可以達到的,只不過就不是titlebar.css這個文件而是src\vs\base\browser\ui\menu\menu.css
將menu.css中的dislay改為none即可達到消失的目的,如圖所示:
另外你如果覺得想在titlebar左側(file,edit等)這些再多加一個menu項,找到這個文件E:\VsCode\vscode-master\src\vs\workbench\browser\parts\titlebar\menubarControl.ts
並依樣畫葫蘆分別在這幾個地方增加(以增加Login為例):
圖一:
圖二:
圖三:
這樣就可以達到在titlebar左側菜單欄多增加一個菜單選項。
但是像這樣的選項又是如何有的呢,如圖所示:
下面我告訴大家我是如何找到這個的。
首先我們看下面:
這個MenuService其實相當我們Java中的業務Service可調用其對應的方法完成業務邏輯。
MenuService是如何有的呢?之所以有肯定是導入進來的,然后我回到頂部找到這個導入語句,如圖所示:
vs/platform/actions/common/actions這個actions通常要么是文件夾,要么就是某個ts文件。
然后我就去那個文件夾或文件下找,果然被我找到了,它就是一個action.ts文件,如圖所示:
然后我就可以選擇下面枚舉定義點擊Login會出現什么樣的下拉菜單項。
這上面的剛好與這下面的對應,如圖所示:
二、Activitybar修改
目前Activitybar增加的菜單欄圖標我是通過插件的方式實現,還沒有找到如何直接增加一個菜單欄。
Activitybar如果要干掉的話,其實也很簡單,找到對應的css文件,即可干掉它。
例如,找到activitybar.css修改對應的樣式,如圖所示:
還是老規矩改樣式display改為none,但是由於其是絕對定位,即便干掉了,還會有所保留,這時我們找到一個叫layout.ts的文件(layou.ts主要用於布局計算),只需修改這段代碼即可解決這個問題。
修改layout.ts這段代碼即可,如圖所示:
如果我們要在圖標下面添加對應的文件怎么辦呢?
首先找到這個文件src\vs\workbench\browser\parts\activitybar\media\activityaction.css
將其修改為如下:
/*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ .monaco-workbench > .activitybar > .content .monaco-action-bar .action-item { display: block; position: relative; padding: 5px 0; } .monaco-workbench > .activitybar > .content .monaco-action-bar .action-label { display: flex; overflow: hidden; height: 70px; line-height: 70px; margin-right: 0; padding: 0 0 0 50px; box-sizing: border-box; font-size: 15px; } .monaco-workbench > .activitybar > .content .monaco-action-bar .action-item:focus:before { content: ""; position: absolute; top: 9px; height: 32px; width: 0; border-left: 2px solid; } .monaco-workbench > .activitybar > .content .monaco-action-bar .action-item0:after { content: "打開"; position: absolute; top: 56px; height: 32px; text-align: center; width: 70px; } .monaco-workbench > .activitybar > .content .monaco-action-bar .action-item1:after { content: "編輯"; position: absolute; top: 126px; height: 32px; text-align: center; width: 70px; } .monaco-workbench > .activitybar > .content .monaco-action-bar .action-item2:after { content: "調試"; position: absolute; top: 196px; height: 32px; text-align: center; width: 70px; } .monaco-workbench > .activitybar > .content .monaco-action-bar .action-item3:after { content: "擴展"; position: absolute; top: 266px; height: 32px; text-align: center; width: 70px; } .monaco-workbench > .activitybar > .content .monaco-action-bar .action-item4:after { content: "關閉"; position: absolute; top: 336px; height: 32px; text-align: center; width: 70px; } /* .monaco-workbench > .activitybar > .content .monaco-action-bar .action-item5:after { content: "設置"; position: absolute; top: 106px; height: 32px; text-align: center; width: 70px; } */ .monaco-workbench > .activitybar > .content .monaco-action-bar .action-item.clicked:focus:before { border-left: none !important; /* no focus feedback when using mouse */ } .monaco-workbench > .activitybar.left > .content .monaco-action-bar .action-item:focus:before { left: 1px; } .monaco-workbench > .activitybar.right > .content .monaco-action-bar .action-item:focus:before { right: 1px; } .monaco-workbench > .activitybar > .content .monaco-action-bar .badge { position: absolute; top: 5px; left: 0; overflow: hidden; width: 50px; height: 40px; } .monaco-workbench > .activitybar > .content .monaco-action-bar .badge .badge-content { position: absolute; top: 20px; right: 8px; font-size: 11px; min-width: 8px; height: 18px; line-height: 18px; padding: 0 5px; border-radius: 20px; text-align: center; } /* Right aligned */ .monaco-workbench > .activitybar.right > .content .monaco-action-bar .action-label { margin-left: 0; padding: 0 50px 0 0; background-position: calc(100% - 9px) center; } .monaco-workbench > .activitybar.right > .content .monaco-action-bar .badge { left: auto; right: 0; }
僅僅這樣做還是不夠,還是得需要找到ts文件
主要修改src\vs\base\browser\ui\actionbar\actionbar.ts這個ts文件
最終的結果是這樣的,如圖所示:
不過這樣看還是不爽,原來還有一個地方需要改那就是layout.ts
將這個值改為70,看起都居中就顯得比較完美了。
三、sidebar修改
主要修改的還是css文件,如圖所示:
隱藏就行,但是如果你想在里面添加什么東西,比如增加一個樹形功能之類的,這個可以去參考官網,官網的展示圖是這樣的,如下所示:
地址為:https://code.visualstudio.com/api/extension-guides/tree-view
官方雖然有一demo但是由於某種原因跑不起。
關於sidebar增加視圖,等后續研究成熟時,我會結合一些案例進行講解。
四、statusbar修改
還是老辦法,你如果覺得statusbar沒什么用完全可以隱藏它。修改css如下(加個display:none即可):
記得也要改對應的layout.ts文件,不然即便隱藏起來,但是還會占着底部位置,也沒多大用。
五、修改歡迎頁(welcome)
比如我想在歡迎頁增加一個表單html,如下所示:
效果如圖:
但是由於某種原因不支持內嵌ts加入script進行通信,所以我才選擇通過插件的方式進行通信。