Paano Baguhin ang Tema sa VS Code

Ginagawa ng Visual Studio Code ang pag-edit at pagsulat ng bagong code sa isang walang problema at nakakatuwang karanasan. Ang default na madilim na tema ng VS Code ay idinisenyo upang maging mas madali sa mga mata kaysa sa isang regular na malupit, puting background na maaaring magdulot ng pagkapagod pagkatapos ng mahabang oras ng trabaho. Ngunit paano kung hindi mo talaga gusto ang mga madilim na kulay sa iyong screen habang nagtatrabaho?

Paano Baguhin ang Tema sa VS Code

Ang pakinabang ng modular na disenyo ng VS Code ay mayroon kang napakalaking kalayaan sa pagpapalit ng orihinal na madilim na tema na may maraming iba't ibang mga pagpipilian sa pagpapasadya na sumasaklaw sa gamut ng kulay ng screen, mga font, at maging ang hitsura ng pinagsamang terminal mismo ng VS Code.

Sasabihin sa iyo ng artikulong ito ang lahat ng kailangan mong malaman tungkol sa pagpapalit ng mga tema sa VS Code.

Paano Baguhin ang Tema sa VS Code

Ang pagpapalit ng pangkalahatang tema sa VS Code ay mabilis at madali. Narito ang kailangan mong gawin:

  1. Buksan ang VS Code.

  2. Piliin ang “File” (“Code” sa macOS), piliin ang “Preferences,” pagkatapos ay piliin ang “Color Theme.”

  3. Ipapakita sa iyo ng VS Code ang isang seleksyon ng mga pre-built na tema na mapagpipilian sa isang dropdown na menu.

  4. Gamitin ang iyong mga cursor key upang i-preview kung ano ang hitsura ng bawat tema nang direkta sa screen.

  5. Pindutin ang "Enter" habang pinipiling piliin ang temang iyon na gagamitin.

Ang pagpapalit ng tema sa ibang paunang na-configure ay maaaring ang unang bagay na gagawin mo kapag binuksan mo ang VS Code sa unang pagkakataon. Maaaring tumagal ng maraming oras ang coding, kaya kapaki-pakinabang na gumamit ng temang komportable ka at hindi nakakasakit sa iyong mga mata habang nagtatrabaho.

Paano Baguhin ang Iyong Tema ng Terminal sa VS Code

Kung gusto mong manatili sa ilang paunang na-configure na opsyon para sa kulay at tema ng terminal, ang proseso ay kapareho ng pagbabago sa pangkalahatang tema. Ang lahat ng pinagsama-samang tema ay may kasamang mga pagpipilian upang baguhin ang hitsura ng iyong terminal, ngunit hindi mo ito maaaring paghiwalayin mula sa iba pang mga bahagi ng tema mismo mula sa pangunahing menu.

Bago gamitin ang mga nabanggit na hakbang upang baguhin ang tema, buksan ang terminal console (Ctrl + Shift + P) upang i-preview ang mga pagbabagong ginawa sa terminal. Ang ilang mga tema ay hindi gumagawa ng anumang mga pagbabago sa terminal, habang ang iba ay maaaring baguhin ito nang husto. Bilang karagdagan, ang paggamit ng isang tema na gusto mo lamang ay hindi mabuti, dahil maaari mong makita ang iyong sarili na gumagamit ng terminal nang higit pa kaysa sa una mong naisip.

Gayunpaman, may ilang mga workaround na magbibigay-daan sa iyong baguhin ang terminal na tema, na tatalakayin namin sa mga seksyon sa ibaba.

Paano Baguhin ang Tema ng Materyal sa VS Code

Ang pangunahing tampok ng VS Code ay ang labis na kapana-panabik na mga extension upang i-customize ang iyong karanasan sa coding at magdala ng higit pang mga functionality sa text editor. Isa sa mga naturang extension ay ang Material Theme, isa sa pinakasikat sa uri nito sa VS Code Marketplace.

Maraming benepisyo ang Material Theme kaysa sa mga paunang na-customize na disenyo, ngunit maaaring makita ng ilang user na kulang ito. Ang manwal ng gumagamit para sa extension na ito ay may kasamang ilang mga tip sa kung paano gumawa ng karagdagang mga pagbabago upang umangkop sa iyong mga pangangailangan. Narito kung paano baguhin ang pangkalahatang tema sa Materyal na Tema:

  1. Buksan ang mabilis na menu (Ctrl + Shift + P).

  2. I-type ang "tema" sa prompt.

  3. Piliin ang “Preferences: Color Theme.”

  4. Pumili ng isa sa mga preset ng Material Theme.

Ang pagtatakda ng kulay ng accent ay magiging bahagi ng pop ng code, na maaaring maging kapaki-pakinabang kung ito ay isang partikular na mahalaga o mahirap na linya upang masuri. Upang magtakda ng kulay ng accent, gamitin ang mga sumusunod na hakbang:

  1. Buksan ang mabilis na menu (Ctrl + Shift + P).

  2. I-type ang "materyal na tema" sa prompt.

  3. Piliin ang "Material na Tema: Itakda ang kulay ng accent."

  4. Piliin ang kulay na gusto mo mula sa listahan.

Sa binagong Tema ng Materyal, maaari kang makakuha ng pag-customize na higit sa karaniwan, at ipapakita namin sa iyo kung paano.

Paano Manu-manong I-customize ang isang Tema sa VS Code

Ang VS Code ay nagbibigay-daan para sa higit pang pagpapasadya kaysa sa simpleng pagbabago sa pagitan ng ilang mga preset. Narito ang dalawang paraan upang i-customize ang tema ayon sa gusto mo.

Paraan 1 – Mag-download ng Custom na Tema

Kapag pinag-uusapan ang tungkol sa pagpapasadya, hindi natin masasabi ang malawak na VS Code Marketplace. Umiiral ang iba't ibang mga extension na nagpapalit lamang ng hitsura ng VS Code nang hindi nakakasagabal sa functionality nito. Narito kung paano mag-download ng tema.

  1. Buksan ang VS Code Marketplace. Maaari mo ring gamitin ang pinagsamang menu na "Mga Extension" sa kaliwa ng screen.

  2. I-type ang "tema" sa search bar upang i-browse lamang ang mga item na nagbabago sa tema. Isa sa aming mga nangungunang rekomendasyon ay ang Materyal na Tema na binanggit sa itaas, ngunit sigurado kaming makakahanap ka ng isa na pinakaangkop sa iyo.

  3. I-download ang extension (kung gumagamit ng browser) pagkatapos ay i-install ang .VSIX file sa pamamagitan ng pagpunta sa “Mga Extension > icon ng ellipsis > I-install mula sa VSIX.” Bilang kahalili, kapag nakita mo ang tema na gusto mo sa VS Code, i-click ito, pagkatapos ay piliin ang pindutang "I-install" sa mga detalye (kanan) na menu.

  4. Kapag na-install at na-enable na ang tema, piliin ito gamit ang command na "Preferences: Color Theme".

Paraan 2 – Pag-edit ng Tema

Ang lahat ng mga tema at setting ay naka-imbak sa VS Code gamit ang plaintext. Sundin ang mga hakbang upang ma-access ang mga setting na ito at gawin ang mga pagbabagong gusto mo:

  1. Gumawa ng workbench o file ng mga setting ng user. Ang una ay babaguhin lamang ang hitsura ng kasalukuyang proyekto, ngunit ang huli ay mananatili sa mga bagong proyekto.
  2. I-type ang command na “Preferences: Open Settings” sa main menu.

  3. Piliin ang tab sa kaliwang itaas upang pumili sa pagitan ng mga setting ng user at workbench.

  4. Pindutin ang “Edit in settings.json” para buksan ang file na naglalaman ng mga setting na kailangan mong baguhin.

  5. Hanapin ang setting na pinangalanang "workbench.colorCustomizations."

  6. Tumutok sa pagbabago ng tema na gusto mo sa pamamagitan ng paglalagay

“[Theme_name]”: { }

Ang Theme_name ay ang pangalan ng tema na gusto mong baguhin. Panatilihin ang mga quote.

  1. Ang mga karagdagang pagbabago sa tema ay ginawa sa mga bagong bracket. I-type ang pangalan ng parameter na gusto mong baguhin (sa mga quote), i-type ang ':' pagkatapos ay piliin ang naaangkop na setting na kailangan mo.
  2. Gamitin ang gabay na ito upang mahanap ang mga parameter na gusto mong baguhin.
  3. Ang mga kulay ay nakaimbak sa hexadecimal code. Gumamit ng color hexadecimal guide para matukoy ang kulay na gusto mo.

  4. Kapag tapos ka na sa mga pagbabago, i-save ang file.

Maaaring gamitin ang paraang ito upang baguhin ang karamihan sa hitsura ng UI at code, kabilang ang kulay ng pangunahing tema, mga background, hitsura ng terminal, mga kulay ng button, at mga estilo ng font.

Kung iniisip mo kung paano baguhin ang font sa VS code, gamitin ang paraan 2 na nakabalangkas sa itaas. Malamang na kailangan mo ng gabay sa font.

Karagdagang FAQ

Saan Nakaimbak ang Mga Tema ng VS Code?

Ang mga tema na nagmumula sa mga extension ay nakaimbak sa folder ng mga extension ng VS Code. Ang lokasyong ito ay nasa iyong direktoryo ng pag-install (halimbawa C:) at kadalasang matatagpuan dito:

~/.vscode/extension

Dito, ang "~" ay ang direktoryo ng pag-install para sa VS Code.

Ang mga pangunahing tema ay naka-imbak sa: Microsoft VS Code\resources\app\extensions\theme-defaults\themes

Gayunpaman, hindi mo kailangang gumugol ng oras sa paghahanap ng mga file na babaguhin. Ang pagbabago sa mga setting ng user sa pamamagitan ng "settings.json" na file ay maghahatid ng mas mabilis na mga resulta.

Paano Ko Babaguhin ang Kulay ng Komento sa VS Code?

Upang baguhin ang mga kulay ng komento, buksan ang "settings.json" na file (gamitin ang "Paraan 2" na nakabalangkas sa itaas), piliin ang tema na gusto mong baguhin, pagkatapos ay i-input (na may mga quote):

“mga komento” : “#hexcode”

Dito, ang "hexcode" ay ang code para sa nais na kulay. Gumamit ng color picker para pumili ng angkop na kulay.

Ano ang Pinakamagandang Tema sa VS Code?

Ang pinakamahusay na tema ng VS Code ay ang pinakakasiya-siya at kapaki-pakinabang para sa iyong mga pagsisikap sa programming. Ang iba't ibang mga user ay maaaring magkaroon ng natatanging kulay at mga kagustuhan sa tema. Sa kabutihang palad, mayroong maraming mga pagpipilian na mapagpipilian, maging sa mga paunang na-configure na tema, mga pag-download ng extension, o sa kakayahang mag-customize ng isang tema nang eksakto sa iyong gusto.

Piliin ang Iyong Tema

Sa mga tagubiling ito, maaari mong ganap na i-customize ang isang tema ayon sa gusto mo. Sa dami ng mga opsyon nito, ang VS Code ay nananatiling isa sa pinakasikat na text editor, at ang kakayahang makakuha ng mga bagong feature na may mga extension ay ginagawa itong halos kapareho sa isang IDE.

Anong mga tema ang ginagamit mo sa VS Code? Nakagawa ka na ba ng anumang mga pagbabago sa iyong gustong tema? Ipaalam sa amin sa seksyon ng mga komento sa ibaba.