แสดงอักขระช่องว่างใน Visual Studio Code


411

เป็นไปได้หรือไม่ที่จะแสดงอักขระช่องว่างเช่นอักขระเว้นวรรคใน Visual Studio Code

ดูเหมือนจะไม่มีตัวเลือกสำหรับในsettings.json(แม้ว่าจะเป็นตัวเลือกในAtom.io ) และฉันไม่สามารถแสดงอักขระช่องว่างโดยใช้ CSS ได้

คำตอบ:


608

VS Code 1.6.0 และมากกว่า

ดังกล่าวโดยaloisdg ด้านล่าง , editor.renderWhitespaceคือตอนนี้ enum การอย่างใดอย่างหนึ่งnone, หรือboundary allวิธีดูช่องว่างทั้งหมด:

"editor.renderWhitespace": "all", 

ก่อน VS Code 1.6.0

ก่อน 1.6.0 คุณต้องตั้งค่าeditor.renderWhitespaceเป็นtrue:

"editor.renderWhitespace": true

25
มีวิธีการทำเช่นนี้เฉพาะสำหรับตัวละครที่เลือกเช่น"draw_white_space": "selection"ตัวเลือกของ Sublime ?
noio

10
@noio ยังไม่ได้ แต่มันมาถึงgithub
revo

แต่นี่จะแสดงช่องว่างที่จุดเริ่มต้นและจุดสิ้นสุดเท่านั้น
drzaus

14
@drzaus "editor.renderWhitespace": "boundary"จะเป็นจุดเริ่มต้นและจุดสิ้นสุดของบรรทัดที่"deitor.renderWhitespace": "all"จะแสดงช่องว่างทั้งหมด @AlexanderGonchiy ฉันพบว่ามีประโยชน์ในการเปิดไฟล์> การตั้งค่า> การตั้งค่าผู้ใช้ (หรือการตั้งค่าพื้นที่ทำงาน) และใช้ 'ค้นหา' ในโฟลเดอร์การตั้งค่าเริ่มต้นเพื่อค้นหาสิ่งที่ฉันต้องการ
JackChance

1
ไฟล์ -> การตั้งค่า -> การตั้งค่า ค้นหา 'ช่องว่าง' ภายใต้ 'ตัวแก้ไข: การแสดงพื้นที่ว่าง' มีรายการแบบเลื่อนลงเพื่อเลือกการตั้งค่าใหม่ (v1.13.2)
CRice


66

ปรับปรุง (มิถุนายน 2562)

สำหรับผู้ที่ยินดีที่จะสลับช่องว่างตัวอักษรโดยใช้แป้นพิมพ์ลัดคุณสามารถเพิ่มปุ่มลัดสำหรับการที่

ใน Visual Studio Code รุ่นล่าสุดขณะนี้มีส่วนต่อประสานกราฟิกที่ใช้งานง่าย (ไม่จำเป็นต้องพิมพ์ข้อมูล JSON เป็นต้น) สำหรับการดูและแก้ไขแป้นพิมพ์ลัดที่มีทั้งหมด มันยังอยู่ภายใต้

ไฟล์> ค่ากำหนด> แป้นพิมพ์ลัด (หรือใช้Ctrl+ K Ctrl+ S)

นอกจากนี้ยังมีช่องค้นหาเพื่อช่วยในการค้นหา (และตัวกรอง) ปุ่มลัดที่ต้องการอย่างรวดเร็ว ดังนั้นตอนนี้ทั้งการเพิ่มใหม่และการแก้ไขการโยงคีย์ที่มีอยู่นั้นง่ายขึ้นมาก:

ป้อนคำอธิบายรูปภาพที่นี่


การสลับอักขระ whitespaceไม่มีการโยงคีย์ดีฟอลต์ดังนั้นโปรดเพิ่มหนึ่งรายการ เพียงกด+เครื่องหมายที่ด้านซ้ายของบรรทัดที่เกี่ยวข้อง (หรือกดEnterหรือคลิกสองครั้งที่ใดก็ได้ในบรรทัดนั้น) และป้อนชุดค่าผสมที่ต้องการในหน้าต่างป๊อปอัป

และหากการผูกกุญแจที่คุณเลือกได้ถูกนำไปใช้กับการกระทำอื่นแล้วจะมีคำเตือนที่สะดวกซึ่งคุณสามารถคลิกและสังเกตว่าการกระทำใดที่ใช้การโยงพวงกุญแจที่คุณเลือก:

ป้อนคำอธิบายรูปภาพที่นี่

อย่างที่คุณเห็นทุกอย่างง่ายและสะดวกมาก
เก่งมาก Microsoft!


คำตอบเดิม (เก่า)

สำหรับผู้ที่ต้องการสลับอักขระช่องว่างโดยใช้แป้นพิมพ์ลัดคุณสามารถเพิ่มการโยงแบบกำหนดเองไปยังไฟล์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
My Visual Studio ใช้ctrl+e ctrl+sตามค่าเริ่มต้น สำหรับช็อตคัทคอมโบทางลัดอย่างนี้คุณต้องเว้นช่องว่างระหว่างสองแบบผสมไม่ใช่คอมม่า
t3chb0t

50

แสดงอักขระช่องว่างใน Visual Studio Code

เปลี่ยนการตั้งค่า json โดยเพิ่มรหัสต่อไปนี้!

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

แบบนี้!
(PS: ไม่มีตัวเลือก"ของจริง" ! แม้มันจะยังใช้งานได้) ป้อนคำอธิบายรูปภาพที่นี่


"editor.renderWhitespace": "all"
xgqfrms

29

เพียงเพื่อแสดงให้เห็นถึงการเปลี่ยนแปลงที่editor.renderWhitespace : none||boundary||allจะทำเพื่อคุณ VSCode
ป้อนคำอธิบายรูปภาพที่นี่ฉันเพิ่มภาพหน้าจอนี้:

ที่ไหนTabมีและSpaceเป็น.


2
คีสี PS ไม่เป็นส่วนหนึ่งของการเปลี่ยนแปลง (ฉันมีปลั๊กอินเสริมสำหรับการนี้)
แซค S

1
สามารถพบปลั๊กอินได้ที่นี่ : arket.visualstudio.com/ …
Zack S

16

มันไม่ได้เป็นbooleanอีกต่อไป enumพวกเขาเปลี่ยนไปยัง ตอนนี้เราสามารถเลือกระหว่าง: none, และboundaryall

// 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",

ท่านสามารถเข้าดู diff เดิมบนGitHub


2
นอกจากนี้ยังเป็นไปได้ที่จะติดตั้งส่วนขยายที่เรียกว่า Trailing Spaces เพื่อแสดงเฉพาะส่วนต่อท้าย
Stephane

11

* อัพเดทกุมภาพันธ์ 2020 เปิดตัว *ดูhttps://github.com/microsoft/vscode/issues/90386

ใน v1.43 ค่าเริ่มต้นจะเปลี่ยนเป็นselectionจากnoneเดิมใน v1.42

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

อัปเดตสำหรับ v1.37: การเพิ่มตัวเลือกในการแสดงพื้นที่ว่างภายในข้อความที่เลือกเท่านั้น ดูv1.37 บันทึกปล่อยทำให้ช่องว่าง

editor.renderWhitespaceการตั้งค่าในขณะนี้สนับสนุนselectionตัวเลือก ด้วยชุดตัวเลือกนี้ช่องว่างจะปรากฏเฉพาะกับข้อความที่เลือก:

"editor.renderWhitespace": "selection"

และ

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

การสาธิตการสร้างการแสดงผลในพื้นที่ว่าง



การเปลี่ยนสีนี้ยอดเยี่ยมมากขอบคุณ
Ian Smith

หากคุณต้องการทำให้มันน้อยกว่ารหัส vs ปัจจุบันก็ยอมรับช่องอัลฟาดังนั้น # fbff0040 จะถูกต้องทำให้จุดนั้นโปร่งใสมากขึ้น
relief.melone

6

เพื่อให้ได้ความแตกต่างในการแสดงช่องว่างคล้ายกับการgit diffตั้งค่าdiffEditor.ignoreTrimWhitespaceเป็นเท็จ 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

ตัวเลือกในการทำให้ช่องว่างสามารถมองเห็นได้ในขณะนี้ปรากฏเป็นตัวเลือกในเมนูมุมมองเป็น "Toggle Render Whitespace" ในเวอร์ชั่น 1.15.1 ของ Visual Studio Code


5

กดปุ่ม F1 จากนั้นพิมพ์ "Toggle Render Whitespace" หรือส่วนต่าง ๆ ที่คุณจำได้ :)

ฉันใช้ vscode เวอร์ชั่น 1.22.2 ดังนั้นนี่อาจเป็นฟีเจอร์ที่ไม่มีในปี 2558


1
ใช้งานได้! แต่จะสลับระหว่าง 'ทั้งหมด' และ 'ไม่มี' เท่านั้นโดยข้ามตัวเลือก 'ขอบเขต'
DiegoDD

5
  1. เปิดการตั้งค่าผู้ใช้ แป้นพิมพ์ลัด: CTR + SHIFT + P-> การตั้งค่า: เปิดการตั้งค่าผู้ใช้;

  2. แทรกในช่องค้นหาช่องว่างและเลือกพารามิเตอร์ ทั้งหมดป้อนคำอธิบายรูปภาพที่นี่


นอกจากนี้สำหรับ VS Code 1.45 (บน OSX) ค่าเริ่มต้นคือ "selection"
เชน
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.