msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'main'
${ noResults }
Web-Dev-For-Beginners/translations/tl/8-code-editor/1-using-a-code-editor/README.md

11 KiB
Raw Permalink Blame History

Paggamit ng Code Editor

Tatalakayin sa araling ito ang mga pangunahing kaalaman sa paggamit ng VSCode.dev, isang web-based na code editor, upang makagawa ka ng mga pagbabago sa iyong code at makapag-ambag sa isang proyekto nang hindi kinakailangang mag-install ng kahit ano sa iyong computer.

Mga Layunin sa Pagkatuto

Sa araling ito, matututunan mo kung paano:

  • Gumamit ng code editor sa isang proyekto ng code
  • Subaybayan ang mga pagbabago gamit ang version control
  • I-customize ang editor para sa pag-develop

Mga Kinakailangan

Bago magsimula, kailangan mong gumawa ng account sa GitHub. Pumunta sa GitHub at gumawa ng account kung wala ka pa.

Panimula

Ang code editor ay isang mahalagang kasangkapan sa pagsusulat ng mga programa at pakikipagtulungan sa mga umiiral na coding project. Kapag naintindihan mo ang mga pangunahing kaalaman ng isang editor at kung paano gamitin ang mga tampok nito, magagamit mo ito sa pagsusulat ng code.

Pagsisimula sa VSCode.dev

Ang VSCode.dev ay isang code editor na nasa web. Hindi mo kailangang mag-install ng kahit ano upang magamit ito, katulad ng pagbubukas ng ibang website. Upang magsimula, buksan ang sumusunod na link: https://vscode.dev. Kung hindi ka naka-sign in sa GitHub, sundin ang mga prompt upang mag-sign in o gumawa ng bagong account at pagkatapos ay mag-sign in.

Kapag nag-load na ito, dapat itong magmukhang katulad ng larawang ito:

Default VSCode.dev

May tatlong pangunahing bahagi, mula kaliwa hanggang kanan:

  1. Ang activity bar na may kasamang ilang icon, tulad ng magnifying glass 🔎, gear ⚙️, at iba pa.
  2. Ang pinalawak na activity bar na default sa Explorer, na tinatawag na side bar.
  3. At ang code area sa kanan.

I-click ang bawat icon upang ipakita ang iba't ibang menu. Kapag tapos na, i-click ang Explorer upang bumalik sa simula.

Kapag nagsimula kang gumawa o magbago ng code, mangyayari ito sa pinakamalaking bahagi sa kanan. Gagamitin mo rin ang bahaging ito upang makita ang umiiral na code, na gagawin mo sa susunod.

Pagbukas ng GitHub Repository

Ang unang kailangan mong gawin ay buksan ang isang GitHub repository. May iba't ibang paraan upang buksan ang repository. Sa seksyong ito, makikita mo ang dalawang paraan upang buksan ang repository at makapagsimula sa paggawa ng mga pagbabago.

1. Gamit ang Editor

Gamitin ang editor mismo upang buksan ang isang remote repository. Kung pupunta ka sa VSCode.dev, makikita mo ang button na "Open Remote Repository":

Open remote repository

Maaari mo ring gamitin ang command palette. Ang command palette ay isang input box kung saan maaari kang mag-type ng anumang salita na bahagi ng isang command o aksyon upang mahanap ang tamang command na isasagawa. Gamitin ang menu sa kaliwang-itaas, pagkatapos ay piliin ang View, at pagkatapos ay piliin ang Command Palette, o gamitin ang sumusunod na keyboard shortcut: Ctrl-Shift-P (sa MacOS, Command-Shift-P).

Palette Menu

Kapag nagbukas ang menu, i-type ang open remote repository, at pagkatapos ay piliin ang unang opsyon. Lalabas ang mga repository na bahagi ka o kamakailan mong binuksan. Maaari mo ring gamitin ang buong URL ng GitHub upang pumili ng isa. Gamitin ang sumusunod na URL at i-paste ito sa kahon:

https://github.com/microsoft/Web-Dev-For-Beginners

✅ Kapag matagumpay, makikita mo ang lahat ng file para sa repository na ito na naka-load sa text editor.

2. Gamit ang URL

Maaari mo ring gamitin ang isang URL nang direkta upang i-load ang repository. Halimbawa, ang buong URL para sa kasalukuyang repo ay https://github.com/microsoft/Web-Dev-For-Beginners, ngunit maaari mong palitan ang domain ng GitHub ng VSCode.dev/github at direktang i-load ang repository. Ang magiging URL ay https://vscode.dev/github/microsoft/Web-Dev-For-Beginners.

Pag-edit ng mga File

Kapag nabuksan mo na ang repository sa browser/vscode.dev, ang susunod na hakbang ay gumawa ng mga update o pagbabago sa proyekto.

1. Gumawa ng Bagong File

Maaari kang gumawa ng file sa loob ng umiiral na folder o sa root directory/folder. Upang gumawa ng bagong file, buksan ang lokasyon/directory kung saan mo gustong i-save ang file at piliin ang icon na 'New file ...' sa activity bar (kaliwa), bigyan ito ng pangalan at pindutin ang enter.

Create a new file

2. I-edit at I-save ang File sa Repository

Ang paggamit ng vscode.dev ay kapaki-pakinabang kung nais mong gumawa ng mabilisang update sa iyong proyekto nang hindi kinakailangang mag-load ng anumang software sa lokal.

Upang i-update ang iyong code, i-click ang 'Explorer' icon, na matatagpuan din sa activity bar, upang makita ang mga file at folder sa repository. Piliin ang isang file upang buksan ito sa code area, gawin ang iyong mga pagbabago, at i-save.

Edit a file

Kapag tapos ka nang mag-update ng iyong proyekto, piliin ang source control icon na naglalaman ng lahat ng bagong pagbabago na ginawa mo sa iyong repository.

Upang makita ang mga pagbabago na ginawa mo sa iyong proyekto, piliin ang file(s) sa Changes folder sa pinalawak na activity bar. Magbubukas ito ng 'Working Tree' upang makita mo ang mga pagbabago sa file. Ang pula ay nagpapakita ng tinanggal, habang ang berde ay nagpapahiwatig ng idinagdag.

View changes

Kung nasiyahan ka sa mga pagbabago, i-hover ang Changes folder at i-click ang + button upang i-stage ang mga pagbabago. Ang staging ay nangangahulugang paghahanda ng iyong mga pagbabago upang i-commit ang mga ito sa GitHub.

Kung hindi ka komportable sa ilang pagbabago at nais mong i-discard ang mga ito, i-hover ang Changes folder at piliin ang undo icon.

Pagkatapos, mag-type ng commit message (Isang paglalarawan ng pagbabago na ginawa mo sa proyekto), i-click ang check icon upang i-commit at i-push ang iyong mga pagbabago.

Kapag tapos ka na sa iyong proyekto, piliin ang hamburger menu icon sa kaliwang-itaas upang bumalik sa repository sa github.com.

Stage & commit changes

Paggamit ng Extensions

Ang pag-install ng extensions sa VSCode ay nagbibigay-daan sa iyo na magdagdag ng mga bagong tampok at mga opsyon sa customized na development environment sa iyong editor upang mapabuti ang iyong workflow. Ang mga extension na ito ay tumutulong din sa iyo na magdagdag ng suporta para sa maraming programming language at karaniwang generic o language-based na extension.

Upang mag-browse sa listahan ng lahat ng available na extension, i-click ang Extensions icon sa activity bar at simulang i-type ang pangalan ng extension sa text field na may label na 'Search Extensions in Marketplace'.

Makikita mo ang listahan ng mga extension, bawat isa ay naglalaman ng pangalan ng extension, pangalan ng publisher, isang pangungusap na paglalarawan, bilang ng downloads, at star rating.

Extension details

Maaari mo ring tingnan ang lahat ng na-install na extension sa pamamagitan ng pag-expand ng Installed folder, mga sikat na extension na ginagamit ng karamihan ng mga developer sa Popular folder, at mga inirerekomendang extension para sa iyo batay sa mga user sa parehong workspace o sa mga kamakailang binuksang file sa recommended folder.

View extensions

1. Mag-install ng Extensions

Upang mag-install ng extension, i-type ang pangalan ng extension sa search field at i-click ito upang makita ang karagdagang impormasyon tungkol sa extension sa code area kapag lumitaw ito sa pinalawak na activity bar.

Maaari mong i-click ang blue install button sa pinalawak na activity bar upang i-install o gamitin ang install button na lumalabas sa code area kapag pinili mo ang extension upang mag-load ng karagdagang impormasyon.

Install extensions

2. I-customize ang Extensions

Pagkatapos mag-install ng extension, maaaring kailanganin mong baguhin ang pag-uugali nito at i-customize ito batay sa iyong mga kagustuhan. Upang gawin ito, piliin ang Extensions icon, at sa pagkakataong ito, lalabas ang iyong extension sa Installed folder, i-click ang Gear icon at mag-navigate sa Extensions Setting.

Modify extension settings

3. Pamahalaan ang Extensions

Pagkatapos mag-install at gumamit ng extension, nag-aalok ang vscode.dev ng mga opsyon upang pamahalaan ang iyong extension batay sa iba't ibang pangangailangan. Halimbawa, maaari mong piliing:

  • I-disable: (Pansamantalang i-disable ang extension kapag hindi mo ito kailangan ngunit ayaw mo itong ganap na i-uninstall)

    Piliin ang na-install na extension sa pinalawak na activity bar > i-click ang Gear icon > piliin ang 'Disable' o 'Disable (Workspace)' O Buksan ang extension sa code area at i-click ang blue Disable button.

  • I-uninstall: Piliin ang na-install na extension sa pinalawak na activity bar > i-click ang Gear icon > piliin ang 'Uninstall' O Buksan ang extension sa code area at i-click ang blue Uninstall button.

Takdang-Aralin

Maglikha ng resume website gamit ang vscode.dev

Review at Pag-aaral sa Sarili

Magbasa pa tungkol sa VSCode.dev at iba pang mga tampok nito.

Paunawa:
Ang dokumentong ito ay isinalin gamit ang AI translation service na Co-op Translator. Bagama't sinisikap naming maging tumpak, tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na maaaring magmula sa paggamit ng pagsasaling ito.