Installing VS Code (VS Code දාගන්න)
VS Code (Visual Studio Code) කියන්නේ Microsoft එකෙන් හදපු, ලෝකේ වැඩිපුරම පාවිච්චි වෙන Professional Code Editor එක.
මොකක්ද මේ VS Code?
VS Code කියන්නේ මේවා නෙවෙයි:
- ❌ Visual Studio (ඒක වෙනම එකක්, ගොඩක් බරයි)
- ❌ වෙබ් සයිට් එකක් (මේක සොෆ්ට්වෙයා එකක්, මැෂින් එකේ දුවන්නේ)
- ❌ ගණන් වැඩි සොෆ්ට්වෙයා එකක් (මේක නොමිලේ!)
දාගන්න විදිහ
# Windows Installation ## පියවර 1: ඩවුන්ලෝඩ්1. බ්රව්සර් එක ඕපන් කරගන්න2. code.visualstudio.com එකට යන්න3. නිල් පාට ලොකු "Download for Windows" බට්න් එක ඔබන්න4. පොඩි ෆයිල් එකක් (.exe) ඩවුන්ලෝඩ් වෙයි (90MB විතර) ## පියවර 2: ඉන්ස්ටෝල්1. ඩවුන්ලෝඩ් වුනු ෆයිල් එක හොයාගන්න2. ඒක උඩ ඩබල් ක්ලික් කරන්න3. මැෂින් එකෙන් අවසර ඉල්ලුවොත් "Yes" දෙන්න ## පියවර 3: වැදගත්ම තැන! (Options)"Select Additional Tasks" එනකොට මේ කොටු ඔක්කොටම ටික් එක දාන්න:☑️ "Add 'Open with Code' action to file context menu"☑️ "Add 'Open with Code' action to directory context menu"☑️ "Register Code as an editor for supported file types"☑️ "Add to PATH" ← මේක දාලා නැත්නම් පස්සේ ප්රශ්න! ## පියවර 4: ඕපන් කරමුDesktop එකේ තියෙන අයිකන් එකෙන් VS Code ඕපන් කරන්න."Welcome" ටැබ් එකක් ආවා නම් වැඩේ ගොඩ!හරිද බලමු (Verification)
ඔක්කොම ඉවර වුනාම මේ ටික චෙක් කරන්න:
✅ VS Code Installation Verification
0/6අතුරුමුහුණත අඳුරගමු (Interface Tour)
┌─────────────────────────────────────────────────────────────────┐│ File Edit Selection View Go Run Terminal Help │ ← Menu Bar├─────┬───────────────────────────────────────────────────────────┤│ │ index.html style.css × │ ← Open Files│ 📁 ├───────────────────────────────────────────────────────────┤│ │ 1 <!DOCTYPE html> ││ 🔍 │ 2 <html> ││ │ 3 <head> ││ 🔀 │ 4 <title>My Page</title> │ ← Editor│ │ 5 </head> ││ 🐛 │ 6 <body> ││ │ 7 <h1>Hello!</h1> ││ 📦 │ 8 </body> ││ │ 9 </html> │├─────┴───────────────────────────────────────────────────────────┤│ PROBLEMS OUTPUT DEBUG CONSOLE TERMINAL │ ← Panels└─────────────────────────────────────────────────────────────────┘වම් පැත්තේ තියෙන අයිකන් ටික:
| අයිකනය | නම | මොකටද? |
|---|---|---|
| 📁 | Explorer | ඔයාගේ ෆයිල් සහ ෆෝල්ඩර බලාගන්න |
| 🔍 | Search | ෆයිල් ඇතුලේ තියෙන වචන හොයන්න |
| 🔀 | Source Control | Git එක්ක වැඩ කරන්න |
| 🐛 | Run & Debug | කෝඩ් එකේ වැරදි හොයන්න |
| 📦 | Extensions | අලුත් කෑලි දාගන්න |
අත්යවශ්ය Extensions දාගමු
VS Code එක නිකන් වාහනයක් නම්, Extensions කියන්නේ ඒකට දාන ගැජට් වගේ. අපිට මේ 3 ඕනෙමයි.
දාගන්න විදිහ:
- වම් පැත්තේ තියෙන Extensions අයිකන් එක (📦) ඔබන්න
- නම සර්ච් කරන්න
- Install ඔබන්න
1. Live Server
Live Server
මොකටද: අපි හදන වෙබ් පිටුව එවලෙම බ්රව්සර් එකේ බලාගන්න (Auto-refresh වෙනවා).
දාගන්න: Live Server සර්ච් කරන්න (Ritwick Dey හදපු එක).
පාවිච්චි කරන හැටි: HTML ෆයිල් එක උඩ Right-click → "Open with Live Server"
2. Prettier
Prettier
මොකටද: ඔයා කෝඩ් එක අපිලිවෙලට ගැහුවත්, මේකෙන් ඒක ලස්සනට, පිළිවෙලට හදලා දෙනවා.
දාගන්න: Prettier - Code formatter සර්ච් කරන්න.
පාවිච්චි කරන හැටි: Right-click → "Format Document"
3. Codeium (නොමිලේ AI)
Codeium
මොකටද: කෝඩ් ලියද්දී අපිට උදව් කරන AI යාළුවා.
දාගන්න: Codeium සර්ච් කරලා, install කරලා account එකක් හදාගන්න.
පාවිච්චි කරන හැටි: ඔයා ටයිප් කරනකොටම suggestions එනවා!
Extensions වැඩද බලමු
✅ Essential Extensions Installed
0/3Test කරමු:
- අලුත් ෆයිල් එකක් හදන්න:
test.html - මේක ලියන්න:
<h1>Hello World</h1> - සේව් කරන්න
- ෆයිල් එක මැද Right-click කරලා "Open with Live Server" දෙන්න
- බ්රව්සර් එක ඕපන් වෙලා "Hello World" වැටුනා නම් ගොඩ!
මේ ෂෝට්කට් ටික පාඩම් කරගන්න
වැඩේ ඉක්මන් කරගන්න මේවා ඕනේ වෙනවා:
| වැඩේ | Windows | Mac |
|---|---|---|
| අලුත් ෆයිල් එකක් | Ctrl + N | Cmd + N |
| සේව් කරන්න | Ctrl + S | Cmd + S |
| ෆයිල් එක වහන්න | Ctrl + W | Cmd + W |
| ඕපන් කරන්න | Ctrl + O | Cmd + O |
| ටර්මිනල් එක ගන්න | Ctrl + ` | Ctrl + ` |
| සර්ච් කරන්න | Ctrl + F | Cmd + F |
| Command Palette | Ctrl + Shift + P | Cmd + Shift + P |
පොඩි සැකසුම් (Settings) ටිකක්
වැඩේ ලේසි වෙන්න මේවා හදාගන්න:
පාඩමේ සාරාංශය
ඔයා කරපු දේවල්:
- ✅ මැෂින් එකට VS Code දැම්මා
- ✅ අවශ්ය Extensions (Live Server, Prettier, Codeium) ටික දැම්මා
- ✅ මූලික දේවල් ටික හදාගත්තා
දැන් ඔයා ළඟ තියෙන්නේ
ලෝකේ දක්ෂම ඩිවලොපර්ලා පාවිච්චි කරන ටූල් එකමයි!
Knowledge Check
📝 Quiz
1/2VS Code කියන්නේ මොකක්ද?
ඊළඟ පාඩම
අපේ මැෂින් එකේ JavaScript දුවන්න පුළුවන් විදිහට හදාගමු — Node.js install කරමු!