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

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

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

มันสามารถทำได้ผ่านเมนูหลัก View -> Render Whitespace

ปรับปรุง (มิถุนายน 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เพื่อสลับอักขระที่มองไม่เห็นคุณอาจเลือกชุดค่าผสมอื่นได้

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

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

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

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

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

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

มันไม่ได้เป็น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

* อัพเดทกุมภาพันธ์ 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"
}

เพื่อให้ได้ความแตกต่างในการแสดงช่องว่างคล้ายกับการ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ฉันสิ้นสุดขึ้นปิด

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

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

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

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

2. แทรกในช่องค้นหาช่องว่างและเลือกพารามิเตอร์ ทั้งหมด