Chào mọi người, nếu bạn đang cảm thấy màn hình vscode của mình thật nhạt nhẽo và đơn điệu, bạn cần có sự mới lạ để tăng hứng thú code. Vậy bạn nên xem bài viết này, hôm nay mình sẽ hướng dẫn cho các bạn cách để có 1 hình nền vscode thật đẹp theo sở thích. Let’s gooo  1. Cài đặt extensionĐầu tiên, các bạn hãy tìm và cài extension background vào vscode Sau khi cài xong, bạn hãy restart lại VSCode, lúc này background đã được apply, mặc định nó sẽ sử dụng hình default của extension, lúc này vscode của bạn sẽ có dạng như: Trông cũng khá dễ thương phải không anh em. Ngoài ra, sau khi cài extension, mỗi lần mở lên VSCode sẽ nó 1 thông báo ở góc dưới bên phải, mọi người có thể bấm vào để ngăn nó hiện lên lần sau 2. Mục Tùy chỉnh BackgroundCách 1: Bạn vào extension, chọn settings –> extension settings để mở cửa sổ cài đặt extension Cách 2: Bạn cũng có thể tùy chỉnh bằng cách mở file settings.json, trong MacOS thì mình bấm tổ hợp Command + Shift + P rồi chọn “Open User Settings (JSON)“, hoặc bấm vào “Edit in settings.json” ở màn hình trong cách 1 Ở đây, bạn có thể thêm tùy chỉnh nhiều thứ hơn với các cú pháp tương tự như CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <span class\="token string"\>"background.fullscreen"</span\><span class\="token punctuation"\>:</span\> <span class\="token punctuation"\>{</span\> <span class\="token string"\>"image"</span\><span class\="token punctuation"\>:</span\> <span class\="token string"\>""</span\><span class\="token punctuation"\>,</span\> <span class\="token string"\>"opacity"</span\><span class\="token punctuation"\>:</span\> <span class\="token number"\>0.91</span\><span class\="token punctuation"\>,</span\> <span class\="token string"\>"size"</span\><span class\="token punctuation"\>:</span\> <span class\="token string"\>"cover"</span\><span class\="token punctuation"\>,</span\> <span class\="token string"\>"position"</span\><span class\="token punctuation"\>:</span\> <span class\="token string"\>"center"</span\><span class\="token punctuation"\>,</span\> <span class\="token string"\>"interval"</span\><span class\="token punctuation"\>:</span\> <span class\="token number"\>0</span\> <span class\="token punctuation"\>}</span\><span class\="token punctuation"\>,</span\> <span class\="token string"\>"background.style"</span\><span class\="token punctuation"\>:</span\> <span class\="token punctuation"\>{</span\> <span class\="token string"\>"content"</span\><span class\="token punctuation"\>:</span\> <span class\="token string"\>"''"</span\><span class\="token punctuation"\>,</span\> <span class\="token string"\>"pointer-events"</span\><span class\="token punctuation"\>:</span\> <span class\="token string"\>"none"</span\><span class\="token punctuation"\>,</span\> <span class\="token string"\>"position"</span\><span class\="token punctuation"\>:</span\> <span class\="token string"\>"absolute"</span\><span class\="token punctuation"\>,</span\> <span class\="token string"\>"z-index"</span\><span class\="token punctuation"\>:</span\> <span class\="token string"\>"9999"</span\><span class\="token punctuation"\>,</span\> <span class\="token string"\>"width"</span\><span class\="token punctuation"\>:</span\> <span class\="token string"\>"100%"</span\><span class\="token punctuation"\>,</span\> <span class\="token string"\>"height"</span\><span class\="token punctuation"\>:</span\> <span class\="token string"\>"100%"</span\><span class\="token punctuation"\>,</span\> <span class\="token string"\>"background-position"</span\><span class\="token punctuation"\>:</span\> <span class\="token string"\>"100% 100%"</span\><span class\="token punctuation"\>,</span\> <span class\="token string"\>"background-repeat"</span\><span class\="token punctuation"\>:</span\> <span class\="token string"\>"no-repeat"</span\><span class\="token punctuation"\>,</span\> <span class\="token string"\>"opacity"</span\><span class\="token punctuation"\>:</span\> <span class\="token number"\>1</span\> <span class\="token punctuation"\>}</span\><span class\="token punctuation"\>,</span\> 3. Ví dụ về thay đổi hình theo ý muốnVí dụ ở đây mình muốn thêm 1 cái hình của mình, thì chúng ta thêm dòng sau: <span class\="token string"\>"background.customImages"</span\><span class\="token punctuation"\>:</span\> <span class\="token punctuation"\>[</span\> <span class\="token string"\>"/Users/ngoc/Documents/image/1001157.jpeg"</span\><span class\="token punctuation"\>,</span\> <span class\="token punctuation"\>]</span\><span class\="token punctuation"\>,</span\> <span class\="token string"\>"background.useDefault"</span\><span class\="token punctuation"\>:</span\> <span class\="token boolean"\>false</span\><span class\="token punctuation"\>,</span\> <span class\="token string"\>"background.useFront"</span\><span class\="token punctuation"\>:</span\> <span class\="token boolean"\>false</span\> Trong đó:
Sau đó mình restart lại VScode, và có kết quả như này: Trông nó hơi bị rối và khó đọc code nhỉ, thêm vào đó là tấm hình chưa được nằm ở giữa. Bây giờ mình sẽ chỉnh lại như sau:
<span class\="token string"\>"background.style"</span\><span class\="token punctuation"\>:</span\> <span class\="token punctuation"\>{</span\> <span class\="token string"\>"opacity"</span\><span class\="token punctuation"\>:</span\> <span class\="token number"\>0.2</span\><span class\="token punctuation"\>,</span\> <span class\="token string"\>"background-position"</span\><span class\="token punctuation"\>:</span\> <span class\="token string"\>"center"</span\><span class\="token punctuation"\>,</span\> <span class\="token punctuation"\>}</span\> Sau đó thực hiện restart VSCode, và thưởng thức thành quả nhé KếtTrên đây là hướng dẫn của mình về việc thay đổi nền của VSCode, giúp tăng hứng thú khi code, anh em nếu thấy hay thì cho mình xin 1 upvote nhé, nếu có vấn đề gì trong quá trình cài đặt, thì comment cho mình biết nhé. Thanks |
