Cara Menonaktifkan Scroll Horizontal pada Visual Studio Code

Secara default, VS Code memiliki fitur untuk membuat kode editor kita bisa discroll secara horizontal. Hal ini akan kerasa ketika kita menggunakan HTML atau menggunakan class Tailwind yang bisa membuat kode menjadi cukup panjang.  Ini cukup membuat frustasi, apalagi bila kita ingin melihat keseluruhan kode kita. Misalnya seperti ini :

Untuk bisa menonaktifkan  horizontal scroll pada VS Code sebenarnya cukup mudah, yaitu dengan :

📜 Menonaktifkan Horizontal Scroll di Visual Studio Code dengan Mengaktifkan Word Wrap

Setting untuk User (Global)

Klik Menu File > Preferences > Settings dan tuliskan “word wrap” di Search settings .

atau

Klik Menu Code > Preferences > Settings dan tuliskan “word wrap” di Search settings .

Menu Setting User

Lalu pada Editor: Word Wrap pilih on

Hasilnya :

Scroll Horizontal Menghilang

Scroll horizontal menghilang, akibatnya kode yang semula memanjang kesebelah kanan, akan jadi terpotong-potong / Word Wrap ke garis kedua dan seterusnya. Hal ini memudahkan kita untuk membaca kode kode yang panjang.


📝Take a Note :

Kalau temen temen menggunakan Git Lens, maka Word Wrap tersebut memang benar akan bisa digunakan, namun perlu menambahkan untuk mendisable Git Lens di line tersebut. Caranya dengan menambahkan "gitlens.currentLine.scrollable": false pada setting.json di VS Code.

  • Tekan Command + P  
  • Ketikkan >setting
  • Pilih Settings(JSON)
  • Pada baris bawah sendiri tambahkan "gitlens.currentLine.scrollable": false
Ketikkan >Setting pada Kolom Pencarian
Tambahkan gitlens current line

Voila.!! Scroll Horizontal menghilang secara 100%.  Semoga membantu!

Referensi :

How to Enable Word Wrap to Disable Horizontal Scrolling in VS Code
Find out how to disable horizontal scrolling in VS Code by enabling word wrap for all files or per single file!
-
GitLens line info causes horizontal scroll in editor · Issue #290 · gitkraken/vscode-gitlens
Just filed an issue with VSCode and want you to be aware as well: microsoft/vscode#43940 With the default settings, Gitlens draws text at the end of the current line showing git blame info. This ca...