*** # கோட் எடிட்டர் பயன்படுத்துவது: [VSCode.dev](https://vscode.dev) கற்றல் **வரவேற்கிறோம்!** இந்த பாடம் உங்களை [VSCode.dev](https://vscode.dev)—இந்த சக்திவாய்ந்த, வலை அடிப்படையிலான கோட் எடிட்டரை அடிப்படையிலிருந்து மேம்பட்ட பயன்பாட்டிற்கு அழைத்துச் செல்கிறது. நீங்கள் எந்த நிறுவலுமின்றி உலாவியில் இருந்து நேரடியாக கோடுகளை திருத்துவது, திட்டங்களை நிர்வகிப்பது, மாற்றங்களை கண்காணிப்பது, நீட்சிகளை நிறுவுவது மற்றும் தொழில்முறை போல ஒத்துழைப்பது போன்றவற்றை நம்பிக்கையுடன் கற்றுக்கொள்வீர்கள். *** ## கற்றல் நோக்கங்கள் இந்த பாடத்தின் முடிவில், நீங்கள்: - எந்த திட்டத்திலும், எங்கிருந்தும் திறம்பட ஒரு கோட் எடிட்டரைப் பயன்படுத்த முடியும் - உள்ளமைக்கப்பட்ட பதிப்பு கட்டுப்பாட்டுடன் உங்கள் பணியை எளிதாக கண்காணிக்க முடியும் - எடிட்டர் தனிப்பயனாக்கங்கள் மற்றும் நீட்சிகளுடன் உங்கள் மேம்பாட்டு பணியை மேம்படுத்த முடியும் *** ## முன் தேவைகள் தொடங்க, **ஒரு இலவச [GitHub](https://github.com) கணக்கிற்கு பதிவு செய்யுங்கள்**, இது உங்களுக்கு கோட் ரெப்போசிடரிகளை நிர்வகிக்கவும், உலகளாவிய அளவில் ஒத்துழைக்கவும் உதவும். உங்களிடம் கணக்கு இல்லையெனில், [இங்கே உருவாக்கவும்](https://github.com/). *** ## ஏன் ஒரு வலை அடிப்படையிலான கோட் எடிட்டரை பயன்படுத்த வேண்டும்? **கோட் எடிட்டர்** போன்ற VSCode.dev உங்கள் கோடுகளை எழுத, திருத்த மற்றும் நிர்வகிக்க ஒரு கட்டளைக் களமாக செயல்படுகிறது. எளிய இடைமுகம், ஏராளமான அம்சங்கள் மற்றும் உலாவி மூலம் உடனடி அணுகல் ஆகியவற்றுடன், நீங்கள்: - எந்த சாதனத்திலும் திட்டங்களைத் திருத்தலாம் - நிறுவல் சிக்கல்களை தவிர்க்கலாம் - உடனடியாக ஒத்துழைத்து பங்களிக்கலாம் VSCode.dev-ஐ நீங்கள் நன்கு கையாளத் தெரிந்த பிறகு, எங்கிருந்தும், எப்போது வேண்டுமானாலும் கோடிங் பணிகளைச் செய்ய தயாராக இருப்பீர்கள். *** ## VSCode.dev-ஐ தொடங்குவது எப்படி **[VSCode.dev](https://vscode.dev)**-க்கு செல்லுங்கள்—நிறுவல் தேவையில்லை, பதிவிறக்கம் தேவையில்லை. GitHub-இல் உள்நுழைவது முழு அணுகலை திறக்கிறது, அதில் உங்கள் அமைப்புகள், நீட்சிகள் மற்றும் ரெப்போசிடரிகளை ஒத்திசைக்கவும் அடங்கும். கேட்கப்பட்டால், உங்கள் GitHub கணக்கை இணைக்கவும். ஏற்றப்பட்ட பிறகு, உங்கள் பணிமனை இவ்வாறு இருக்கும்: ![Default VSCode.dev](../images/default-vscode-dev மூன்று முக்கிய பகுதிகளைக் கொண்டுள்ளது இடமிருந்து வலமாக: - **செயல்பாட்டு பட்டை:** 🔎 (தேடல்), ⚙️ (அமைப்புகள்), கோப்புகள், மூலக் கட்டுப்பாடு போன்ற ஐகான்கள். - **சைட்பார்:** செயல்பாட்டு பட்டை ஐகான் தேர்ந்தெடுக்கப்பட்டதன் அடிப்படையில் சூழலை மாற்றுகிறது (இயல்பாக *Explorer* ஆக இருக்கும்). - **எடிட்டர்/கோட் பகுதி:** வலது பக்கம் மிகப்பெரிய பகுதி—இங்கு நீங்கள் கோடுகளை திருத்தவும் காணவும் முடியும். அம்சங்களை ஆராய ஐகான்களை கிளிக் செய்யவும், ஆனால் உங்கள் இடத்தைத் திரும்பப் பெற _Explorer_க்கு திரும்பவும். *** ## GitHub ரெப்போசிடரியை திறக்க ### முறை 1: எடிட்டரிலிருந்து 1. [VSCode.dev](https://vscode.dev)க்கு செல்லவும். **"Open Remote Repository"** என்பதை கிளிக் செய்யவும். ![Open remote repository](../../../../8-code-editor/images/open-remote-repository _Command Palette_ (Ctrl-Shift-P, அல்லது Mac-ல் Cmd-Shift-P) பயன்படுத்தவும். ![Palette Menu](../images/palette-menu.pngopen remote repository.” - விருப்பத்தைத் தேர்ந்தெடுக்கவும். - உங்கள் GitHub ரெப்போ URL ஐ (எ.கா., `https://github.com/microsoft/Web-Dev-For-Beginners`) ஒட்டவும் மற்றும் Enter அழுத்தவும். வெற்றிகரமாக இருந்தால், முழு திட்டமும் ஏற்றப்பட்டு திருத்தத்திற்குத் தயாராக இருக்கும்! *** ### முறை 2: URL மூலம் உடனடியாக எந்த GitHub ரெப்போ URL-யையும் `github.com` ஐ `vscode.dev/github` ஆக மாற்றி நேரடியாக VSCode.dev-ல் திறக்கவும். எ.கா.: - GitHub: `https://github.com/microsoft/Web-Dev-For-Beginners` - VSCode.dev: `https://vscode.dev/github/microsoft/Web-Dev-For-Beginners` இந்த அம்சம் எந்த திட்டத்திற்கும் விரைவான அணுகலை அதிகரிக்கிறது. *** ## உங்கள் திட்டத்தில் கோப்புகளை திருத்துவது உங்கள் ரெப்போ திறந்தவுடன், நீங்கள் செய்யக்கூடியவை: ### 1. **புதிய கோப்பை உருவாக்கவும்** - *Explorer* சைட்பாரில், உங்கள் விருப்பமான கோப்புறையிலோ அல்லது மூலத்தில் சென்று செல்லவும். - _‘New file ...’_ ஐகானை கிளிக் செய்யவும். - உங்கள் கோப்பிற்கு பெயர் கொடுத்து, **Enter** அழுத்தவும், உடனடியாக உங்கள் கோப்பு தோன்றும். ![Create a new file](../images/create-new-file 2. **கோப்புகளை திருத்தவும் மற்றும் சேமிக்கவும்** - *Explorer*ல் ஒரு கோப்பை கிளிக் செய்து, அதை கோட் பகுதியில் திறக்கவும். - தேவையான மாற்றங்களைச் செய்யவும். - VSCode.dev உங்கள் மாற்றங்களை தானாகவே சேமிக்கிறது, ஆனால் நீங்கள் Ctrl+S அழுத்தி கையேடு முறையில் சேமிக்கலாம். ![Edit a file](../images/edit-a-file.png. **மாற்றங்களை கண்காணித்து, கமிட் செய்யவும்** VSCode.dev இல் **Git** பதிப்பு கட்டுப்பாடு ஒருங்கிணைக்கப்பட்டுள்ளது! - _'Source Control'_ ஐகானை கிளிக் செய்து செய்த மாற்றங்களைப் பார்வையிடவும். - `Changes` கோப்புறையில் உள்ள கோப்புகள் சேர்க்கைகள் (பச்சை) மற்றும் நீக்கங்கள் (சிவப்பு) ஆகியவற்றைக் காட்டும். ![View changes](../images/working-tree.png கோப்புகளின் அருகில் உள்ள `+` ஐ கிளிக் செய்து கமிட் செய்ய தயாராக மாற்றங்களைச் சேர்க்கவும். - தேவையற்ற மாற்றங்களை undo ஐகானை கிளிக் செய்து **நிராகரிக்கவும்**. - தெளிவான கமிட் செய்தியை உள்ளீடு செய்து, பின்பு கமிட் மற்றும் புஷ் செய்ய டிக் மார்க் ஐ கிளிக் செய்யவும். GitHub இல் உங்கள் ரெப்போசிடரிக்கு திரும்ப, மேல் இடது மூலையில் உள்ள ஹாம்பர்கர் மெனுவைத் தேர்ந்தெடுக்கவும். ![Stage & commit changes](../images/edit-vscode.dev நீட்சிகளுடன் மேம்படுத்தவும் நீட்சிகள் VSCode.dev-க்கு மொழிகள், தீம்கள், டிபக்கர்கள் மற்றும் உற்பத்தி கருவிகளைச் சேர்க்க அனுமதிக்கின்றன—உங்கள் கோடிங் வாழ்க்கையை எளிதாக்கவும், மகிழ்ச்சியாக்கவும். ### நீட்சிகளை உலாவுதல் மற்றும் நிர்வகித்தல் - செயல்பாட்டு பட்டையில் **Extensions icon** ஐ கிளிக் செய்யவும். - _'Search Extensions in Marketplace'_ பெட்டியில் ஒரு நீட்சியைத் தேடவும். ![Extension details](../images/extension-details: - **Installed**: நீங்கள் சேர்த்த அனைத்து நீட்சிகளும் - **Popular**: தொழில்துறை பிரபலங்கள் - **Recommended**: உங்கள் பணிமுறைக்கு ஏற்றவாறு பரிந்துரைக்கப்பட்டவை ![View extensions]( *** ### 1. **நீட்சிகளை நிறுவவும்** - தேடலில் நீட்சியின் பெயரை உள்ளீடு செய்து, அதை கிளிக் செய்து, எடிட்டரில் விவரங்களைப் பார்வையிடவும். - பக்கப்பட்டையிலோ அல்லது முக்கிய கோட் பகுதியில் **நீல Install பொத்தானை** அழுத்தவும். ![Install extensions](../images/install-extension 2. **நீட்சிகளை தனிப்பயனாக்கவும்** - உங்கள் நிறுவப்பட்ட நீட்சியைத் தேடவும். - **Gear icon** ஐ கிளிக் செய்யவும் → _Extension Settings_ ஐத் தேர்ந்தெடுத்து உங்கள் விருப்பங்களுக்கு ஏற்ப அமைப்புகளைச் சரிசெய்யவும். ![Modify extension settings](../images/extension-settings 3. **நீட்சிகளை நிர்வகிக்கவும்** நீங்கள் செய்யக்கூடியவை: - **Disable:** ஒரு நீட்சியை தற்காலிகமாக முடக்கு, ஆனால் அதை நிறுவியவாறு வைத்திரு - **Uninstall:** தேவையில்லாதால் நிரந்தரமாக நீக்கு நீட்சியைத் தேடவும், Gear ஐகானை அழுத்தி, ‘Disable’ அல்லது ‘Uninstall’ ஐத் தேர்ந்தெடுக்கவும், அல்லது கோட் பகுதியில் உள்ள நீல பொத்தான்களைப் பயன்படுத்தவும். *** ## பணிக்குறிப்பு உங்கள் திறன்களை சோதிக்க: [vscode.dev பயன்படுத்தி ஒரு ரெஸ்யூமே வலைத்தளத்தை உருவாக்கவும்](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md) *** ## மேலும் ஆராய்ச்சி மற்றும் சுயபயிற்சி - [அதிகாரப்பூர்வ VSCode Web Docs](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) மூலம் மேலும் ஆழமாக ஆராயவும். - மேம்பட்ட பணிமனை அம்சங்கள், விசைப்பலகை குறுக்குவழிகள் மற்றும் அமைப்புகளை ஆராயவும். *** **இப்போது நீங்கள் எங்கிருந்தும், எந்த சாதனத்திலும், VSCode.dev பயன்படுத்தி கோடிங் செய்ய, உருவாக்க, மற்றும் ஒத்துழைக்க தயாராக இருக்கிறீர்கள்!** --- **குறிப்பு**: இந்த ஆவணம் [Co-op Translator](https://github.com/Azure/co-op-translator) என்ற AI மொழிபெயர்ப்பு சேவையை பயன்படுத்தி மொழிபெயர்க்கப்பட்டுள்ளது. எங்கள் நோக்கம் துல்லியமாக இருக்க வேண்டும் என்றாலும், தானியங்கி மொழிபெயர்ப்புகளில் பிழைகள் அல்லது துல்லியமின்மைகள் இருக்கக்கூடும் என்பதை தயவுசெய்து கவனத்தில் கொள்ளவும். அதன் தாய்மொழியில் உள்ள மூல ஆவணம் அதிகாரப்பூர்வ ஆதாரமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பைப் பயன்படுத்துவதால் ஏற்படும் எந்த தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பல்ல.