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

歡迎來到 vscode 的世界，本文目標為科普 vscode 中關(guān)于【空間控制】的一些設(shè)計理念，空間是有限的，而信息是無限的，就像是我們寫頁面要考慮版心、考慮空間的擺放，vscode 其實也就是一個應(yīng)用，那它的界面空間也是有限的，這些中間由各個區(qū)域搭建起來，那這些區(qū)域是什么？又是如何協(xié)同工作的呢？【推薦學(xué)習(xí)：《vscode教程》】

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

這就意味著，如果能理解設(shè)計者的思路，很多東西的設(shè)計就變得順理成章，不這么用都覺得別扭。另一個潛在的好處是，我們會漸漸像那些優(yōu)秀的人一樣思考，這很關(guān)鍵。

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

vscode 區(qū)域總覽

? ? ? ? 以上圖為例，我們常見并且常用的區(qū)域及對應(yīng)功能大致如下

• 工作目錄：當前處理項目的目錄信息

• 命令面板：提供支持通過命令喚起 vscode 對應(yīng)動作的面板

• 編輯區(qū)：更改當前項目內(nèi)容的區(qū)域，存在編輯組等概念

• 終端區(qū)：提供內(nèi)嵌終端區(qū)域的方式實現(xiàn)在 vscode 中直接執(zhí)行終端命令，win 默認power shell；可配置為 bash

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

編輯區(qū)域

? ? ? ? 編輯器區(qū)域是最最關(guān)鍵的一塊區(qū)域，因為它是我們直接控制項目的入口，正常的文件操作設(shè)計理念其實主要是對光標的操作，這個在vscode教程一文中已經(jīng)分享過，就不贅述了，有興趣的小伙伴可以去看一下；

? ? ? ? 本文關(guān)心點在于空間的分配，編輯區(qū)是默認展示而且占用面積最大的一塊區(qū)域，對于這塊空間的處理，主要存在如下訴求

• 多個打開的文件間如何切換
• 多文件如何同時看到相應(yīng)內(nèi)容

? ? ? ? 對于第一個問題，可以通過一類快捷鍵實現(xiàn)；而對于第二個問題，在 vscode 中提出了編輯器組的概念，編輯區(qū)可以被劃分成至多五塊區(qū)域，相互獨立。

? ? ? ? 如果閱讀過vscode教程一文，會知道我是采用【顆粒度】的角度進行理解光標設(shè)定的，空間控制其實也可以從這個角度進行理解，具體怎么做，我們通過問題進行理解

編輯區(qū)之多個打開的文件間如何切換：快捷鍵

? ? ? ? 我們先來看下默認的快捷鍵設(shè)定

在當前打開文件列表中選擇

切換為當前文件中的上/下一個

命令執(zhí)行

其實也是可以用命令去執(zhí)行的

? ? ? ? 我們思考下，在 mac 中同類型的命令，為什么【在列表中選擇】是ctrl鍵，而【切換為當前文件中的上/下一個】是cmd鍵；其實關(guān)鍵就是在 mac 中系統(tǒng)本身也存在快捷鍵cmd + 方向鍵，作用是全屏窗口的切換；

? ? ? ? 這樣就好理解啦，系統(tǒng)最大，理解了這一層之后，我們可以開動腦筋了，能不能利用上一篇中說的【自定義快捷鍵】讓他們統(tǒng)一呢？

? ? ? ? 當然可以，我們就加個設(shè)定：如果和系統(tǒng)鍵沖突的，我們就加個options鍵；以這個【切換為當前文件中的上/下一個】為例，我們依然沿用ctrl，只不過為了避免沖突，改為ctrl + options鍵

? ? ? ? 自定義之后邏輯可以理解為，編輯器內(nèi)的文件顆粒度是 ctrl，如ctrl + ←是切換視窗，那么切換打開文件就只能是ctrl + option + ←；cmd + 0是Focus into side Bar | 聚焦于側(cè)邊欄，那切換編輯器組方向就只能是cmd + option + 0；

編輯區(qū)之多文件如何同時看到相應(yīng)內(nèi)容：編輯器組

? ? ? ? 對于編輯器區(qū)域這么一大塊內(nèi)容，要想同時看到多個處理文件，那就拆分唄，這就引出了編輯器組的概念，其實就是分區(qū)而治，功能完全一樣，直接看案例就好

? ? ? ? 對于編輯器組空間的把握，同樣一句話，編輯器組顆粒度是cmd，對應(yīng)命令總覽如下；

命令總覽

切換

切換編輯器組方向

默認編輯器組間的編輯器排布是橫向

編輯器組管控文件

? ? ? ? 我們知道了編輯器組本身的支持功能，那顆粒度更細一點，編輯器組對文件的支持呢？編輯器組內(nèi)的文件顆粒度是cmd + ctrl

切換當前處理文件

移動當前文件至編輯器中的左右編輯組項

命令面板區(qū)域

命令面板其實就是一個輸入框，采用的是一種策略模式，行為根據(jù)前置標識符作為分類。

vscode 設(shè)定了符號的概念，意為變量、函數(shù)、調(diào)用等的集合。

? ? ? ? 其實可以大致分為兩類，特殊標識和特殊字符，這樣區(qū)分會容易記憶。

命令劃分：特殊標識

命令劃分：特殊字符

特殊字符需要加個空格才會觸發(fā)對應(yīng)策略，有這樣的設(shè)定也很簡單，如果不加空格，直接就匹配上之前的【文件名】查找策略了

擴展提要

? ? ? ? 基于命令面板，其實還有一套關(guān)于在 vscode 中對搜索功能的梳理，限于篇幅，將會在下一篇文章中以短文（工具文）的形式出現(xiàn)

終端區(qū)域

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

喚起終端

已喚起狀態(tài)下新建終端

聚焦于終端

聚焦于上/下一終端

側(cè)邊欄區(qū)域

? ? ? ? 側(cè)邊欄只關(guān)心一個很常用的關(guān)鍵快捷鍵即可，即展示/隱藏側(cè)邊欄

總結(jié)

? ? ? ? 至此，我們就完成了以空間控制為主線的 vscode 之旅啦！勤于思考，享受思考，加油加油

更多關(guān)于VSCode的相關(guān)知識，請訪問：vscode教程！

以上就是帶你了解