Tampilkan karakter spasi putih dalam Visual Studio Code


411

Apakah mungkin untuk menampilkan karakter spasi, seperti karakter spasi, di Visual Studio Code?

Tampaknya tidak ada opsi untuk itu di settings.json(meskipun itu adalah opsi di Atom.io ), dan saya belum dapat menampilkan karakter spasi menggunakan CSS.

Jawaban:


608

Kode VS 1.6.0 dan Lebih Besar

Seperti yang disebutkan oleh aloisdg di bawah ini , editor.renderWhitespacesekarang adalah enum none, boundaryatau all. Untuk melihat semua spasi putih:

"editor.renderWhitespace": "all", 

Sebelum VS Code 1.6.0

Sebelum 1.6.0, Anda harus mengatur editor.renderWhitespaceke true:

"editor.renderWhitespace": true

25
Apakah ada cara untuk melakukan ini hanya untuk karakter yang dipilih, seperti "draw_white_space": "selection"opsi Sublime ?
noio

10
@no Belum, tapi sedang menuju github
revo

Tapi ini hanya menunjukkan spasi putih di awal dan akhir baris?
drzaus

14
@drzaus, "editor.renderWhitespace": "boundary"akan menjadi awal dan akhir baris di mana "deitor.renderWhitespace": "all"akan menampilkan semua spasi putih. @AlexanderGonchiy, saya merasa berguna untuk membuka file> preferensi> pengaturan pengguna (atau pengaturan ruang kerja) dan menggunakan 'temukan' di folder pengaturan default untuk mencari apa yang saya butuhkan.
JackChance

1
File -> Preferensi -> Pengaturan. Cari 'ruang kosong'. Di bawah 'Editor: Render Whitespace' ada dropdown untuk memilih pengaturan baru Anda. (v1.13.2)
CRice

139

Itu juga bisa dilakukan melalui menu utama View -> Render Whitespace


2
Dalam v 1.36.xView -> Render Whitespace
rmsys

1
Ini sepertinya tidak berfungsi untuk ruang bagi saya.
Ian Smith

67

UPDATE (Juni 2019)

Bagi mereka yang ingin beralih karakter spasi putih menggunakan pintasan keyboard, Anda dapat dengan mudah menambahkan pengikat tombol untuk itu.

Dalam versi terbaru dari Visual Studio Code sekarang ada antarmuka grafis yang mudah digunakan (yaitu tidak perlu mengetik data JSON dll) untuk melihat dan mengedit semua pintasan keyboard yang tersedia. Masih di bawah

File> Preferensi> Pintasan Keyboard (atau gunakan Ctrl+ K Ctrl+ S)

Ada juga bidang pencarian untuk membantu menemukan (dan memfilter) keybindings yang diinginkan dengan cepat. Jadi sekarang menambahkan baru dan mengedit ikatan kunci yang ada jauh lebih mudah:

masukkan deskripsi gambar di sini


Mengganti karakter spasi putih tidak memiliki pengikatan tombol standar, jadi jangan ragu untuk menambahkannya. Cukup tekan +tanda di sisi kiri garis terkait (atau tekanEnter , atau klik dua kali di mana saja pada baris itu) dan masukkan kombinasi yang diinginkan di jendela sembulan.

Dan jika penjilidan kunci yang Anda pilih sudah digunakan untuk beberapa tindakan lain, akan ada peringatan yang nyaman yang dapat Anda klik dan amati tindakan apa yang sudah menggunakan penjilidan kunci yang Anda pilih:

masukkan deskripsi gambar di sini

Seperti yang Anda lihat, semuanya sangat intuitif dan nyaman.
Kerja bagus, Microsoft!


Jawaban asli (lama)

Bagi mereka yang ingin beralih karakter spasi putih menggunakan pintasan keyboard , Anda dapat menambahkan pengikatan kustom ke file keybindings.json ( File> Preferensi> Pintasan Keyboard ).

Contoh :

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

Di sini saya telah menetapkan kombinasi Ctrl+ Shift+ iuntuk mengganti karakter yang tidak terlihat, Anda tentu saja dapat memilih kombinasi lain.


2
Visual Studio saya gunakan ctrl+e ctrl+ssecara default. Untuk pintasan kombo seperti ini, Anda perlu memberi spasi di antara kedua kombinasi, bukan koma.
t3chb0t

50

Tampilkan karakter spasi putih dalam Visual Studio Code

ubah setting.json, dengan menambahkan kode berikut!

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

seperti ini!
(PS: tidak ada pilihan "benar" !, Bahkan juga berfungsi.) masukkan deskripsi gambar di sini


"editor.renderWhitespace": "all"
xgqfrms

29

Hanya untuk menunjukkan perubahan yang editor.renderWhitespace : none||boundary||allakan lakukan untuk Anda VSCode saya menambahkan screenshot ini:
masukkan deskripsi gambar di sini.

Mana Tabyang →dan Spaceyang.


2
Skema warna PS bukan bagian dari perubahan (saya punya plugin tambahan untuk ini)
Zack S

1
Plugin dapat ditemukan di sini: marketplace.visualstudio.com/...
Zack S

16

Itu bukan booleanlagi. Mereka beralih ke enum. Sekarang kita dapat memilih antara: none, boundary, dan 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",

Anda dapat melihat perbedaan asli pada GitHub .


2
Dimungkinkan juga untuk menginstal ekstensi yang disebut Trailing Spaces untuk hanya menampilkan yang tertinggal.
Stephane

11

* Perbarui Rilis Februari 2020 * lihat https://github.com/microsoft/vscode/issues/90386

Di v1.43 nilai default akan berubahselection dari noneseperti di v1.42.

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

Pembaruan untuk v1.37: menambahkan opsi untuk merender spasi putih hanya dalam teks yang dipilih. Lihat v1.37 catatan rilis, render spasi putih .

The editor.renderWhitespacepengaturan sekarang mendukung selectionpilihan. Dengan opsi ini disetel, spasi putih hanya akan ditampilkan pada teks yang dipilih:

"editor.renderWhitespace": "selection"

dan

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

demo spasi putih render dalam seleksi



perubahan warna ini luar biasa, terima kasih.
Ian Smith

Jika Anda ingin membuatnya sedikit kurang hadir vs kode juga menerima saluran alpha sehingga # fbff0040 juga akan berlaku membuat titik-titik lebih transparan
relief.melone

6

Untuk mendapatkan diff untuk menampilkan spasi sama dengan git diffset diffEditor.ignoreTrimWhitespaceke false. edit.renderWhitespacehanya sedikit membantu.

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

Untuk memperbarui pengaturan, buka

File> Preferensi> Pengaturan Pengguna

Catatan untuk pengguna Mac: Menu Preferensi berada di bawah Kode bukan File. Misalnya, Kode> Preferensi> Pengaturan Pengguna.

Ini membuka file berjudul "Pengaturan Default". Perluas area //Editor. Sekarang Anda dapat melihat di mana semua editor.*pengaturan misterius ini berada. Cari (CTRL + F) untuk renderWhitespace. Di kotak saya, saya punya:

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

Untuk menambah kebingungan, jendela kiri "Pengaturan Default" tidak dapat diedit. Anda harus menimpanya menggunakan jendela kanan berjudul "settings.json". Anda dapat menyalin pengaturan tempel dari "Pengaturan Default" ke "settings.json":

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

Saya akhirnya mematikan renderWhitespace.


5

Pilihan untuk membuat spasi putih terlihat sekarang muncul sebagai opsi pada menu Lihat, sebagai "Toggle Render Whitespace" dalam versi 1.15.1 dari Visual Studio Code.


5

Tekan tombol F1, lalu ketik "Toggle Render Whitespace" atau bagian yang dapat Anda ingat :)

Saya menggunakan vscode versi 1.22.2 sehingga ini bisa menjadi fitur yang tidak ada pada tahun 2015.


1
ini bekerja! Tapi itu hanya beralih antara 'semua' dan 'tidak ada', melewatkan opsi 'batas'.
DiegoDD

5
  1. Buka preferensi Pengguna. Pintasan Keyboard: CTR + SHIFT + P-> Preferensi: Buka Pengaturan Pengguna;

  2. Masukkan bidang pencarian Whitespace , dan pilih semua parameter masukkan deskripsi gambar di sini


Juga, untuk VS Code 1.45 (pada OSX), standarnya adalah "seleksi".
Shane
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.