Pag-customize ng iyong VS Code

Visual Studio Code
Customization
Code Editor Themes
Pag-customize ng iyong VS Code cover image

Panimula

Ang Visual Studio Code (VS Code) ay isa sa mga pinakasikat na editor ng code sa industriya ng tech, dahil nag-aalok ito ng mga magagaling na feature at magaan na disenyo na ginawa itong code editor na pinili para sa mga developer sa buong mundo. Ang kasikatan nito ay maaaring maiugnay, sa bahagi, sa nako-customize na hitsura nito, na nagbibigay-daan sa amin na lumikha ng magarbong at kapansin-pansing mga puwang sa pag-coding. Sa artikulong ito, tutuklasin namin kung paano i-customize ang hitsura ng iyong vs code para sa iyong mga kagustuhan, kabilang ang mga tema ng editor ng code, mga tema ng icon, at mga pagbabago sa kulay ng toolbar.

Mga Tema ng Icon

Kahit na ang mga default na icon ng Visual Studio Code ay maayos, bakit limitahan ang iyong sarili sa kanila kapag maaari kang magkaroon ng isang visual na kapistahan? Maaari mong baguhin ang hitsura ng iyong file explorer gamit ang mga tema ng icon, na nagpapahusay sa parehong visual appeal at kakayahang magamit nito.

Ang isa sa mga pinakasikat na pagpipilian sa mga developer ay ang extension ng Material Icon Theme. Sa extension na ito, ang iyong file explorer ay magkakaroon ng makulay at maayos na koleksyon ng mga icon, na na-modelo ayon sa Material Design ng Google. Ang bawat uri ng file ay may sariling natatanging icon at agad na makikilala, na ginagawang mas maganda ang hitsura ng iyong workspace sa pangkalahatan.

Upang i-install ang extension ng Material Icon Theme, sundin ang mga hakbang na ito:

  1. Buksan ang Visual Studio Code.

  2. Pumunta sa view ng Mga Extension sa pamamagitan ng pag-click sa icon ng Mga Extension sa toolbar sa kaliwang bahagi ng window.

  3. Maghanap para sa "Material Icon Theme" at i-click ang i-install.

Pagkatapos ng pag-install, i-click ang icon na gear sa kaliwang sulok sa ibaba at piliin ang "File Icon Theme" para piliin ang Material Icon Theme.

Mga Tema ng Code Editor

Ngayon na mukhang maganda ang iyong file explorer, tumuon tayo sa mismong code editor. Bagama't maganda ang default na light at dark na tema ng VS Code, may mga pagkakataong gusto mo ng mas personalized at naka-istilo.

Ang isang magandang opsyon bilang tema, lalo na para sa mga mas gustong mag-code sa dilim, ay ang extension ng tema ng Night Owl. Ang Night Owl, na nilikha na may contrast at readability sa isip, ay may calming color scheme na nakakatulong na mapawi ang eye strain sa mga pinahabang coding session.

Upang i-install ang extension ng tema ng Night Owl:

Mag-navigate sa view ng Mga Extension.

Hanapin ang "Night Owl" at i-click ang i-install.

Pagkatapos ng pag-install, piliin ang Night Owl bilang iyong tema sa pamamagitan ng pagbubukas ng Command Palette (Ctrl+Shift+P sa Windows/Linux, Cmd+Shift+P sa macOS), pagpili sa "Color Theme," at pagpili ng Night Owl mula sa listahan ng mga naka-install na tema sa iyong code editor.

Kulay ng Toolbar

Ngayong perpekto na ang hitsura at pakiramdam ng iyong code editor, i-customize natin ang kulay ng toolbar para ilagay ang icing sa itaas. Dito pumapasok ang peacock extension.

Salamat sa extension ng Peacock, maaari mong i-customize ang iyong workspace sa pamamagitan ng pagpapalit ng kulay ng toolbar sa gilid ng iyong code editor. Hindi lang ito aesthetically kasiya-siya, ngunit kung marami kang pagkakataon ng VS Code na bukas, maaari rin itong makatulong sa pagtulong sa iyong makilala sa pagitan nila.

Upang i-install ang extension ng Peacock:

  1. Pumunta sa view ng Mga Extension.

  2. Hanapin ang "Peacock" at i-click ang i-install.

Pagkatapos ng pag-install, maaari mong i-customize ang kulay ng toolbar sa pamamagitan ng pagbubukas ng command palette, paghahanap ng “Peacock: Enter a color,” at pagkatapos ay ilagay ang hex value ng kulay na gusto mong itakda para sa iyong vs code toolbar.

Konklusyon

Ang pagpapasadya ng Visual Studio code ay higit pa sa pagpapalit ng mga kulay. Kailangan mo ring lumikha ng coding environment na tumutugma sa iyong istilo at nagpapataas ng pagiging produktibo. Kaya huwag mag-atubiling maglaro sa paligid at lumikha ng isang coding area na nagpapasigla sa iyong imahinasyon sa mga tuntunin ng hitsura pati na rin ang paggalugad ng iba pang magarbong tampok ng kamangha-manghang VS Code. Maligayang coding!


Career Services background pattern

Mga Serbisyo sa Karera

Contact Section background image

Manatiling nakikipag-ugnayan tayo

Code Labs Academy © 2024 Lahat ng karapatan ay nakalaan.