Visual Studio Code: Ο Απόλυτος Οδηγός

1. Εισαγωγή στον Κόσμο του VS Code

Τι είναι το Visual Studio Code;

Το Visual Studio Code (ή απλά VS Code) είναι ένας ελεύθερου κώδικα, πολύ-πλατφορμικός επεξεργαστής κειμένου που έχει εξελιχθεί σε πλήρες περιβάλλον ανάπτυξης (IDE). Δημιουργήθηκε από τη Microsoft το 2015 και από τότε έχει κατακτήσει την κοινότητα των προγραμματιστών, καθιερώνοντας το πρότυπο για τη σύγχρονη ανάπτυξη λογισμικού.

Σε αντίθεση με έναν απλό επεξεργαστή κειμένου όπως το Notepad ή το TextEdit, το VS Code προσφέρει intelligent code completion (IntelliSense), ενσωματωμένο debugging, ενσωματωμένο terminal, υποστήριξη Git, και ένα τεράστιο οικοσύστημα επεκτάσεων (extensions) που το μετατρέπουν από απλό editor σε πλήρες εργαλείο ανάπτυξης.

Γιατί είναι τόσο δημοφιλές;

Η επιτυχία του VS Code βασίζεται σε τρεις πυλώνες: ταχύτητα, ευελιξία και ανοικτότητα. Είναι ελαφρύτερο από παραδοσιακά IDE όπως το IntelliJ IDEA ή το Visual Studio, αλλά ταυτόχρονα πιο ισχυρό από απλούς editors όπως το Sublime Text ή το Atom. Η αρχιτεκτονική του, που βασίζεται στο Electron (HTML/CSS/JavaScript), του επιτρέπει να είναι πολύ-πλατφορμικός με υψηλό βαθμό προσαρμοστικότητας.

Σύμφωνα με τις ετήσιες έρευνες της Stack Overflow, το VS Code κατέχει σταθερά την πρώτη θέση προτίμησης μεταξύ επαγγελματιών προγραμματιστών για περισσότερα από 5 συνεχόμενα έτη. Αυτό σημαίνει ότι όταν μαθαίνετε VS Code, μαθαίνετε το εργαλείο που χρησιμοποιεί η πλειοψηφία της αγοράς εργασίας.

Η διαφορά με έναν απλό Επεξεργαστή Κειμένου

Ένας απλός text editor σας επιτρέπει να γράψετε και να αποθηκεύσετε κείμενο. Ένας σύγχρονος editor για προγραμματισμό όμως κάνει πολύ περισσότερα πράγματα:

• Syntax Highlighting: Χρωματίζει τις λέξεις-κλειδιά της γλώσσας προγραμματισμού ώστε να διαβάζεται ευκολότερα ο κώδικας.
• IntelliSense: Παρέχει αυτόματη συμπλήρωση κώδικα, υποδείξεις παραμέτρων, και γρήγορη τεκμηρίωση καθώς πληκτρολογείτε.
• Linting: Εντοπίζει λάθη και παραβιάσεις στυλ πριν καν τρέξετε τον κώδικα.
• Debugging: Σας επιτρέπει να τρέξετε τον κώδικα γραμμή-γραμμή, να ελέγξετε μεταβλητές και να εντοπίσετε λογικά λάθη.
• Version Control: Ενσωματωμένη υποστήριξη για Git, επιτρέποντάς σας να παρακολουθείτε αλλαγές και να συνεργάζεστε.
• Extensions: Δυνατότητα εγκατάστασης χιλιάδων πρόσθετων για οποιαδήποτε γλώσσα ή πλαίσιο εργασίας (framework).

Το VS Code προσφέρει όλα τα παραπάνω διατηρώντας μια αίσθηση ελαφρότητας. Δεν χρειάζεται να περιμένετε λεπτά για να ανοίξει το πρόγραμμα, ούτε χρειάζεται να καταναλώνει τεράστιους πόρους της μνήμης όπως τα παραδοσιακά IDE.

Για ποιους είναι ιδανικό;

Το VS Code απευθύνεται σε όλους: από τον απόλυτο αρχάριο που γράφει τα πρώτα του βήματα σε HTML, μέχρι τον έμπειρο προγραμματιστή που αναπτύσσει σύνθετες εφαρμογές σε TypeScript, Python, Rust ή Go. Η δύναμή του έγκειται στο γεγονός ότι μπορείτε να ξεκινήσετε απλά και να προσθέτετε λειτουργίες καθώς μεγαλώνετε τεχνικά.

Εάν είστε φοιτητής πληροφορικής, web developer, data scientist, ή απλώς ερασιτέχνης που θέλει να μάθει προγραμματισμό, το VS Code είναι το καλύτερο σημείο εκκίνησης. Η εκτενής τεκμηρίωση, η ελληνική κοινότητα χρηστών (αν και η πλειοψηφία της πληροφορίας είναι στα Αγγλικά), και το τεράστιο οικοσύστημα καθιστούν τη μάθηση προσβάσιμη.

2. Εγκατάσταση & Πρώτη Ρύθμιση

Βήματα Εγκατάστασης σε Windows

1. Λήψη: Επισκεφθείτε την επίσημη ιστοσελίδα code.visualstudio.com Κάντε κλικ στο μεγάλο μπλε κουμπί Download. Το site αναγνωρίζει αυτόματα το λειτουργικό σας σύστημα και θα σας προτείνει το σωστό installer (συνήθως το VSCodeUserSetup-x64-<version>.exe).
2. Εκτέλεση Installer: Μόλις ολοκληρωθεί η λήψη, εκτελέστε το αρχείο. Τα Windows ενδέχεται να εμφανίσουν προειδοποίηση ασφαλείας από τον Windows Defender — πατήστε "Περισσότερες πληροφορίες" και "Εκτέλεση ούτως ή άλλως".
3. Άδειες: Αποδεχθείτε τη συμφωνία άδειας χρήσης. Το VS Code είναι δωρεάν λογισμικό με άδεια MIT, πράγμα που σημαίνει ότι μπορείτε να το χρησιμοποιήσετε εμπορικά χωρίς περιορισμούς.
4. Επιλογές: Στην οθόνη "Επιπλέον Εργασίες" (Additional Tasks), συνιστάται ανεπιφύλακτα να επιλέξετε:
   • "Add to PATH" (Προσθήκη στη μεταβλητή περιβάλλοντος PATH)
   • "Register Code as an editor for supported file types"
   • "Add 'Open with Code' action to Windows Explorer" (και για φακέλους και για αρχεία)
   Αυτές οι επιλογές σας επιτρέπουν να ανοίγετε το VS Code με δεξί κλικ από τον Explorer.
5. Ολοκλήρωση: Πατήστε Install. Μετά την ολοκλήρωση, αφήστε επιλεγμένο το "Launch Visual Studio Code" και πατήστε Finish.

Εγκατάσταση σε macOS

1. Λήψη: Από την ίδια ιστοσελίδα, κατεβάστε το αρχείο .zip για Mac (distro για Apple Silicon ή Intel ανάλογα το Mac σας).
2. Εγκατάσταση: Αποσυμπιέστε το ZIP. Θα δείτε το εικονίδιο Visual Studio Code.app.
3. Μετακίνηση: Σύρετε το εικονίδιο στον φάκελο Applications (Εφαρμογές). Εναλλακτικά, αντιγράψτε το με Cmd+C και επικολλήστε το στο /Applications με Cmd+V.
4. Πρώτο Άνοιγμα: Επειδή το αρχείο κατέβηκε από το Διαδίκτυο, το macOS ίσως εμφανίσει προειδοποίηση. Πηγαίνετε System Settings > Privacy & Security και πατήστε "Open Anyway", ή κρατήστε πατημένο το πλήκτρο Ctrl και κάντε κλικ στο εικονίδιο για να εμφανιστεί η επιλογή "Open".
5. Εντολή code: Για να μπορείτε να ανοίγετε το VS Code από το Terminal, ανοίξτε το VS Code, πατήστε Cmd+Shift+P και γράψτε Shell Command: Install 'code' command in PATH.

Εγκατάσταση σε Linux (Ubuntu/Debian)

Αν και ζητήθηκαν Windows/Mac, αξίζει να αναφερθεί ότι η εγκατάσταση σε Linux γίνεται συνήθως μέσω snap:

# Ubuntu / Debian
sudo snap install code --classic

# Ή μέσω apt (official Microsoft repo)
wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
sudo install -D -o root -g root -m 644 packages.microsoft.gpg /etc/apt/keyrings/packages.microsoft.gpg

Πρώτη Εκκίνηση & Ρύθμιση

Κατά την πρώτη εκκίνηση, το VS Code θα σας παρουσιάσει μια οθόνη καλωσορίσματος. Θα σας ρωτήσει για το Color Theme. Για αρχάριους, προτείνουμε το Dark+ (default dark) ή το Dark Modern που είναι και το επίσημο σκούρο θέμα της Microsoft.

Μπορείτε επίσης να επιλέξετε αν θέλετε το λεγόμενο Settings Sync, το οποίο συγχρονίζει τις ρυθμίσεις σας μέσω του λογαριασμού Microsoft ή GitHub. Αυτό είναι χρήσιμο αν εργάζεστε σε πολλούς υπολογιστές. Για τώρα, μπορείτε να το παραλείψετε.

3. Πρώτη Γνωριμία με το Περιβάλλον Εργασίας (UI)

Το περιβάλλον του VS Code έχει σχεδιαστεί για να μεγιστοποιεί τον χώρο που διαθέτετε για γράψιμο κώδικα, ενώ παράλληλα παρέχει άμεση πρόσβαση σε όλα τα απαραίτητα εργαλεία. Ας αναλύσουμε κάθε τμήμα του παραθύρου.

Activity Bar (Αριστερή Μπάρα Δραστηριοτήτων)

Η πιο αριστερή στήλη, με τα εικονίδια. Εκεί βρίσκονται οι πέντε βασικές προβολές:

• Explorer (📄): Προβολή αρχείων και φακέλων του project σας. Ανοίγετε, κλείνετε, δημιουργείτε και διαγράφετε αρχεία.
• Search (🔍): Καθολική αναζήτηση και αντικατάσταση κειμένου σε όλα τα αρχεία του project.
• Source Control (Κλαδί Git): Διαχείριση εκδόσεων κώδικα με Git. Σας δείχνει ποια αρχεία άλλαξαν, σας επιτρέπει commit, push, pull.
• Run and Debug (▶️ 🐞): Ξεκινήστε debugging sessions, δείτε breakpoints, watch variables.
• Extensions (□): Το "κατάστημα" επεκτάσεων. Αναζητήστε, εγκαταστήστε και διαχειριστείτε extensions.

Κάτω από τα βασικά εικονίδια, υπάρχουν και τα accounts/sync settings. Μπορείτε να αποκρύψετε ή να επανατοποθετήσετε την Activity Bar μέσω του μενού View > Appearance.

Sidebar (Πλευρική Στήλη)

Δίπλα στην Activity Bar βρίσκεται η Sidebar, η οποία αλλάζει περιεχόμενο ανάλογα με την επιλεγμένη δραστηριότητα. Όταν είστε στον Explorer, εδώ εμφανίζεται η δενδρική δομή (tree view) των αρχείων σας. Όταν είστε στην Αναζήτηση, εδώ εμφανίζονται τα αποτελέσματα.

Editor Area (Κεντρική Περιοχή Επεξεργασίας)

Αυτή είναι η "καρδιά" του VS Code. Εδώ ανοίγετε και επεξεργάζεστε τα αρχεία. Τα ανοικτά αρχεία εμφανίζονται ως tabs στην κορυφή. Μπορείτε να έχετε πολλαπλά tabs ανοιχτά, να τα οργανώνετε σε groups, ή ακόμα και να χωρίσετε τον editor οριζόντια ή κάθετα για παράλληλη επεξεργασία.

Πάνω από τα tabs υπάρχει το Breadcrumbs (ψίχουλα ψωμιού), που δείχνει το μονοπάτι του αρχείου και τη θέση σας μέσα σε αυτό (π.χ. σε ποια συνάρτηση βρίσκεστε). Αν δεν τα βλέπετε, ενεργοποιήστε τα από View > Appearance > Show Breadcrumbs.

Status Bar (Κάτω Μπάρα Κατάστασης)

Η μπάρα στο κάτω μέρος του παραθύρου παρέχει χρήσιμες πληροφορίες σε πραγματικό χρόνο:

• Αριστερά: Errors / Warnings (κόκκινο και κίτρινο), Line/Column αριθμός (σε ποια γραμμή και στήλη είστε), χαρακτήρες που επιλέξατε.
• Δεξιά: Η γλώσσα προγραμματισμού του αρχείου (π.χ. JavaScript, Python, HTML), το κωδικοποιημένο σύνολο χαρακτήρων (UTF-8), το line ending (LF ή CRLF), και το Git branch στο οποίο βρίσκεστε.

Πολλά από τα στοιχεία της Status Bar είναι διαδραστικά. Για παράδειγμα, αν κάνετε κλικ στο "UTF-8", μπορείτε να αλλάξετε την κωδικοποίηση. Αν κάνετε κλικ στο branch name, ανοίγει το Git branch switcher.

Integrated Terminal (Ενσωματωμένο Τερματικό)

Ένα από τα χαρακτηριστικά που ξεχωρίζουν το VS Code είναι το ενσωματωμένο τερματικό. Μπορείτε να το ανοίξετε με το συνδυασμό Ctrl+` (backtick). Το terminal εμφανίζεται στο κάτω μέρος του παραθύρου, κάτω από τον editor. Μπορείτε να το σύρετε για να αλλάξετε ύψος, ή να το μετακινήσετε στο δεξί μέρος της οθόνης για περισσότερο κατακόρυφο χώρο.

Το terminal χρησιμοποιεί το default shell του συστήματός σας (Command Prompt/PowerShell στα Windows, bash/zsh στο Mac/Linux). Μπορείτε να ανοίξετε πολλαπλά tabs στο terminal, κάτι που είναι εξαιρετικά χρήσιμο όταν θέλετε να τρέχετε ταυτόχρονα τον server σας, τον compiler, και άλλες διεργασίες.

Panels και Views

Το VS Code χρησιμοποιεί μια ευέλικτη διάταξη με Panels. Η περιοχή κάτω από τον editor (όπου βρίσκεται το terminal, η Output console, και τα Debug Console/Problems) λέγεται Bottom Panel. Μπορείτε να την ανοίξετε/κλείσετε με Ctrl+J.

4. Βασικές Έννοιες: Workspace και Project

Τι είναι το Workspace;

Στο VS Code, ένα Workspace (Χώρος Εργασίας) είναι η ανώτατη μονάδα οργάνωσης. Στην πιο απλή του μορφή, ένα workspace είναι απλώς ένας φάκελος που έχετε ανοίξει. Ωστόσο, το VS Code επιτρέπει και τα Multi-Root Workspaces, όπου μπορείτε να έχετε ανοιχτούς πολλαπλούς φακέλους ταυτόχρονα μέσα στο ίδιο παράθυρο. Αυτό είναι χρήσιμο όταν εργάζεστε σε ένα frontend project και ένα backend project που βρίσκονται σε διαφορετικούς φακέλους αλλά θέλετε να τα βλέπετε μαζί.

Όταν αποθηκεύετε ένα workspace (μέσω File > Save Workspace As...), δημιουργείται ένα αρχείο με κατάληξη .code-workspace. Αυτό το αρχείο περιέχει metadata: ποιοι φάκελοι περιλαμβάνονται, ποιες είναι οι προτεινόμενες επεκτάσεις (extensions), τα ανοιχτά tabs, ακόμα και οι ρυθμίσεις που ισχύουν μόνο για αυτό το workspace.

Άνοιγμα ενός Project

Υπάρχουν τρεις τρόποι για να ανοίξετε ένα project:

1. Open Folder: Πηγαίνετε File > Open Folder... και επιλέξτε τον φάκελο του project. Αυτός είναι ο πιο κοινός τρόπος.
2. Από το Terminal: Αν βρίσκεστε μέσα στον φάκελο του project μέσω γραμμής εντολών, γράψτε code . (σημείο σημαίνει "ο τρέχων φάκελος") και πατήστε Enter. Το VS Code θα ανοίξει με αυτόν τον φάκελο.
3. Με Drag & Drop: Σύρετε έναν φάκελο από τον Explorer/Finder απευθείας στο παράθυρο του VS Code.

Ο Φάκελος .vscode

Όταν ανοίγετε έναν φάκελο ως project, μπορείτε να δημιουργήσετε μέσα σε αυτόν έναν υποφάκελο με το όνομα .vscode. Εδώ αποθηκεύονται οι ρυθμίσεις που αφορούν αποκλειστικά αυτό το project. Τα πιο συνηθισμένα αρχεία μέσα σε αυτόν τον φάκελο είναι:

• settings.json: Ρυθμίσεις που παρακάμπτουν τις global ρυθμίσεις του χρήστη μόνο για αυτό το project.
• launch.json: Διαμορφώσεις για debugging. Ορίζει πώς θα ξεκινάει το debugger για το συγκεκριμένο project.
• tasks.json: Αυτοματοποιημένες εργασίες, όπως compilation, build scripts, ή linting πριν το commit.
• extensions.json: Προτείνει συγκεκριμένες επεκτάσεις σε άλλους προγραμματιστές που θα ανοίξουν αυτό το project.

5. Τα 10 Απαραίτητα Extensions για Αρχάριους

Η δύναμη του VS Code βρίσκεται στα extensions. Σκεφτείτε τα σαν εφαρμογές για smartphone: το "κινητό" (το VS Code) είναι ικανό από μόνο του, αλλά με τις κατάλληλες εφαρμογές μετατρέπεται σε εργαλείο απεριόριστων δυνατοτήτων. Παρακάτω παρουσιάζουμε τα 10 πιο χρήσιμα extensions για κάθε αρχάριο.

1. Live Server (Ritwick Dey)

Αν ασχολείστε με Web Development (HTML/CSS/JavaScript), αυτό είναι το πιο χρήσιμο extension. Δημιουργεί έναν τοπικό server και ανοίγει αυτόματα τη σελίδα σας στον browser. Το μαγικό; Κάθε φορά που σώζετε (save) ένα αρχείο, ο browser ανανεώνεται αυτόματα (Live Reload).

Πώς χρησιμοποιείται: Ανοίξτε ένα HTML αρχείο και πατήστε το κουμπί "Go Live" που εμφανίζεται κάτω δεξιά στη Status Bar. Αμέσως ανοίγει ο browser στη διεύθυνση http://127.0.0.1:5500/. Για να σταματήσετε τον server, πατήστε ξανά το ίδιο κουμπί (τελείωσε σε "Disposal").

2. Prettier - Code: formatter

Το Prettier είναι ένας αυτόματος μορφοποιητής κώδικα. Υποστηρίζει HTML, CSS, JavaScript, JSON, Markdown και πολλές ακόμα γλώσσες. Σας γλυτώνει από ατελείωτες ώρες προσπάθειας να ευθυγραμμίσετε κώδικα ή να συζητάτε με συναδέλφους για το αν η αγκύλη μπαίνει στην ίδια ή στην επόμενη γραμμή.

Συνιστάται να ρυθμίσετε το Format On Save ώστε κάθε φορά που πατάτε Ctrl+S, ο κώδικάς σας να μορφοποιείται αυτόματα σύμφωνα με τα πρότυπα που ορίσατε.

3. Auto Rename Tag

Ένα απλό αλλά σωτήριο extension για HTML/XML. Όταν αλλάζετε το όνομα ενός ανοιχτού tag (π.χ. από <div> σε <section>), το extension αλλάζει αυτόματα και το αντίστοιχο κλειστό tag. Αυτό εξαλείφει ένα από τα πιο συνηθισμένα syntax errors σε HTML.

4. GitLens — Git supercharged

Το GitLens μετατρέπει το VS Code σε Git powerhouse. Εμφανίζει inline blame (ποιος έγραψε ποια γραμμή και πότε), ιστορικό αλλαγών, παρακολουθεί branches, tags, και συγχωνεύσεις. Για αρχάριους που μαθαίνουν Git, είναι το καλύτερο εκπαιδευτικό εργαλείο, καθώς οπτικοποιεί αόρατες προηγουμένως διεργασίες.

5. Python (Microsoft)

Η επίσημη επέκταση της Microsoft για Python. Παρέχει IntelliSense, linting, debugging, πλοήγηση σε κώδικα, refactoring, και υποστήριξη Jupyter Notebooks μέσα στον editor. Αν μαθαίνετε Python, αυτό το extension είναι μη διαπραγματεύσιμο.

Μετά την εγκατάσταση, το VS Code μπορεί να σας προτείνει αυτόματα τη εγκατάσταση του Pylance (προχωρημένο language server) και των Python Debugger extensions.

6. HTML CSS Support / IntelliSense for CSS class names

Αυτά τα δύο extensions συμπληρώνουν ο ένας τον άλλον. Το HTML CSS Support παρέχει πιο έξυπνη αυτόματη συμπλήρωση στα HTML attributes, ενώ το IntelliSense for CSS class names διαβάζει τα stylesheets του project σας και προτείνει class names καθώς γράφετε HTML.

7. Material Icon Theme

Το προεπιλεγμένο θέμα εικονιδίων του VS Code είναι λειτουργικό αλλά φτωχό. Το Material Icon Theme προσθέτει όμορφα, αναγνωρίσιμα εικονίδια για κάθε τύπο αρχείου και φακέλου. Ορατικά, ξεχωρίζετε αμέσως ποιος φάκελος περιέχει tests, ποιος images, ποιος κώδικας.

8. GitHub Copilot (ή Codeium ως δωρεάν εναλλακτική)

Το Copilot είναι AI pair programmer. Με βάση τα σχόλια και τον κώδικά σας, προτείνει ολόκληρες γραμμές ή συναρτήσεις σε πραγματικό χρόνο. Απαιτεί συνδρομή, αλλά το Codeium είναι μια εξαιρετική δωρεάν εναλλακτική. Ωστόσο, για αρχάριους υπάρχει μια προειδοποίηση...

9. ESLint (για JavaScript)

Το ESLint εντοπίζει συντακτικά λάθη και παραβιάσεις καλών πρακτικών σε JavaScript. Σας αναγκάζει να γράφετε καθαρότερο κώδικα και σας προστατεύει από κοινά λάθη όπως η χρήση μη δηλωμένων μεταβλητών ή η λογική σε εσφαλμένα blocks.

10. Thunder Client (ή REST Client)

Όταν φτάσετε στο σημείο να ασχολείστε με APIs, το Thunder Client σας επιτρέπει να στέλνετε HTTP αιτήματα (GET, POST, PUT, DELETE) απευθείας μέσα από το VS Code χωρίς να χρειάζεται εξωτερικό πρόγραμμα όπως το Postman. Είναι εξαιρετικά βολικό για testing backends.

Πώς εγκαθιστούμε Extensions

Κάντε κλικ στο εικονίδιο Extensions (ή πατήστε Ctrl+Shift+X). Στην μπάρα αναζήτησης γράψτε το όνομα του extension. Πατήστε Install. Στις περισσότερες περιπτώσεις απαιτείται Reload (επανεκκίνηση) του παραθύρου ή του editor για να ενεργοποιηθεί πλήρως.

6. Συντομεύσεις Πληκτρολογίου (Keyboard Shortcuts)

Η αποτελεσματική χρήση του VS Code περνάει από το πληκτρολόγιο. Κάθε φορά που το χέρι σας φεύγει από το πληκτρολόγιο για να πιάσει το ποντίκι, χάνεται χρόνος. Με τις παρακάτω συντομεύσεις, θα είστε σε θέση να ελέγχετε τον editor με εκπληκτική ταχύτητα.

Οι Βασιλιάδες των Συντομεύσεων

Πώς να θυμάστε τις συντομεύσεις

Μην προσπαθήσετε να μάθετε όλες τις συντομεύσεις ταυτόχρονα. Ξεκινήστε με τρεις: Ctrl+P (Quick Open), Ctrl+Shift+P (Command Palette), και Ctrl+` (Terminal). Αυτές οι τρεις θα σας λύσουν τα χέρια. Προσθέστε μία νέα κάθε εβδομάδα.

Αν ξεχάσετε μια συντόμευση, πατήστε Ctrl+K ακολούθως Ctrl+S (ή Cmd+K Cmd+S σε Mac). Ανοίγει ο πλήρης κατάλογος συντομεύσεων όπου μπορείτε να αναζητήσετε, να δείτε ποιες είναι ήδη κατειλημμένες, και να ορίσετε δικές σας.

7. Ενσωματωμένο Terminal & Debugging

Γιατί Terminal μέσα στον Editor;

Η σύγχρονη ανάπτυξη λογισμικού απαιτεί συνεχή αλληλεπίδραση με το command line. Είτε πρόκειται να εγκαταστήσετε πακέτα μέσω npm, είτε να τρέξετε ένα Python script, είτε να κάνετε git commit, το terminal είναι το κέντρο ελέγχου. Το VS Code ενσωματώνει αυτήν την εμπειρία χωρίς να χρειάζεται να αλλάζετε παράθυρα.

Πατήστε Ctrl+` (backtick, συνήθως πάνω από το Tab). Το terminal εμφανίζεται στην κάτω περιοχή. Για να το κλείσετε, πατήστε ξανά τον ίδιο συνδυασμό. Με Ctrl+Shift+` ανοίγετε νέο terminal tab. Μπορείτε να έχετε όσα tabs θέλετε.

Βασικές Εντολές για Αρχάριους

Αν είστε εντελώς καινούριοι στο terminal, ορίστε οι πιο χρήσιμες εντολές:

# Εμφάνιση τρέχοντος φακέλου (Print Working Directory)
pwd

# Λίστα αρχείων (List) - Mac/Linux
ls
ls -la   # Λεπτομερής λίστα με κρυφά αρχεία

# Λίστα αρχείων - Windows (CMD)
dir

# Αλλαγή φακέλου (Change Directory)
cd onoma-fakelou
cd ..    # Ένα επίπεδο πάνω
cd ~     # Αρχικός φάκελος χρήστη (Home)

# Δημιουργία φακέλου
mkdir neo-project

# Δημιουργία κενού αρχείου - Mac/Linux
touch arxeio.txt

# Δημιουργία κενού αρχείου - Windows
copy nul arxeio.txt

# Διαγραφή αρχείου - Mac/Linux
rm arxeio.txt

# Διαγραφή αρχείου - Windows
del arxeio.txt

# Άνοιγμα VS Code σε τρέχοντα φάκελο
code .

Debugging για Αρχάριους

Το debugging είναι η διαδικασία εύρεσης και διόρθωσης λαθών στον κώδικά σας. Υπάρχουν δύο τύποι λαθών: τα συντακτικά (syntax errors) που εντοπίζει ο compiler/interpreter και δεν σας αφήνουν να τρέξετε τον κώδικα, και τα λογικά (logical errors) όπου ο κώδικας τρέχει αλλά παράγει λάθος αποτέλεσμα.

Το VS Code περιλαμβάνει έναν ισχυρό debugger για JavaScript/TypeScript εξαρχής. Για άλλες γλώσσες (Python, C++, Java) χρειάζεστε το αντίστοιχο extension.

Βασική Ροή Debugging

1. Breakpoint: Κάντε κλικ στα αριστερά του αριθμού γραμμής (στην κόκκινη περιοχή). Εμφανίζεται ένα κόκκινο dot. Ο κώδικας θα σταματήσει εκεί όταν τρέξει.
2. Start Debugging: Πατήστε F5 ή πηγαίνετε Run > Start Debugging. Επιλέξτε το περιβάλλον (π.χ. Node.js για JavaScript, Python File για Python).
3. Έλεγχος: Όταν ο κώδικας "πιάσει" το breakpoint, η γραμμή επισημαίνεται. Μπορείτε να δείτε τις τιμές των μεταβλητών στο αριστερό panel (Variables), να τις προσθέσετε στο Watch για παρακολούθηση, και να ελέγξετε τη στοίβα κλήσεων (Call Stack).
4. Βήματα Εκτέλεσης:
   • F5 / Continue: Συνέχεια μέχρι το επόμενο breakpoint.
   • F10 / Step Over: Προχωράει μια γραμμή, χωρίς να μπει μέσα σε συναρτήσεις.
   • F11 / Step Into: Μπαίνει μέσα στη συνάρτηση της τρέχουσας γραμμής.
   • Shift+F11 / Step Out: Βγαίνει από τη συνάρτηση.
5. Τερματισμός: Πατήστε Shift+F5 για διακοπή.

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python: Τρέξιμο τρέχοντος αρχείου",
            "type": "debugpy",
            "request": "launch",
            "program": "${file}",
            "console": "integratedTerminal"
        }
    ]
}

8. Προσαρμογή (Customization)

Ένα από τα μεγαλύτερα πλεονεκτήματα του VS Code είναι ότι μπορείτε να το κάνετε δικό σας. Από την εμφάνιση μέχρι τη συμπεριφορά, σχεδόν τα πάντα μπορούν να τροποποιηθούν. Αυτό δεν είναι απλώς θέμα αισθητικής — μια σωστά διαμορφωμένη ρύθμιση μπορεί να βελτιώσει την παραγωγικότητά σας κατά 20-30%.

Αλλαγή Θεμάτων (Color Themes)

Ο τρόπος που βλέπετε τον κώδικά σας επηρεάζει την κούραση των ματιών και την αναγνωσιμότητα. Το VS Code περιλαμβάνει εξαρχής αρκετά themes. Πατήστε Ctrl+K Ctrl+T (ή Cmd σε Mac) για γρήγορη εναλλαγή. Τα πιο δημοφιλή built-in themes είναι:

• Dark+ (default dark): Το κλασικό σκούρο θέμα του VS Code.
• Dark Modern: Το νέο default από την έκδοση 1.78+.
• Light+: Για όσους προτιμούν φωτεινά περιβάλλοντα (ιδανικό για well-lit χώρους).
• High Contrast: Για μέγιστη προσβασιμότητα.

Μπορείτε να εγκαταστήσετε επιπλέον themes από το marketplace. Δημοφιλή εναλλακτικά: One Dark Pro, Dracula Official, Monokai Pro, Night Owl.

File Icon Theme

Τα εικονίδια βοηθούν στο καυτικό μάτι να ξεχωρίζει αρχεία. Όπως είπαμε, το Material Icon Theme είναι must-have. Για να το αλλάξετε, πατήστε Ctrl+Shift+P, γράψτε File Icon Theme και επιλέξτε.

Ρυθμίσεις μέσω settings.json

Οι ρυθμίσεις μπορούν να αλλάξουν μέσω UI (File > Preferences > Settings ή Ctrl+,), αλλά η επεξεργασία του settings.json δίνει απόλυτο έλεγχο. Δείτε ένα παράδειγμα ρυθμίσεων ιδανικό για αρχάριους:

{
    // ===== ΕΜΦΑΝΙΣΗ =====
    "workbench.colorTheme": "Dark Modern",
    "workbench.iconTheme": "material-icon-theme",
    "editor.fontSize": 15,
    "editor.fontFamily": "'Fira Code', 'Consolas', monospace",
    "editor.fontLigatures": true,
    
    // ===== ΣΥΜΠΕΡΙΦΟΡΑ =====
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 1000,
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    
    // ===== ΕΜΦΑΝΙΣΗ ΚΩΔΙΚΑ =====
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "editor.rulers": [80, 120],
    "editor.wordWrap": "on",
    "editor.minimap.enabled": true,
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": true,
    
    // ===== TERMINAL =====
    "terminal.integrated.fontSize": 14,
    "terminal.integrated.defaultProfile.windows": "PowerShell",
    
    // ===== EXPLORER =====
    "explorer.confirmDelete": false,
    "explorer.confirmDragAndDrop": false,
    "files.exclude": {
        "**/node_modules": true,
        "**/.git": true
    }
}

Ας εξηγήσουμε τις πιο σημαντικές από αυτές τις ρυθμίσεις:

• Auto Save: Η ρύθμιση "afterDelay" αποθηκεύει αυτόματα το αρχείο 1 δευτερόλεπτο μετά την παύση πληκτρολόγησης. Δεν θα χάσετε ποτέ δουλειά και ο Live Server θα ανανεώνεται χωρίς να πατάτε constant Ctrl+S.
• Format On Save: Συνδυάζεται με το Prettier. Κάθε save = τέλεια μορφοποίηση.
• Rulers: Οι κάθετες γραμμές στα 80 και 120 characters σας βοηθούν να μη γράφετε υπερβολικά μεγάλες γραμμές κώδικα, κάτι που είναι καλή πρακτική.
• Ligatures: Αν εγκαταστήσετε μια γραμματοσειρά που υποστηρίζει ligatures (π.χ. Fira Code, JetBrains Mono), αυτή η ρύθμιση μετατρέπει σειρές χαρακτήρων όπως => σε μοναδικά, typographic symbols, κάνοντας τον κώδικα πιο ευανάγνωστο.
• Bracket Pair Colorization: Χρωματίζει τα αντίστοιχα άγκιστρα/παρενθέσεις με το ίδιο χρώμα, κάτι που είναι σωτήριο σε deeply nested κώδικα.

9. Συμβουλές Παραγωγικότητας (Pro Tips)

Emmet: Η Μυστική Υπερδύναμη του Web Development

Το Emmet είναι ενσωματωμένο στο VS Code και σας επιτρέπει να γράφετε HTML με "μαθηματικές" συντομεύσεις. Πληκτρολογείτε μια συντόμευση, πατάτε Tab (ή Enter ανάλογα τις ρυθμίσεις), και ο κώδικας "εκρήγνυται" σε πλήρες markup.

/* Εισαγωγή:      div.container>ul>li*5 */
/* Αποτέλεσμα: */
<div class="container">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

/* Εισαγωγή:      nav>ul>li*3>a[href="#"]{Link $} */
/* Αποτέλεσμα: */
<nav>
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>
</nav>

/* Εισαγωγή:      .wrapper>.box*2>h2{Titlos $}+p{lorem ipsum} */
/* Παράγει δομή με 2 boxes, καθένα με h2 και p */

Οι τελεστές του Emmet είναι διαισθητικοί:

• > Παιδί (child)
• + Αδελφός (sibling)
• * Πολλαπλασιασμός (multiplication)
• . Class
• # ID
• [] Attributes
• {} Text content
• $ Αρίθμηση (numbering)
• () Ομαδοποίηση (grouping)

Split Editor (Παράλληλη Προβολή)

Όταν εργάζεστε με HTML και CSS, είναι εξαιρετικά βολικό να βλέπετε και τα δύο αρχεία ταυτόχρονα. Κάντε δεξί κλικ σε ένα tab και επιλέξτε Split Right. Το αρχείο χωρίζεται οπτικά. Μπορείτε να έχετε μέχρι και 3 στήλες (ή και περισσότερες αν έχετε ultrawide monitor).

Συντομεύσεις για split: Ctrl+\ χωρίζει τον τρέχοντα editor. Ctrl+1, Ctrl+2, Ctrl+3 σας επιτρέπουν να μετακινείστε μεταξύ των editor groups.

Go to Symbol & Go to Definition

Σε μεγάλα αρχεία, μην κυλάτε ατελείωτα. Πατήστε Ctrl+Shift+O για να δείτε όλα τα σύμβολα (μεταβλητές, συναρτήσεις, κλάσεις) του τρέχοντος αρχείου. Πατήστε Ctrl+T για καθολική αναζήτηση συμβόλων σε όλο το project.

Η πιο χρήσιμη συντόμευση είναι το Go to Definition: F12. Αν κλικάρετε πάνω σε μια συνάρτηση που κάλεστε, το VS Code σας πηγαίνει αυτόματα εκεί που ορίζεται.

Πολλαπλοί Κέρσορες (Multiple Cursors)

Το πιο "μαγικό" feature για μαζικές επεξεργασίες. Πατήστε Alt+Click (ή Option+Click σε Mac) σε όποια σημεία θέλετε να προσθέσετε κέρσορες. Ό,τι πληκτρολογήσετε θα εισαχθεί ταυτόχρονα σε όλα τα σημεία!

Εναλλακτικά, επιλέξτε μια λέξη και πατήστε επαναλαμβανόμενα Ctrl+D. Κάθε φορά επιλέγει την επόμενη εμφάνιση της ίδιας λέξης, επιτρέποντάς σας να τις αλλάξετε όλες μαζί. Αν θέλετε να επιλέξετε ΟΛΕΣ τις εμφανίσεις ταυτόχρονα, χρησιμοποιήστε Ctrl+Shift+L.

Προεπισκόπηση Markdown

Αν γράφετε τεκμηρίωση σε Markdown (αρχεία .md), πατήστε Ctrl+Shift+V για instant preview. Υπάρχει και η επιλογή split view (επεξεργασία αριστερά, preview δεξιά) με το εικονίδιο που υπάρχει πάνω δεξιά σε κάθε markdown αρχείο.

Προσαρμογή Snippets

Τα User Snippets σας επιτρέπουν να ορίσετε δικές σας συντομεύσεις. Πατήστε Ctrl+Shift+P, γράψτε "Configure User Snippets" και επιλέξτε τη γλώσσα. Π.χ. για JavaScript:

{
  "Console Log": {
    "prefix": "clog",
    "body": [
      "console.log('$1:', $1);"
    ],
    "description": "Log output to console"
  }
}

Πληκτρολογώντας clog και πατώντας Tab, το μπλοκ κώδικα εισάγεται αυτόματα, και ο κέρσορας τοποθετείται εκεί που υπάρχει το $1.

Επόμενα Βήματα

Ο οδηγός αυτός σας έδωσε τα εφόδια για να ξεκινήσετε. Η μάθηση ενός editor όμως δεν τελειώνει ποτέ — το VS Code εξελίσσεται συνεχώς. Κάθε μήνα κυκλοφορεί νέα έκδοση με βελτιώσεις.

Τα επόμενα βήματα που προτείνουμε είναι:

• Εξασκηθείτε στις 10 συντομεύσεις που μάθατε για μία εβδομάδα. Μετά προσθέστε άλλες 5.
• Δημιουργήστε το δικό σας portfolio project (π.χ. μια προσωπική σελίδα HTML/CSS) αποκλειστικά μέσα από το VS Code, χρησιμοποιώντας Live Server και Emmet.
• Μάθετε Git basics (init, add, commit, push) χρησιμοποιώντας το ενσωματωμένο Source Control panel.
• Δοκιμάστε το debugging σε μια γλώσσα που μαθαίνετε. Το να σταματάτε τον κώδικα γραμμή-γραμμή είναι εκπληκτικό εκπαιδευτικό εργαλείο.
• Διαβάστε το επίσημο documentation. Είναι από τα καλύτερα και πιο καλοδιατηρημένα docs στον κόσμο του software.