VS Code Productivity Guide: Shortcuts, Extensions மற்றும் Debugging-ஐ ஸ்மார்ட்டா மாத்துவது எப்படி?

எந்த shortcuts தினமும் உங்க நேரத்தை மிச்சப்படுத்தும்?#

சென்னை OMR அல்லது பெங்களூரு டெக் பார்க் பக்கம் போயி ஒரு சீனியர் டெவலப்பரை கவனிச்சு பாருங்க. அவங்க மவுஸையோ அல்லது டிராக்பேடையோ தொடவே மாட்டாங்க. ஒரு மணி நேரத்துக்கு பல முறை மவுஸை தேடி கை போறப்பவே நம்ம யோசனை தடைபடும். இதுனால தினமும் 30 நிமிஷத்துல இருந்து ஒரு மணி நேரம் வரை வீணாகுது.

எழுபது, எண்பது ஷார்ட்கட்களை மனப்பாடம் பண்ண அவசியமே இல்லை. இந்த அஞ்சு ஷார்ட்கட் தெரிஞ்சாலே போதும், 90 சதவீத ஃபைல் நேவிகேஷனை சட்டுனு முடிச்சிடலாம்.

முதல் ஷார்ட்கட், Cmd + P (Windows-ல Ctrl + P). சைட்பாரை மவுஸால கிளிக் பண்ணி ஃபோல்டரை திறந்து ஃபைலை தேடாதீங்க. இதை பிரஸ் பண்ணி ஃபைல் பெயரின் முதல் மூணு எழுத்தை டைப் பண்ணா போதும், நொடியில் ஃபைல் முன்னாடி வந்து நிக்கும்.

ரெண்டாவது, Cmd + Shift + P (Ctrl + Shift + P). இதுதான் VS Code-ன் Command Palette. ஒரு விண்டோவை ரீலோட் பண்ணனும், இம்போர்ட்களை வரிசைப்படுத்தணும் அல்லது லேங்குவேஜ் மோட் மாத்தணும்னா, இந்த சர்ச் பார்ல டைப் பண்ணி ரெண்டே செகண்ட்ல முடிச்சிரலாம்.

மூணாவது, Cmd + D (Ctrl + D). மல்டி-கர்சர் செலக்சன். ஒரு வேரியபிள் பெயரை மாத்தணுமா? அதை கிளிக் பண்ணி Ctrl + D பிரஸ் பண்ணிட்டே போனா அடுத்தடுத்த இடங்கள் தானா செலக்ட் ஆகும், மொத்தமா மாத்திடலாம்.

நாலாவது, Option + Up/Down (Alt + Up/Down). ஒரு லைனை மேலயோ கீழயோ நகர்த்த கட் பண்ணி பேஸ்ட் பண்ண தேவை இல்லை. இந்த ஷார்ட்கட் வச்சி அப்படியே நகர்த்தலாம்.

அஞ்சாவது, Cmd + B (Ctrl + B). இடப்பக்கம் இருக்கிற சைட்பாரை சட்டென மூட இது உதவும். லாஜிக் யோசிச்சு கோடு டைப் பண்ணும்போது தேவையில்லாத பேனல்களை மறைச்சி ஃபுல் ஸ்கிரீன் ஸ்பேஸ் எடுத்துக்கலாம்.

இதை இன்னும் சீராக்க உங்க editor settings-ல் கீழே உள்ள வரிகளை சேர்த்துக்கலாம்:

{
  "editor.formatOnSave": true,
  "editor.bracketPairColorization.enabled": true,
  "editor.minimap.enabled": false,
  "files.autoSave": "onFocusChange"
}

Language-க்கு ஏத்த மாதிரி எந்த extensions தேவை?#

Extensions மார்க்கெட்பிளேஸை திறந்து கண்ணுல பட்டதையெல்லாம் இன்ஸ்டால் பண்றது, பசியோட சூப்பர் மார்க்கெட் போற மாதிரி. கடைசியில ரேம் மெமரி முழுக்க காலியாகி எடிட்டர் லேக் ஆக ஆரம்பிக்கும். அதாவது, தேவையில்லாத 20 டூல்ஸ் இருக்கிற மெகா பேக்குகளை தவிர்ப்பது நல்லது.

பொதுவான ரூல் ரொம்ப சிம்பிள்: ஒரு லின்டர், ஒரு பார்மேட்டர், அப்புறம் அந்த மொழிக்குரிய அதிகாரப்பூர்வ Language Server. இது மட்டுமே உங்க எடிட்டரை பறக்க வைக்கும்.

நீங்க JavaScript அல்லது TypeScript டெவலப்பர்னா, கோட் பார்மேட்டிங்கு Prettier மற்றும் ஸ்டேடிக் அனாலிசிஸ்க்கு ESLint வச்சிக்கோங்க. Python டெவலப்பர்களுக்கு Ruff எக்ஸ்டென்ஷன் செம்ம ஸ்பீட் தரும். பழைய Black மற்றும் Flake8 காம்போவை விட இது மின்னல் வேகத்துல வேலை செய்யும். Java என்றால் Extension Pack for Java, Go மொழிக்கு அதிகாரப்பூர்வ Go எக்ஸ்டென்ஷன் போதும்.

உங்க டீம் முழுக்க ஒரே எக்ஸ்டென்ஷனை பயன்படுத்த உங்க புராஜெக்ட்டில் .vscode/extensions.json ஃபைலை இப்படி உருவாக்கலாம்:

{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "charliermarsh.ruff"
  ]
}

Console log போடுறத விட்டுட்டு Built-in Debugger-ஐ எப்படி யூஸ் பண்ணலாம்?#

ஒரு பிரச்சனை வந்தா உடனே கோடு முழுக்க பத்து இடத்துல console.log அல்லது print போட்டு பாக்குற பழக்கம் பல பேருக்கு இருக்கு. அப்புறம் கோடை கிட்ல புஷ் பண்றதுக்கு முன்னாடி அதை ஒவ்வொன்னா தேடி டெலீட் பண்ணுவாங்க. இதுக்கு Built-in Debugger ஒரு அருமையான தீர்வு.

லைன் நம்பருக்கு பக்கத்துல ஒரு ரெட் டாட் வச்சா அதுதான் பிரேக்பாயிண்ட். அங்கே எக்ஸிகியூஷன் நிக்கும் போது, அந்த நேரத்துல வேரியபிள் மதிப்பு என்ன, கால் ஸ்டாக் எப்படி போகுதுன்னு லைவா பார்க்கலாம். F5 தட்டினா போதும், டீபக்கிங் ஸ்டார்ட் ஆகிடும்.

உதாரணமாக, ஒரு Node.js புராஜெக்ட்க்கு .vscode/launch.json ஃபைலை சுலபமாக இப்படி செட் பண்ணலாம்:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Current File",
      "program": "${file}",
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

Settings Sync வச்சி ஒரே setup-ஐ எல்லா லேப்டாப்பிலும் கொண்டு வர்றது எப்படி?#

ஆபீஸ் லேப்டாப்ல உட்கார்ந்து ஒரு வாரம் கஷ்டப்பட்டு எல்லா ஷார்ட்கட், தீம் மற்றும் எக்ஸ்டென்ஷன்களை செட் பண்ணுவோம். வீட்டுக்கு வந்து பர்சனல் சிஸ்டத்தை திறந்தா எல்லாமே பழசா இருக்கும். மறுபடியும் முதல்ல இருந்து இன்ஸ்டால் பண்ணிட்டு இருப்போம்.

VS Code-ன் இடது கீழ் மூலையில இருக்கிற கியர் ஐகானை கிளிக் பண்ணி 'Turn on Settings Sync' கொடுங்க. உங்க GitHub அல்லது Microsoft அக்கவுண்ட் வச்சி லாகின் பண்ணிட்டா போதும். உங்க எடிட்டர் செட்டிங்ஸ், கீ-பைண்டிங்ஸ், ஸ்னிப்பெட்ஸ் மற்றும் எக்ஸ்டென்ஷன்கள் கிளவுடுல பத்திரமாகிடும். புது லேப்டாப் வாங்கினாலும் ஒரு லாகின்ல பழைய செட்டப் மொத்தமும் ரெண்டே நிமிஷத்துல இறங்கிடும்.

Integrated Terminal அப்புறம் Tasks எப்படி workflow-ஐ ஈஸியாக்கும்?#

தனியா டெர்மினல் ஆப் திறந்து திரும்ப திரும்ப விண்டோ மாத்திட்டு இருக்காதீங்க. Ctrl + ` (backtick) பிரஸ் பண்ணா VS Code-க்குள்ளேயே டெர்மினல் ஓபன் ஆகிடும். ஒரே நேரத்துல ரெண்டு மூணு டெர்மினல் ஸ்பிளிட் பண்ணி ரன் பண்ணலாம்.

அதே மாதிரி, அடிக்கடி ரன் பண்ற டெஸ்ட் அல்லது பில்ட் கமாண்ட்களை .vscode/tasks.json ஃபைல்ல சேமிச்சு வச்சா, Ctrl + Shift + B அடிச்ச உடனே அந்த டாஸ்க் தானா எக்ஸிகியூட் ஆகும். மவுஸால் கமாண்ட்களை காப்பி பேஸ்ட் பண்ணும் வேலை மிச்சம்.

யார் எந்த mistake பண்ணி trouble-ல மாட்டுறாங்க?#

ஆரம்ப கட்ட டெவலப்பர்கள் பண்ற மிகப்பெரிய தப்பு, கண்ணில் படுகிற எல்லா ஏஐ எக்ஸ்டென்ஷன்களையும் டூல்ஸ்களையும் ஒரே நேரத்துல போட்டு வச்சிக்கிறது. இதனால் விண்டோ ஃப்ரீஸ் ஆகும், டைப் பண்ணும்போது லேக் அடிக்கும்.

ரெண்டாவது தப்பு, கிட் புஷ் பண்றதுக்கு முன்னாடி தேவையில்லாத console.log வரிகளை விட்டுட்டு போறது. கோட் ரிவ்யூவில் சீனியர்களிடம் திட்டு வாங்க இதுவே முதல் காரணம். Built-in Debugger பழகுனா இந்த பிரச்சனையே வராது.

மூணாவது தப்பு, ஃபைல்களை சேவ் பண்ணாமலே ரன் பண்ணி பாத்துட்டு ரிசல்ட் வரலையேனு தலையை பிய்த்துக்கொள்வது. Settings-ல் Auto Save ஆன் பண்ணி வச்சா இந்த தலைவலியே இருக்காது.

இந்திய ஐடி நிறுவனங்கள் மற்றும் இன்டர்வியூக்களில் இது எங்கே பயன்படுது?#

Zoho, Freshworks, Swiggy போன்ற முன்னணி நிறுவனங்களில் டெக்னிக்கல் இன்டர்வியூ நடக்கும்போது லைவ் கோடிங் ரவுண்ட் வைப்பாங்க. நீங்க ஸ்கிரீன் ஷேர் பண்ணி கோட் பண்ணும்போது, மவுஸை தேடாம ஷார்ட்கட் வச்சு ஃபைல்களை மாத்துறீங்களா, டீபக்கர் வச்சு எரரை கண்டுபிடிக்கிறீங்களானு இன்டர்வியூவர் கவனிப்பாங்க. டெர்மினலையும் எடிட்டரையும் ஒரு புரோ மாதிரி கையாள்வது உங்களுக்கு தனி மதிப்பையும் கான்ஃபிடன்ஸையும் கொடுக்கும்.

இன்னைக்கே பண்ணிப் பார்க்க ஒரு சின்ன Practice Task#

இன்னைக்கு ஈவினிங் ஒரு 15 நிமிஷம் ஒதுக்குங்க. ஒரு புது ஃபோல்டர் ஓபன் பண்ணி, அதுல ஒரு குட்டி ஸ்கிரிப்ட் ஃபைல் எழுதுங்க. மவுஸை தொடாம Ctrl + P வச்சு அந்த ஃபைலை ஓபன் பண்ணுங்க. ஒரு லைன்ல பிரேக் பாயிண்ட் வச்சு F5 பிரஸ் பண்ணி வேரியபிள் மதிப்புகளை இன்ஸ்பெக்ட் பண்ணி பாருங்க. அப்புறம் Ctrl + Shift + P அழுத்தி Settings Sync-ஐ உங்க GitHub அக்கவுண்ட்டோடு இணைச்சிடுங்க. நாளையில் இருந்து உங்க கோடிங் ஸ்பீட் மாறுறதை நீங்களே உணர்வீங்க.

Boilerplate திரும்ப திரும்ப அடிக்காம User Snippets எப்படி உருவாக்குவது?#

தினமும் காலையில ஆபீஸ் லாகின் பண்ண உடனே புதுசா ஒரு ஃபைல் ஓபன் பண்ணி, அதே இம்போர்ட் வரிகளையும் அதே ஸ்ட்ரக்சரையும் கையால டைப் பண்றதுல எவ்வளவு நேரம் போகுதுன்னு யோசிச்சு பாருங்க. சென்னை அல்லது கோயம்புத்தூர் சாப்ட்வேர் கம்பெனிகள்ல ஸ்பிரிண்ட் டெலிவரி டைம்ல இப்படி திரும்ப திரும்ப ஒரே கோடை அடிக்கிறது பெரிய சலிப்பை தரும். இதற்கு VS Code தரும் சிறந்த ஆயுதம் தான் User Snippets. நீங்க அடிக்கிற ரெண்டு மூணு எழுத்து ஷார்ட்கட்டுக்கு ஒரு முழு கோட் பிளாக்கையே எடிட்டர் தானாக எழுதி கொடுத்துவிடும்.

இதை செட் பண்றது ரொம்ப சிம்பிள். Ctrl + Shift + P அழுத்தி 'Configure User Snippets' என்று சர்ச் பண்ணுங்க. உங்க புராஜெக்ட் லாங்குவேஜை செலக்ட் பண்ணி, அடிக்கடி தேவைப்படுற API கால் அல்லது காம்போனென்ட் ஸ்ட்ரக்சரை ஒரு JSON வடிவில் உள்ளீடு செய்யலாம். உதாரணமாக, 'clg' என்று டைப் பண்ணி டேப் தட்டினால் console.log வருவது போல, நீங்க வைக்கிற 'fetchapi' என்ற வார்த்தைக்கு முழு async/await டெம்ப்ளேட்டும் கண் முன்னாடி வந்து நிற்கும்.

இதனால டைப்பிங் வேகம் மூணு மடங்கு அதிகமாகுறதோடு, ஸ்பெல்லிங் மிஸ்டேக் மற்றும் சிண்டாக்ஸ் எரர் வராமலும் தடுக்கலாம். டீமில் இருக்கிற ஜூனியர் டெவலப்பர்களுக்கும் இந்த ஸ்னிப்பெட்களை ஷேர் பண்ணிட்டா, புராஜெக்ட் முழுக்க ஒரே மாதிரியான கோடிங் பேட்டர்ன் தானாக ஃபாலோ ஆகும்.