집 > 기사 > 개발 도구 > vscode의 [공간 제어]를 이해하도록 안내합니다.

vscode의 [공간 제어]를 이해하도록 안내합니다.

青灯夜游앞으로: 2022-11-15 19:59:251929검색

vscode의 세계에 오신 것을 환영합니다. 이 글의 목표는 vscode의 [공간 제어]에 대한 몇 가지 디자인 개념을 대중화하는 것입니다. 공간은 제한되어 있지만 정보는 무제한입니다. 페이지의 레이아웃 및 레이아웃과 관련하여 vscode는 실제로 애플리케이션이며 인터페이스 공간도 다양한 영역으로 구성되어 있습니다. 그들은 어떻게 함께 일합니까? [추천 학습: "vscode tutorial"]

이 글의 주요 내용은 팁이라고 할 수 있지만 저는 워낙 게으른 사람이라 암기하는 것을 좋아하지 않습니다. 기억해야 할 내용 사이를 연결하고 논리를 사용하여 연결하는 것은 말로 표현할 수 없는 즐거움을 줍니다. 이 메모리 방법은 많은 산업에 적합하지 않을 수 있지만 컴퓨터 분야에서는 제가 사용하는 방법입니다. 개인적으로 적극 추천하는 이유는 매우 간단합니다. 컴퓨터는 완전히 사람이 만든 세상이기 때문입니다!

디자이너의 생각을 이해할 수 있으면 많은 것의 디자인이 논리적이 되고, 이렇게 사용하지 않으면 어색하게 느껴질 것이라는 뜻입니다. 또 다른 잠재적인 이점은 우리가 그 좋은 사람들처럼 생각하게 된다는 점입니다. 이는 매우 중요합니다.

말을 많이 했으니 본론으로 들어가죠!

vscode 영역 개요

위 그림을 예로 들면 우리가 공통적으로 사용하는 영역과 해당 기능은 대략 다음과 같습니다

작업 디렉터리: 현재 처리 중인 프로젝트의 디렉터리 정보
명령 패널: 명령을 통해 유발되는 vscode의 해당 동작을 지원하는 패널 제공
편집 영역: 편집 그룹 등의 개념으로 현재 프로젝트의 내용을 변경하는 영역
터미널 영역: vscode 명령에서 터미널을 직접 실행할 수 있도록 터미널 영역을 포함시키는 방법을 제공합니다. win defaultspower shell는 bash로 구성할 수 있습니다

이 핵심 영역의 존재를 알고 다음으로 하나씩 분석을 시작합니다

편집 영역

편집기 영역은 우리의 직접 제어 프로젝트의 입구이기 때문에 실제로 일반적인 파일 작업 설계 개념은 주로 커서 작업을 기사에서 공유했습니다. 커서 조작, 자세한 내용은 다루지 않겠습니다. 관심 있는 친구들은 살펴보세요. ;

이 글에서는 공간 할당이 기본적으로 표시되는 영역이며 가장 큰 영역을 차지합니다. 이 공간을 처리하기 위한 주요 요구 사항은 다음과 같습니다.

여러 파일 해당 콘텐츠를 동시에 보는 방법

첫 번째 질문은 다음을 통해 얻을 수 있습니다. 두 번째 질문에 대한 일종의 단축키, vscode에서는 편집기 그룹의 개념이 제안되었으며 편집 영역은 서로 독립적으로 최대 5개의 블록 영역으로 나눌 수 있습니다.

커서 작업 기사를 읽어보셨다면 제가 커서 설정을 이해하기 위해 [세분성] 관점을 사용한다는 사실을 아실 것입니다. 실제로 공간 제어도 이 관점에서 어떻게 수행하는지 이해할 수 있습니다. 질문을 통해 이해하겠습니다

편집 영역에서 열려 있는 여러 파일 간 전환 방법: 단축키

먼저 기본 단축키 설정을 살펴보겠습니다.

명령 macwin 현재 열려 있는 파일 목록에서 ctrl + tab ctrl + tab 을 선택하면 현재 파일의 다음 파일로 전환됩니다. | 이전 편집기 열기 cmd + option + ←ctrl + option + ←현재 파일의 이전 항목으로 전환 | 다음 편집기 열기cmd + option + →ctrl + option + →

현재 열려 있는 파일 목록에서

을 선택하면 현재 파일의 이전/다음 파일로 전환됩니다.

명령 실행

실제로 명령을 사용하여 실행할 수도 있습니다.

Mac에서 동일한 유형의 명령에 대해 생각해 봅시다. 왜 [목록에서 선택]이 ctrl 키이고, [현재 파일에서 이전/다음으로 전환]이 cmd 키; 사실 중요한 점은 Mac 시스템 자체에는 전체 화면 창을 전환하는 데 사용되는 단축키 cmd + 화살표 키도 있다는 것입니다. ctrl键，而【切换为当前文件中的上/下一个】是cmd键；其实关键就是在 mac 中系统本身也存在快捷键cmd + 方向键，作用是全屏窗口的切换；

这样就好理解啦，系统最大，理解了这一层之后，我们可以开动脑筋了，能不能利用上一篇中说的【自定义快捷键】让他们统一呢？

当然可以，我们就加个设定：如果和系统键冲突的，我们就加个options键；以这个【切换为当前文件中的上/下一个】为例，我们依然沿用ctrl，只不过为了避免冲突，改为ctrl + options键

自定义之后逻辑可以理解为，编辑器内的文件颗粒度是 ctrl，如ctrl + ←是切换视窗，那么切换打开文件就只能是ctrl + option + ←；cmd + 0是Focus into side Bar | 聚焦于侧边栏，那切换编辑器组方向就只能是cmd + option + 0；

命令	mac	win
在当前打开文件列表中选择	ctrl + tab	ctrl + tab
切换为当前文件中的下一个 \| Open Previous Editor	cmd + option + ← （自定义了 ctrl + option + ← ）
切换为当前文件中的上一个 \| Open Next Editor	cmd + option + →（自定义了 ctrl + option + → ）

编辑区之多文件如何同时看到相应内容：编辑器组

对于编辑器区域这么一大块内容，要想同时看到多个处理文件，那就拆分呗，这就引出了编辑器组的概念，其实就是分区而治，功能完全一样，直接看案例就好

对于编辑器组空间的把握，同样一句话，编辑器组颗粒度是cmd 이렇게 이해하면 쉽습니다. 시스템이 가장 크다는 것을 이해하세요. 한 레이어를 지나면 우리의 두뇌를 사용할 수 있습니다. 이전 기사에서 언급한 [사용자 정의 단축키]를 사용하여 통합할 수 있습니까?

물론 설정을 추가합니다. 시스템 키와 충돌하는 경우 `옵션` 키를 추가합니다. 예를 들어 [현재 파일에서 이전/다음으로 전환]을 사용합니다. 우리는 여전히 `ctrl`을 사용하지만 충돌을 피하기 위해 `ctrl + 옵션` 키로 변경했습니다. 사용자 정의 후 논리는 다음과 같이 이해할 수 있습니다.

파일 세분성 편집기에서는 ctrl입니다. ctrl + ←가 창을 전환하는 경우 열린 파일로 전환하려면 ctrl + option + ←만 가능합니다. 는 사이드 바에 포커스 | 사이드 바에 포커스인 경우 편집기 그룹 방향을 전환하는 유일한 방법은 cmd + option + 0입니다. commandmac win 현재 파일의 다음 명령으로 전환하려면 ctrl + tab ctrl + tab 을 선택하세요. | 이전 편집기 열기 cmd + 옵션 + ← ( 사용자 정의 ctrl + option + ← )
현재 파일의 이전 항목으로 전환 | 다음 편집기 열기cmd + option + → (사용자 정의 ctrl + option + → )

편집 영역에서 여러 파일의 해당 내용을 동시에 보는 방법 : 에디터 그룹

에디터 영역에 이렇게 큰 콘텐츠가 있을 때, 여러 개의 처리된 파일을 동시에 보고 싶다면 이를 분할해 놓는 것이 에디터의 개념으로 이어집니다. 실제로는 파티션인 group

과 치료 기능은 똑같으니 사례만 보시면 됩니다

편집기 그룹 세분성은 cmdCommands

편집자 그룹 공간 파악을 위해 같은 문장에서	이고, 해당 명령 개요는 다음과 같습니다.
mac	win

분할 편집기

Cmd +

Ctrl +

분할 전환 | 편집기 그룹에서 현재 편집기 전환

Cmd + [그룹 수]Ctrl + [그룹 수]Flip Editor 그룹 레이아웃 | 세로/가로 편집기 레이아웃 전환Cmd + Option + 0 Shift + Alt + 0 스위치

🎜Command🎜🎜mac🎜🎜win🎜🎜🎜🎜🎜🎜스플릿 스위치 | 그룹 🎜🎜Cmd + [번호 of groups]🎜🎜Ctrl + [그룹 수]🎜🎜 🎜 🎜🎜🎜🎜🎜🎜편집기 그룹 방향 전환🎜🎜🎜편집기 그룹 간의 기본 편집기 레이아웃은 가로입니다🎜🎜🎜🎜🎜Command🎜🎜mac🎜 🎜승리 🎜🎜🎜🎜🎜🎜Flip 편집기 그룹 레이아웃 | 세로/가로 편집기 레이아웃 전환 🎜🎜Cmd + Option + 0🎜🎜Shift + Alt + 0🎜🎜🎜🎜

편집자 그룹은 파일을 제어합니다

편집자 그룹 자체의 지원 기능은 알고 있지만, 세분화하면 편집자 그룹의 파일 지원은 어떨까요? 편집기 그룹 내의 파일 단위는 cmd + ctrlcmd + ctrl

命令	mac	win
Move Editor into Previous Group \| 将当前文件移动到上一个编辑器	cmd + ctrl + ←	ctrl + tab
Move Editor into Next Group \| 将当前文件移动到下一个编辑器	cmd + ctrl + ←

切换当前处理文件

命令	mac	win
在当前打开文件列表中选择	ctrl + tab	ctrl + tab
切换为当前文件中的下一个 \| Open Previous Editor	cmd + option + ← （自定义了 ctrl + option + ← ）
切换为当前文件中的上一个 \| Open Next Editor	cmd + option + →（自定义了 ctrl + option + → ）

移动当前文件至编辑器中的左右编辑组项

命令	mac	win
Move Editor into Previous Group \| 将当前文件移动到上一个编辑器	cmd + ctrl + ←	ctrl + tab
Move Editor into Next Group \| 将当前文件移动到下一个编辑器	cmd + ctrl + ←

命令面板区域

命令面板其实就是一个输入框，采用的是一种策略模式，行为根据前置标识符作为分类。

vscode 设定了符号的概念，意为变量、函数、调用等的集合。

其实可以大致分为两类，特殊标识和特殊字符，这样区分会容易记忆。

命令划分：特殊标识

特殊标识	对应策略	快捷键 for Mac	快捷键 for win
空	根据文件名进行模糊查询	cmd + p
?	获取有关可进行的操作的帮助
执行命令		cmd + shift + p
[filename?]:[rowIndex]	定位行号（不指定文件名那就是当前打开的文件）	ctrl + g	ctrl + g
@[:?]	模糊查询当前文件符号，不填默认展示所有（如果加上:会分类展示）	Cmd + Shift + O	Ctrl + Shift + O
#	模糊查询当前打开的文件列表中的符号，不填默认为空	cmd + T

命令划分：特殊字符

特殊字符需要加个空格才会触发对应策略，有这样的设定也很简单，如果不加空格，直接就匹配上之前的【文件名】查找策略了

特殊字符 \| 源单词	对应策略
edt [active?] \| edit	显示所有已经打开的文件，加`active`则只会显示当前活动组中的文件
ext [install?] \| extension	获取有关可进行的操作的帮助，加`install`

ctrl + tabcmd + ctrl + ←

현재 처리 중인 파일 전환

Command mac th > win

이전 그룹으로 편집기 이동 | 현재 파일을 이전 편집기로 이동 cmd + ctrl + ←

이동 Editor into Next Group | 현재 파일을 다음 Editor로 이동

현재 열려 있는 파일 목록에서 ctrl + tab

명령	mac	win

🎜ctrl + tab 🎜🎜🎜🎜 선택 | 현재 파일의 다음 항목으로 전환 | 이전 편집기 열기 🎜🎜cmd + option + ← (맞춤형 ctrl + option + ← ) 🎜🎜
🎜🎜🎜🎜현재 파일에서 이전 항목으로 전환 | 다음 편집기 열기🎜🎜cmd + 옵션 + → (맞춤형 Ctrl + 옵션 + → )🎜🎜
🎜🎜 🎜🎜🎜🎜

🎜현재 파일을 편집기의 왼쪽 및 오른쪽 편집 그룹 항목으로 이동🎜

🎜🎜🎜이전 그룹으로 편집기 이동 | 현재 파일을 이전 편집기로 이동🎜🎜cmd + ctrl + ←🎜🎜ctrl + tab🎜 🎜🎜🎜다음 그룹으로 편집기 이동 | 현재 파일을 다음 편집기로 이동🎜🎜cmd + ctrl + ←🎜🎜
🎜🎜🎜🎜🎜

🎜

🎜🎜명령 패널 영역🎜🎜 🎜🎜The 명령 패널은 실제로 전략 모드를 사용하는 입력 상자이며 동작은 접두사가 붙은 식별자에 따라 분류됩니다. 🎜🎜vscode는 변수, 함수, 호출 등의 집합을 의미하는 기호의 개념을 설정합니다. 🎜🎜🎜🎜 사실은 크게 구분할 수 있습니다. 특수 로고와 특수 문자의 두 가지 범주로 구분하면 기억하기가 더 쉽습니다. 🎜

🎜사령부: 특수 식별🎜

명령	mac	win

🎜🎜🎜empty🎜🎜파일 이름을 기반으로 한 퍼지 쿼리🎜🎜cmd + p🎜🎜
🎜🎜🎜🎜?🎜🎜할 수 있는 작업에 대한 도움 받기🎜🎜
🎜🎜
🎜🎜🎜

특수 식별 해당 전략 Mac용 단축키 win용 단축키

명령 실행🎜🎜 cmd + Shift + p🎜🎜
🎜🎜🎜🎜[filename?]:[rowIndex]🎜🎜줄 번호 찾기(파일 이름을 지정하지 않으면 현재 열려 있는 파일입니다)🎜🎜ctrl + g🎜🎜ctrl + g # 🎜🎜현재 열려 있는 파일 목록의 기호에 대한 퍼지 쿼리입니다. 채워지지 않으면 기본값은 비어 있습니다🎜🎜cmd + T🎜🎜
🎜🎜🎜🎜

🎜명령어 구분: 특수 문자🎜

🎜특수 문자는 해당 전략을 실행하기 위해 공백을 추가해야 합니다. 이러한 설정은 공백을 추가하지 않으면 매우 간단합니다. 이전 [파일 이름] 검색 전략과 직접 일치합니다🎜🎜🎜🎜edt [active?] | edit🎜 🎜열린 모든 파일 표시, 현재 활성 그룹의 파일만 표시하려면 active 추가🎜🎜🎜🎜ext [install?] | Extension🎜🎜가능한 작업에 대한 도움말 보기, 추가 install을 추가하면 명령 패널에서 플러그인을 검색하고 설치할 수 있습니다🎜🎜🎜🎜task🎜🎜작업 수행🎜🎜🎜🎜debug🎜🎜디버깅 수행🎜🎜🎜 🎜term | 터미널🎜🎜터미널 인스턴스 생성 및 관리 🎜🎜🎜🎜view🎜🎜VS Code의 각 UI 구성 요소 열기🎜🎜🎜🎜

확장 피드

실제로는 vscode에 검색 기능을 정리하는 세트가 있는데 공간 제약으로 인해 다음 글에서는 짧은 글(도구 글) 형태로 나올 예정입니다.

터미널 영역

이 더 이해하기 쉽고 실제로는 일부 명령입니다

특수 문자	해당 전략

command	mac	win
evoke 터미널 \| 토글 터미널	ctrl + float	ct rl + float
깨어난 상태에서 새 터미널 만들기 \| 새 통합 터미널 만들기	ctrl + Shift + Gone	ctrl + Gone
터미널에 집중 \| 패널에 집중	cmd + 3으로 맞춤화
다음 터미널에 초점 맞추기	cmd + Shift +로 맞춤화 →
이전 터미널에 초점 맞추기	cmd + Shift +로 사용자 정의 ←