History

leestott 60c0efd8e9 🌐 Update translations via Co-op Translator		3 weeks ago
..
README.md	🌐 Update translations via Co-op Translator	3 weeks ago
assignment.md	🌐 Update translations via Co-op Translator	3 weeks ago

README.md

Paggamit ng code editor

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

Mga Layunin sa Pagkatuto

Sa araling ito, matututuhan mo kung paano:

Gumamit ng code editor sa isang code project
Subaybayan ang mga pagbabago gamit ang version control
I-customize ang editor para sa development

Mga Kinakailangan

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

Panimula

Ang code editor ay isang mahalagang kasangkapan para sa pagsusulat ng mga programa at pakikipagtulungan sa mga umiiral na coding project. Kapag naunawaan mo na 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 anuman 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 ganito:

May tatlong pangunahing bahagi, mula kaliwa papunta sa kanan:

Ang activity bar na may kasamang ilang icon, tulad ng magnifying glass 🔎, gear ⚙️, at iba pa
Ang pinalawak na activity bar na default sa Explorer, na tinatawag na side bar
At sa wakas, 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 isang 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":

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).

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 ng repository na ito na naka-load sa text editor.

2. Gamit ang URL

Maaari mo ring gamitin ang isang URL upang direktang 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/direktoryo 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.

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

Ang paggamit ng vscode.dev ay kapaki-pakinabang kapag gusto mong mabilis na mag-update ng iyong proyekto nang hindi kinakailangang mag-load ng software sa lokal na makina.
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.

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 nang biswal ang mga pagbabago sa file. Ang pula ay nagpapakita ng tinanggal, habang ang berde ay nagpapahiwatig ng idinagdag.

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

Kung hindi ka komportable sa ilang pagbabago at gusto 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.

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 pagdagdag ng suporta para sa iba't ibang programming languages at maaaring generic o language-based.

Upang mag-browse sa listahan ng lahat ng available na extensions, 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 maikling paglalarawan, bilang ng downloads, at star rating.

Maaari mo ring makita ang lahat ng na-install na extension sa pamamagitan ng pag-expand ng Installed folder, mga popular na extension sa Popular folder, at mga inirerekomendang extension para sa iyo batay sa mga user sa parehong workspace o sa mga kamakailan mong binuksang file sa recommended folder.

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 dito 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 lilitaw sa code area kapag pinili mo ang extension upang mag-load ng karagdagang impormasyon.

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, ang iyong extension ay lilitaw sa Installed folder, i-click ang Gear icon at mag-navigate sa Extensions Setting.

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 piliin na:

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

Pagsusuri at Pag-aaral sa Sarili

Basahin pa ang tungkol sa VSCode.dev at ang 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.