Visual Studio Code에서 공백 문자 표시


411

Visual Studio Code에서 공백 문자와 같은 공백 문자를 표시 할 수 있습니까?

거기에 대한 옵션으로 표시되지 않습니다 settings.json(이 글은 옵션입니다하지만 Atom.io ), 나는 문자가 CSS를 사용하여 공백을 표시 할 수 없었다.

답변:


608

VS 코드 1.6.0 이상

에서 언급 한 바와 같이 아래 aloisdg , editor.renderWhitespace복용 열거 중 하나 지금 none, boundaryall. 모든 공백을 보려면

"editor.renderWhitespace": "all", 

VS 코드 1.6.0 이전

1.6.0 이전에는 다음과 같이 설정 editor.renderWhitespace해야했습니다 true.

"editor.renderWhitespace": true

25
Sublime의 "draw_white_space": "selection"옵션 과 같이 선택한 문자에 대해서만이 작업을 수행 할 수 있습니까?
noio

10
@noio 아직은 아니지만 github에 있습니다
revo

그러나 이것은 줄의 시작과 끝에 공백 만 표시합니까?
drzaus

14
@drzaus 는 모든 공백을 표시 할 "editor.renderWhitespace": "boundary"줄의 시작과 끝이됩니다 "deitor.renderWhitespace": "all". @AlexanderGonchiy, 파일> 환경 설정> 사용자 설정 (또는 작업 공간 설정)을 열고 기본 설정 폴더에서 '찾기'를 사용하여 필요한 것을 찾는 것이 유용하다는 것을 알았습니다.
JackChance

1
파일-> 환경 설정-> 설정. '공백'을 검색하십시오. 'Editor : Render Whitespace'아래에 새로운 설정을 선택하는 드롭 다운이 있습니다. (v1.13.2)
CRice

139

메인 메뉴 를 통해서도 가능 합니다 View -> Render Whitespace


2
v 1.36.x에서View -> Render Whitespace
rmsys

1
이것은 나를 위해 공간에서 작동하지 않는 것 같습니다.
이안 스미스

66

업데이트 (2019 년 6 월)

키보드 단축키를 사용하여 공백 문자전환 하려는 경우이를 위해 키 바인딩 을 쉽게 추가 할 수 있습니다 .

최신 버전의 Visual Studio Code에는 사용 가능한 모든 키보드 단축키를보고 편집하기위한 사용자 친화적 인 그래픽 인터페이스 (즉, JSON 데이터를 입력 할 필요가 없음)가 있습니다. 아직 밑에 있어요

파일> 환경 설정> 키보드 단축키 (또는 Ctrl+ K Ctrl+ 사용 S)

원하는 키 바인딩을 신속하게 찾고 필터링하는 데 도움이되는 검색 필드도 있습니다. 이제 새 키 바인딩을 추가하고 기존 키 바인딩을 편집하는 것이 훨씬 쉽습니다.

여기에 이미지 설명을 입력하십시오


공백 문자 토글 에는 기본 키 바인딩이 없으므로 자유롭게 추가하십시오. +관련 줄의 왼쪽에 있는 기호를 누르거나을 누르 거나 Enter해당 줄의 아무 곳이나 두 번 클릭하면 팝업 창에 원하는 조합이 입력됩니다.

그리고 선택한 키 바인딩이 이미 다른 작업에 사용 된 경우 선택한 키 바인딩을 이미 사용하고있는 작업을 클릭하여 확인할 수있는 편리한 경고가 표시됩니다.

여기에 이미지 설명을 입력하십시오

보시다시피 모든 것이 매우 직관적이고 편리합니다.
잘 했어, 마이크로 소프트!


원문 (구) 답변

키보드 단축키를 사용하여 공백 문자전환 하려는 경우 keybindings.json 파일에 사용자 정의 바인딩을 추가 할 수 있습니다 ( 파일> 환경 설정> 키보드 단축키 ).

:

// Place your key bindings in this file to overwrite the defaults
[
    {
        "key": "ctrl+shift+i",
        "command": "editor.action.toggleRenderWhitespace"
    }
]

보이지 않는 문자를 토글하기 위해 Ctrl+ Shift+ 의 조합을 할당했습니다 i. 물론 다른 조합을 선택할 수도 있습니다.


2
내 Visual Studio는 ctrl+e ctrl+s기본적으로 사용 합니다. 이와 같은 콤보 바로 가기의 경우 콤마가 아닌 두 조합 사이에 공백을 넣어야합니다.
t3chb0t

50

Visual Studio Code에서 공백 문자 표시

다음 코드를 추가하여 setting.json을 변경하십시오!

// Place your settings in this file to overwrite default and user settings.
{
    "editor.renderWhitespace": "all"
}

그냥 이렇게!
(PS : "true" 옵션 이 없습니다 ! 심지어 작동합니다.) 여기에 이미지 설명을 입력하십시오


"editor.renderWhitespace": "all"
xgqfrms

29

editor.renderWhitespace : none||boundary||allVSCode에 대한 변경 사항을 보여주기 위해이 스크린 샷을 추가했습니다
여기에 이미지 설명을 입력하십시오.

어디 Tab있습니다 Space입니다.


2
PS 색상 스키마는 변화의 일부가 아닙니다 (이것에 대한 추가 플러그인이 있습니다)
Zack S

1
플러그인은 여기에서 찾을 수 있습니다 : marketplace.visualstudio.com/…
Zack S

16

boolean더 이상 은 아닙니다 . 그들은로 전환했습니다 enum. 이제 우리는 선택할 수 있습니다 : none, boundary,와 all.

// Controls how the editor should render whitespace characters,
// posibilties are 'none', 'boundary', and 'all'.
// The 'boundary' option does not render single spaces between words.
"editor.renderWhitespace": "none",

GitHub 에서 원래 diff를 볼 수 있습니다 .


2
후행 공백 만 표시하도록 후행 공백이라는 확장을 설치할 수도 있습니다.
Stephane

11

* 업데이트 2020년 2월 릴리스 * 참조 https://github.com/microsoft/vscode/issues/90386

v1.43에서는 기본값selection 이 v1.42 에서 none와 같이 변경됩니다 .

"editor.renderWhitespace": "selection"  // default in v1.43

v1.37 업데이트 : 선택한 텍스트 내에서만 공백을 렌더링하는 옵션 추가 v1.37 릴리스 정보, 공백 렌더링을 참조하십시오 .

editor.renderWhitespace설정은 이제 selection옵션을 지원합니다 . 이 옵션을 설정하면 선택한 텍스트에만 공백이 표시됩니다.

"editor.renderWhitespace": "selection"

"workbench.colorCustomizations": {    
  "editorWhitespace.foreground": "#fbff00"
}

선택의 공백 렌더링 데모



이 색상 변경은 대단합니다. 감사합니다.
이안 스미스

당신이 코드 대 조금 덜 존재 확인하려면 # fbff0040는 점은 더 투명하게 유효 할 것이다, 그래서 또한 알파 채널을 허용
relief.melone

6

diff가 공백을 비슷하게 표시하도록 git diff설정 diffEditor.ignoreTrimWhitespace하려면 false 로 설정하십시오 . edit.renderWhitespace조금만 도움이됩니다.

// Controls if the diff editor shows changes in leading or trailing whitespace as diffs
"diffEditor.ignoreTrimWhitespace": false,

설정을 업데이트하려면

파일> 환경 설정> 사용자 설정

Mac 사용자를위한 참고 사항 : 환경 설정 메뉴는 파일이 아닌 코드 아래에 있습니다. 예를 들어, 코드> 환경 설정> 사용자 설정입니다.

제목이 "기본 설정"인 파일이 열립니다. 영역을 확장하십시오 //Editor. 이제이 모든 신비로운 editor.*설정이 어디에 있는지 확인할 수 있습니다. 에 대한 (CTRL + F)를 검색하십시오 renderWhitespace. 내 상자에는 다음이 있습니다.

// Controls how the editor should render whitespace characters, posibilties are 'none', 'boundary', and 'all'. The 'boundary' option does not render single spaces between words.
"editor.renderWhitespace": "none",

혼란을 더하기 위해 왼쪽 창 "기본 설정"은 편집 할 수 없습니다. "settings.json"이라는 제목 의 오른쪽 창을 사용하여 재정의해야합니다 . 붙여 넣기 설정을 "기본 설정"에서 "settings.json"으로 복사 할 수 있습니다.

// Place your settings in this file to overwrite default and user settings.
{
     "editor.renderWhitespace": "all",
     "diffEditor.ignoreTrimWhitespace": false
}

나는 결국 꺼졌다 renderWhitespace.


5

공백을 표시하는 옵션은 이제 Visual Studio Code 버전 1.15.1에서 "렌더 공백을 토글"로보기 메뉴의 옵션으로 나타납니다.


5

F1 버튼을 누른 다음 "렌더 공백 토글"또는 기억할 수있는 부분을 입력하십시오. :)

vscode 버전 1.22.2를 사용하므로 2015 년에는 없었던 기능이 될 수 있습니다.


1
이 작동합니다! 그러나 'boundary'옵션을 건너 뛰고 'all'과 'none'만 전환합니다.
DiegoDD

5
  1. 사용자 환경 설정을여십시오. 키보드 단축키 : CTR + SHIFT + P-> 기본 설정 : 사용자 설정을 엽니 다.

  2. 검색 필드에 공백을 삽입하고 모든 매개 변수를 선택하십시오.여기에 이미지 설명을 입력하십시오


또한 VS Code 1.45 (OSX)의 경우 기본값은 "선택"입니다.
셰인
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.