帶你了解vscode中的【空間控制】

歡迎來到vscode 的世界，本文目標為科普vscode 中關於【空間控制】的一些設計理念，空間是有限的，而資訊是無限的，就像是我們寫頁面要考慮版心、考慮空間的擺放，vscode 其實也就是一個應用，那它的介面空間也是有限的，這些中間由各個區域搭建起來，那這些區域是什麼？又是如何協同工作的呢？ 【推薦學習：《vscode教學》】

本文的主要內容可以說是小技巧，但我是一個很懶的人，不喜歡死記硬背，喜歡在需要記憶的內容間尋找它們內部的聯繫，然後用邏輯去串起來，這給我一種說不出的快感；可能這個記憶方法不適合很多行業，但在計算機領域，真是個我個人無比推崇的方法，原因很簡單：計算機就是一個完全由人搭建出來的世界！

這意味著，如果能理解設計者的思路，很多東西的設計就變得順理成章，不這麼用都覺得彆扭。另一個潛在的好處是，我們會漸漸像那些優秀的人一樣思考，這很關鍵。

扯了很多，言歸正傳，讓我們就開始吧！

vscode 區域總覽

        以上圖為例，我們常見且常用的區域及對應功能大致如下

• 工作目錄：目前處理項目的目錄資訊

• #指令面板：提供支援透過指令喚起vscode 對應動作的面板

• 編輯區：更改目前專案內容的區域，存在編輯群組等概念

• 終端區：提供內嵌終端區域的方式實作在vscode中直接執行終端指令，win 預設power shell；可配置為bash

  知道了這些核心區域的存在，接下來，我們開始逐一分析

編輯區域

        編輯器區域是最關鍵的一塊區域，因為它是我們直接控制專案的入口，正常的檔案操作設計理念其實主要是對遊標的操作，這個在遊標操作一文中已經分享過，就不贅述了，有興趣的小伙伴可以去看一下；

        本文關心點在於空間的分配，編輯區是預設展示且佔用面積最大的一塊區域，對於這塊空間的處理，主要存在如下訴求

• 多個打開的文件間如何切換
• 多檔案如何同時看到對應內容

        對於第一個問題，可以透過一類快速鍵實現；而第二個問題，在vscode 中提出了編輯器群組的概念，編輯區可以被劃分成至多五塊區域，相互獨立。

        如果閱讀過遊標操作一文，會知道我是採用【顆粒度】的角度進行理解遊標設定的，空間控制其實也可以從這個角度進行理解，具體怎麼做，我們透過問題來理解

編輯區之多個開啟的文件間如何切換：快捷鍵

        我們先來看看預設的快速鍵設定

ctrl tabctrl option ←ctrl option →

指令	mac	win
	##在目前開啟檔案清單中選擇	ctrl tab
	切換為目前檔案中的下一個| Open Previous Editor	cmd option ←
	切換為目前檔案中的上一個| Open Next Editor	cmd option →

######

在目前開啟檔案清單中選擇

#切換為目前檔案中的上/下一個

#指令執行

其實也是可以用指令執行的

        我們思考下，在mac 中同類型的指令，為什麼【在列表中選擇】是ctrl鍵，而【切換為目前檔案中的上/下一個】是cmd鍵；其實關鍵在於mac 中系統本身也存在快捷鍵cmd 方向鍵，作用是全螢幕視窗的切換；

        這樣就好理解啦，系統最大，理解了這一層之後，我們可以開動腦筋了，能不能利用上一篇中說的【自訂快捷鍵】讓他們統一呢？

        當然可以，我們就加個設定：如果和系統鍵衝突的，我們就加個options鍵；以這個【切換為當前文件中的上/下一個】為例，我們仍沿用ctrl，只不過為了避免衝突，改為ctrl options鍵

        自訂之後邏輯可以理解為，編輯器內的檔案顆粒度是ctrl，如ctrl ←是切換視窗，那麼切換開啟檔案就只能是ctrl option ←;cmd 0是Focus into side Bar | 聚焦在側邊欄，那切換編輯器群組方向就只能是cmd option 0;

指令macwin#在目前開啟檔案清單中選擇ctrl tab

ctrl tab

切換為目前檔案中的下一個| Open Previous Editor

cmd option ← （自訂了ctrl option ← ）

切換到目前檔案中的上一個| Open Next Editorcmd option →（自訂了ctrl option → ）

編輯器組的概念，其實就是分區而治，功能完全一樣，直接看案例就好        對編輯器組空間的掌握，同樣一句話，cmd，對應指令總覽如下;

編輯區之多檔案如何同時看到對應內容：編輯器群組		#        對於編輯器區域這麼一大塊內容，要同時看到多個處理文件，那就拆分唄，這就引出了
	編輯器組顆粒度是
指令總覽
mac	win

Split Editor | 分割編輯器

Cmd \

Ctrl \Flip Editor Group Layout | 切換垂直/水平編輯器佈局

Split switch | 切換編輯器群組中的目前編輯器	Cmd [組數]	Ctrl [組數]
Cmd Option 0	Shift Alt 0

切換

指令

#mac

winSplit switch | 切換編輯器群組中的目前編輯器 Cmd [群組數]Ctrl [群組數]######################################################## ####################切換編輯器群組方向######### 預設編輯器群組間的編輯器排布是橫向#### ###########指令######mac######win###################Flip Editor Group Layout | 切換垂直/水平編輯器佈局######Cmd Option 0######Shift Alt 0############

編輯器群組控制檔案

        我們知道了編輯器群組本身的支援功能，那顆粒度更細一點，編輯器組對文件的支援呢？ 編輯器組內的檔案顆粒度是cmd ctrl

	#mac	win
Move Editor into Previous Group | 將目前檔案移到上一個編輯器	cmd ctrl ←	ctrl tab
Move Editor into Next Group | 將目前檔案移到下一個編輯器	cmd ctrl ←

#切換目前處理檔案

##mac#win在目前開啟檔案清單中選擇ctrl tabctrl tab切換為目前檔案中的下一個| Open Previous Editorcmd option ← （自訂了ctrl option ← ）##切換到目前檔案中的上一個| Open Next Editorcmd option →（自訂了ctrl option → ）

#指令

移動目前檔案至編輯器中的左右編輯群組項目

# #指令macwin#Move Editor into Previous Group | 將目前檔案移到上一個編輯器cmd ctrl ←

		ctrl tab

#Move Editor into Next Group | 將目前檔案移到下一個編輯器

cmd ctrl ←

##命令面板區域指令分割：特殊識別#捷徑for Mac快捷鍵for win# 空白根據檔案名稱進行模糊查詢cmd p?執行指令

##指令面板其實就是一個輸入框，採用的是一種策略模式，行為依照前置標識符作為分類。	vscode 設定了符號的概念，意為變數、函數、呼叫等的集合。		其實可以大致分為兩類，特殊標識和特殊字符，這樣區分會容易記憶。
			#特殊識別
取得可進行的操作的幫助

cmd shift p

[ filename?]:[rowIndex]ctrl g# Ctrl Shift Ocmd T指令分割：特殊字元特殊字元需要加個空格才會觸發對應策略，有這樣的設定也很簡單，如果不加空格，直接就匹配上之前的【檔案名稱】查找策略了特殊字元| 來源單字

定位行號（不指定檔案名稱就是目前開啟的檔案）	ctrl g
#@[:?]	模糊查詢目前檔案符號，不填預設展示所有（若加上:會分類展示）Cmd Shift O
	#模糊查詢目前開啟的檔案清單中的符號，不填預設為空

################## ##對應策略##################edt [active?] | edit######顯示所有已經開啟的文件，加上###active###則只會顯示目前活動群組中的檔案############ext [install?] | extension######取得可進行的動作的協助，加上###install# ##則可以在指令面板中搜尋並安裝外掛程式############task#######執行任務############debug#### ##執行調試############term | terminal######建立和管理終端實例############view######打開VS Code 的各個UI 元件############

擴充摘要

        基於指令面板，其實還有一套關於在vscode 中對搜尋功能的梳理，限於篇幅，將會在下一篇文章中以短文（工具文）的形式出現

終端機區域

比較好理解，其實就是一些指令

指令	mac	win
#喚起終端| toggle terminal	ctrl 飄	ctrl 飄
#已喚起狀態下新終端| create new intergrate terminal	#ctrl shift 飄	ctrl shift 飄
聚焦於終端| Focus into panel	自訂為cmd 3
聚焦於下一端| Focus Next Terminal	自訂為cmd shift →
聚焦於上一終端機| Focus Previous Terminal	自訂為cmd shift ←

喚起終端

已喚起狀態下新終端機

聚焦於終端機

聚焦於上/下一個終端機

#側邊欄區域        側邊欄只關心一個很常用的關鍵快速鍵即可，即展示/隱藏側邊欄win

	#指令	mac

展示/隱藏側邊欄 #Cmd BCtrl B

#總結

########################################################## ##        至此，我們就完成了以空間控制為主線的vscode 旅程囉！勤於思考，享受思考，加油加油###############更多關於VSCode的相關知識，請造訪：###vscode基礎教學###！ ######

以上是帶你了解vscode中的【空間控制】的詳細內容。更多資訊請關注PHP中文網其他相關文章！