msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '5fdfe04c9e'
${ noResults }
Web-Dev-For-Beginners/translations/el/8-code-editor/1-using-a-code-editor/README.md

13 KiB
Raw Blame History Escape

Χρήση ενός Επεξεργαστή Κώδικα: Κατακτώντας το VSCode.dev

Καλώς ήρθατε!
Αυτό το μάθημα σας καθοδηγεί από τα βασικά έως τη προχωρημένη χρήση του VSCode.dev—του ισχυρού, διαδικτυακού επεξεργαστή κώδικα. Θα μάθετε πώς να επεξεργάζεστε κώδικα με αυτοπεποίθηση, να διαχειρίζεστε έργα, να παρακολουθείτε αλλαγές, να εγκαθιστάτε επεκτάσεις και να συνεργάζεστε σαν επαγγελματίας—όλα από τον περιηγητή σας, χωρίς να απαιτείται εγκατάσταση.

Στόχοι Μάθησης

Μέχρι το τέλος αυτού του μαθήματος, θα μπορείτε:

  • Να χρησιμοποιείτε αποτελεσματικά έναν επεξεργαστή κώδικα σε οποιοδήποτε έργο, οπουδήποτε
  • Να παρακολουθείτε τη δουλειά σας με ενσωματωμένο έλεγχο εκδόσεων
  • Να εξατομικεύετε και να βελτιώνετε τη ροή εργασίας ανάπτυξης με προσαρμογές και επεκτάσεις του επεξεργαστή

Προαπαιτούμενα

Για να ξεκινήσετε, εγγραφείτε για έναν δωρεάν λογαριασμό GitHub, ο οποίος σας επιτρέπει να διαχειρίζεστε αποθετήρια κώδικα και να συνεργάζεστε παγκοσμίως. Αν δεν έχετε λογαριασμό ακόμα, δημιουργήστε έναν εδώ.

Γιατί να Χρησιμοποιήσετε έναν Διαδικτυακό Επεξεργαστή Κώδικα;

Ένας επεξεργαστής κώδικα όπως το VSCode.dev είναι το κέντρο ελέγχου σας για τη συγγραφή, επεξεργασία και διαχείριση κώδικα. Με ένα διαισθητικό περιβάλλον, πληθώρα λειτουργιών και άμεση πρόσβαση μέσω του περιηγητή, μπορείτε:

  • Να επεξεργάζεστε έργα σε οποιαδήποτε συσκευή
  • Να αποφεύγετε την ταλαιπωρία των εγκαταστάσεων
  • Να συνεργάζεστε και να συνεισφέρετε άμεσα

Μόλις εξοικειωθείτε με το VSCode.dev, θα είστε έτοιμοι να αντιμετωπίσετε εργασίες προγραμματισμού από οπουδήποτε, οποιαδήποτε στιγμή.

Ξεκινώντας με το VSCode.dev

Μεταβείτε στο VSCode.dev—χωρίς εγκατάσταση, χωρίς λήψεις. Η σύνδεση με το GitHub ξεκλειδώνει πλήρη πρόσβαση, συμπεριλαμβανομένου του συγχρονισμού των ρυθμίσεων, των επεκτάσεων και των αποθετηρίων σας. Αν σας ζητηθεί, συνδέστε τον λογαριασμό σας στο GitHub.

Αφού φορτώσει, ο χώρος εργασίας σας θα μοιάζει με αυτόν:

![Default VSCode.dev](../images/default-vscode-dev έχει τρία βασικά τμήματα από αριστερά προς τα δεξιά:

  • Γραμμή δραστηριοτήτων: Τα εικονίδια όπως 🔎 (Αναζήτηση), ⚙️ (Ρυθμίσεις), αρχεία, έλεγχος πηγαίου κώδικα κ.λπ.
  • Πλευρική γραμμή: Αλλάζει το περιεχόμενο ανάλογα με το εικονίδιο της γραμμής δραστηριοτήτων που επιλέγεται (προεπιλογή στο Explorer για προβολή αρχείων).
  • Περιοχή επεξεργασίας/κώδικα: Το μεγαλύτερο τμήμα στα δεξιά—όπου θα επεξεργάζεστε και θα βλέπετε τον κώδικα.

Κάντε κλικ στα εικονίδια για να εξερευνήσετε τις λειτουργίες, αλλά επιστρέψτε στο Explorer για να διατηρήσετε τη θέση σας.

Άνοιγμα ενός Αποθετηρίου GitHub

Μέθοδος 1: Από τον Επεξεργαστή

  1. Μεταβείτε στο VSCode.dev. Κάντε κλικ στο "Open Remote Repository."

    ![Open remote repository](../../../../8-code-editor/images/open-remote-repository χρησιμοποιήστε το Command Palette (Ctrl-Shift-P ή Cmd-Shift-P σε Mac).

    ![Palette Menu](../images/palette-menu.pngopen remote repository.”

    • Επιλέξτε την επιλογή.
    • Επικολλήστε τη διεύθυνση URL του αποθετηρίου GitHub σας (π.χ., https://github.com/microsoft/Web-Dev-For-Beginners) και πατήστε Enter.

Αν είναι επιτυχές, θα δείτε ολόκληρο το έργο φορτωμένο και έτοιμο για επεξεργασία!

Μέθοδος 2: Άμεσα μέσω URL

Μετατρέψτε οποιαδήποτε διεύθυνση URL αποθετηρίου GitHub ώστε να ανοίγει απευθείας στο VSCode.dev αντικαθιστώντας το github.com με vscode.dev/github.
Π.χ.:

  • 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 αλλαγές κάνοντας κλικ στο + δίπλα στα αρχεία για προετοιμασία για δέσμευση.
  • Απορρίψτε ανεπιθύμητες αλλαγές κάνοντας κλικ στο εικονίδιο αναίρεσης.
  • Πληκτρολογήστε ένα σαφές μήνυμα δέσμευσης και στη συνέχεια κάντε κλικ στο σημάδι επιλογής για δέσμευση και ώθηση.

Για να επιστρέψετε στο αποθετήριο σας στο GitHub, επιλέξτε το μενού hamburger στην επάνω αριστερή γωνία.

![Stage & commit changes](../images/edit-vscode.dev Up with Extensions

Οι επεκτάσεις σας επιτρέπουν να προσθέσετε γλώσσες, θέματα, αποσφαλματωτές και εργαλεία παραγωγικότητας στο VSCode.dev—κάνοντας τη ζωή σας στον προγραμματισμό πιο εύκολη και διασκεδαστική.

Περιήγηση και Διαχείριση Επεκτάσεων

  • Κάντε κλικ στο Εικονίδιο Επεκτάσεων στη γραμμή δραστηριοτήτων.

  • Αναζητήστε μια επέκταση στο πλαίσιο 'Search Extensions in Marketplace'.

    ![Extension details](../images/extension-details:

    • Installed: Όλες οι επεκτάσεις που έχετε προσθέσει
    • Popular: Αγαπημένα της βιομηχανίας
    • Recommended: Προσαρμοσμένες στη ροή εργασίας σας

    ![View extensions](

1. Εγκατάσταση Επεκτάσεων

  • Εισάγετε το όνομα της επέκτασης στην αναζήτηση, κάντε κλικ σε αυτήν και δείτε τις λεπτομέρειες στον επεξεργαστή.

  • Πατήστε το μπλε κουμπί Εγκατάστασης στην πλευρική γραμμή ή στην κύρια περιοχή κώδικα.

    ![Install extensions](../images/install-extension 2. Εξατομίκευση Επεκτάσεων

  • Βρείτε την εγκατεστημένη επέκταση σας.

  • Κάντε κλικ στο Εικονίδιο Ρυθμίσεων → επιλέξτε Extension Settings για να προσαρμόσετε τις συμπεριφορές σύμφωνα με τις προτιμήσεις σας.

    ![Modify extension settings](../images/extension-settings 3. Διαχείριση Επεκτάσεων Μπορείτε:

  • Απενεργοποίηση: Να απενεργοποιήσετε προσωρινά μια επέκταση ενώ την κρατάτε εγκατεστημένη

  • Απεγκατάσταση: Να την αφαιρέσετε μόνιμα αν δεν τη χρειάζεστε πλέον

    Βρείτε την επέκταση, πατήστε το εικονίδιο Ρυθμίσεων και επιλέξτε ‘Disable’ ή ‘Uninstall,’ ή χρησιμοποιήστε τα μπλε κουμπιά στην περιοχή κώδικα.

Εργασία

Δοκιμάστε τις δεξιότητές σας: Δημιουργήστε έναν ιστότοπο βιογραφικού χρησιμοποιώντας το vscode.dev

Περαιτέρω Εξερεύνηση και Αυτοδιδασκαλία

Τώρα είστε έτοιμοι να προγραμματίσετε, να δημιουργήσετε και να συνεργαστείτε—από οπουδήποτε, σε οποιαδήποτε συσκευή, χρησιμοποιώντας το VSCode.dev!

Αποποίηση ευθύνης:
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης Co-op Translator. Παρόλο που καταβάλλουμε προσπάθειες για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.