Καλύτερος κώδικας για τον Vue.js

Με όλο και περισσότερους επεξεργαστές κώδικα ποιότητας για να διαλέξετε, μπορεί να αναρωτιέστε τι είναι ο καλύτερος επεξεργαστής κώδικα για το Vue.js. Μερικοί προγραμματιστές είναι τόσο αφοσιωμένοι στους συντάκτες τους, όσο και στις πολιτικές τους πεποιθήσεις, έτσι θα λάβετε διαφορετικές απαντήσεις, ανάλογα με το ποιον ζητάτε.

Αλλά όταν πρόκειται για την κωδικοποίηση στο Vue, ένας από τους καλύτερους ανθρώπους που πρέπει να ρωτήσετε είναι ο Evan You, ο δημιουργός του Vue. Τι χρησιμοποιεί λοιπόν; Κώδικας Visual Studio.

Σε μια συνέντευξη, ρωτήθηκε για το θέμα και απάντησε:

... Έχω μεταβεί πέρα ​​δώθε μέχρι πρόσφατα άρχισα να χρησιμοποιώ το TypeScript και επειδή ο VS Code TypeScript είναι τόσο καλός, έχω αλλάξει (μόνιμα) στον κώδικα VS.

Ενώ το Vue δεν απαιτεί τη χρήση του TypeScript, ο πηγαίος κώδικας του θα γραφτεί σύντομα σε αυτό, όπως καλύφθηκε σε αυτή τη δημοσίευση στο Vue 3.0.

Μπορεί να σκέφτεστε ... Αλλά δεν δουλεύω στον πηγαίο κώδικα και δεν κωδικοποιώ το Vue με το TypeScript, είναι ο VS Code ακόμα σχετικός για μένα;

Αυτό με φέρνει στο θέμα του Vetur, η οποία είναι μια πλούσια σε χαρακτηριστικά επέκταση που σας δίνει τα πράγματα όπως η σύνταξη - επισήμανση σε αρχεία .vue, αποσπάσματα, χάραξη, έλεγχος σφαλμάτων και μορφοποίηση, καθώς και αυτόματη συμπλήρωση και εντοπισμός σφαλμάτων. Σε αυτό το σημείο είναι η καλύτερη επέκταση Vue για έναν επεξεργαστή κώδικα. Και πρέπει να είναι, επειδή αναπτύχθηκε από τον Pine Wu, ο οποίος είναι μέλος της κεντρικής ομάδας Vue.

Έτσι αν ενδιαφέρεστε να χρησιμοποιήσετε την ανάπτυξη του VS Code for Vue (ή είστε ήδη), μπορείτε να ακολουθήσετε παρακάτω καθώς σας δείχνω πώς να βελτιστοποιήσετε τον κώδικα VS.

Τι θα μάθουμε;

Θα μάθουμε πώς να:

  • Αποκτήστε την επισήμανση σύνταξης στα αρχεία .vue
  • Χρησιμοποιήστε αποσπάσματα κώδικα για ταχύτερη ροή εργασίας
  • Διαμορφώστε τον επεξεργαστή μας για να διαμορφώσετε αυτόματα τον κώδικα
  • Και να εξερευνήσετε άλλες χρήσιμες επεκτάσεις που θα βελτιώσουν την εμπειρία ανάπτυξης

Εγκατάσταση του Vetur

Υπάρχουν πολλά χαρακτηριστικά που καθιστούν τον κώδικα VS ένα εξαιρετικό περιβάλλον για την ανάπτυξη του Vue, συμπεριλαμβανομένου του Vetur, ένα plugin που σχεδιάστηκε από την Pine Wu, βασικό μέλος της ομάδας Vue.js.

Εδώ στον κώδικα VS, αν ανοίξουμε ένα αρχείο .vue, όπως αυτό το αρχείο About.vue, βλέπουμε όλο αυτό το γκρι κωδικό. Αυτό συμβαίνει επειδή ο κώδικας VS δεν θα επισημάνει αυτόματα τη σύνταξη σε αρχεία .vue.

Το Vetur μπορεί να το διορθώσει για εμάς και να μας δώσει άλλα χαρακτηριστικά που έχουν σχεδιαστεί για να βελτιώσουν την εμπειρία των προγραμματιστών.

Ας το εγκαταστήσουμε τώρα. Ανοίξτε το κατάστημα επεκτάσεων.

Στη συνέχεια, αναζητήστε το "Vetur", επιλέξτε το στα αποτελέσματα αναζήτησης και κάντε κλικ στην επιλογή Εγκατάσταση. Στη συνέχεια, κάντε κλικ στην επιλογή Επαναφόρτωση.

Χαρακτηριστικά του Vetur

Τώρα που είναι εγκατεστημένο το Vetur, ας ρίξουμε μια ματιά στα χαρακτηριστικά του.

Σκιαγράφηση σύνταξης Πληκτρολογώντας την εντολή + P και πληκτρολογώντας το όνομα ενός αρχείου .vue, μπορούμε να ανοίξουμε το αρχείο About.vue. Όπως μπορείτε να δείτε, τώρα ο κώδικας μας παίρνει σωστή επισήμανση σύνταξης. Awesome - δεν υπάρχει γκρι κωδικός.

Ελέγχοντας το αρχείο Home.vue, μπορούμε να δούμε ότι η JavaScript μας επισημαίνεται επίσης σωστά.

Αποσπάσματα Μια άλλη λειτουργία Το Vetur έρχεται συσκευασμένο με τα αποσπάσματα κώδικα του. Πρόκειται για "αποσπάσματα" κώδικα του κώδικα που σας επιτρέπουν να δημιουργείτε γρήγορα κομμάτια κώδικα που χρησιμοποιούνται συχνά.

Ας δημιουργήσουμε ένα νέο στοιχείο για να το δούμε αυτό στην πράξη. Θα ονομάσουμε το EventCard.vue. Τώρα, αν πληκτρολογήσουμε τη λέξη "ικρίωμα" σε ένα αρχείο .vue και πατήσετε ENTER, αυτό θα γεμίσει αυτόματα το αρχείο με τον σκελετό ή το ικρίωμα ενός μόνο αρχείου .vue.

Ο Emmet Vetur έρχεται επίσης συσκευασμένος με τον Emmet. Αυτό είναι ένα δημοφιλές εργαλείο που σας επιτρέπει να χρησιμοποιήσετε συντομεύσεις για να δημιουργήσετε τον κωδικό σας.

Για παράδειγμα, μπορούμε να πληκτρολογήσουμε h1 και να πατήσουμε enter, και αυτό θα δημιουργήσει ένα στοιχείο h1 ανοίγματος και κλεισίματος.

Όταν πληκτρολογούμε κάτι πιο περίπλοκο, όπως div> ul> li, θα παράγει:

        
                
  •              

Αν ο Emmet δεν φαίνεται να δουλεύει για εσάς, μπορείτε να το προσθέσετε στις Ρυθμίσεις χρήστη:

"emmet.includeLanguages": {
          "vue": "html"
      },

Για να μάθετε περισσότερα σχετικά με το πώς η Emmet μπορεί να επιταχύνει την εξέλιξή σας, πηγαίνετε εδώ.

Εγκατάσταση του ESLint & Prettier

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

Ρύθμιση του ESLint

Τώρα που αυτά είναι εγκατεστημένα, πρέπει να προσθέσουμε λίγο επιπλέον διαμόρφωση σε αυτά.

Όταν δημιουργήσαμε το έργο μας από το τερματικό, επιλέξαμε να το δημιουργήσουμε με ειδικά αρχεία ρυθμίσεων, τα οποία μας έδωσαν αυτό το αρχείο .eslintrc.js, όπου μπορούμε να διαμορφώσουμε το ESLint για αυτό το έργο. Εάν δεν επιλέξαμε ειδικά αρχεία, θα βρούσαμε τις διαμορφώσεις του ESLint στο πακέτο μας.

Έτσι, στο αρχείο .eslintrc.js, θα προσθέσουμε:

'plugin: πιο όμορφη / συνιστώμενη'

Αυτό θα επιτρέψει την υποστήριξη του Prettier στο ESLint με τις προεπιλεγμένες ρυθμίσεις.

Έτσι, το αρχείο μας τώρα μοιάζει με αυτό:

module.exports = {
      root: true,
      env: {
        κόμβος: αληθής
      },
      'εκτείνεται': [
        'plugin: vue / essential',
        'plugin: prettier / recommended', // προσθέσαμε αυτή τη γραμμή
        '@ vue / prettier'
      ],
      κανόνες: {
        'no-console': process.env.NODE_ENV === 'παραγωγή'; 'σφάλμα': 'εκτός',
        'no-debugger': process.env.NODE_ENV === 'παραγωγή'; 'error': 'off'
      },
      parserOptions: {
        αναλυτής: 'babel-eslint'
      }}
    }}

Ρύθμιση του Prettier

Έχουμε επίσης τη δυνατότητα να δημιουργήσουμε ένα αρχείο ρυθμίσεων Prettier, για να προσθέσουμε κάποιες ειδικές ρυθμίσεις σύμφωνα με το προσωπικό στυλ ή τις προτιμήσεις της ομάδας μας.

Θα το δημιουργήσουμε εδώ και θα το ονομάσουμε .prettierrc.js.

Και μέσα, θα πληκτρολογήσουμε:

module.exports = {
        singleQuote: true,
        ημι: ψευδής
    }}

Αυτό θα μετατρέψει τα διπλά εισαγωγικά σε απλά εισαγωγικά και θα βεβαιωθείτε ότι δεν έχουν εισαχθεί αυτόματα τα ερωτηματικά.

Ρυθμίσεις χρήστη

Για να βελτιστοποιήσουμε περαιτέρω τον κώδικα VS για μια μεγάλη εμπειρία ανάπτυξης, θα προσθέσουμε κάποιες διαμορφώσεις στις Ρυθμίσεις Χρήστη μας. Για να αποκτήσετε πρόσβαση στις Ρυθμίσεις χρήστη, κάντε κλικ στον Κωδικό στην επάνω γραμμή πλοήγησης, στη συνέχεια στις Προτιμήσεις και, στη συνέχεια, στις Ρυθμίσεις. Αυτό θα εμφανίσει ένα παράθυρο ρυθμίσεων χρήστη όπου μπορείτε να προσθέσετε ρυθμίσεις στο json.

Πρώτον, θέλουμε να προσθέσουμε:

"vetur.validation.template": ψευδής

Αυτό θα απενεργοποιήσει τη λειτουργία χνούδι Vetur. Θα βασιζόμαστε αντ 'αυτού σε ESLint + Prettier.

Τώρα θέλουμε να πούμε στο ESLint ποιες γλώσσες θέλουμε να επικυρώσει (vue, html και javascript) και να ορίσετε το autoFix σε αληθινό σε κάθε:

"eslint.validate": [
        {
            "γλώσσα": "vue",
            "autoFix": true
        },
        {
            "γλώσσα": "html",
            "autoFix": true
        },
        {
            "γλώσσα": "javascript",
            "autoFix": true
        }}
    ],

Στη συνέχεια, για καλό μέτρο, θα πούμε στο ESLint να επιστρέψει αυτόματα.

"eslint.autoFixOnSave": true,

Και πείτε στον επεξεργαστή μας να formatOnSave.

"editor.formatOnSave": true,

Δοκιμάζοντας το

Για να ελέγξουμε ότι αυτό λειτουργεί, θα προσθέσουμε εδώ μια ιδιότητα δεδομένων στο στοιχείο του EventCard και θα προσθέσουμε ένα απόσπασμα: "Θέλω να είμαι μόνος" τότε θα ρίξουμε και ένα ερωτηματικό εδώ. Όταν χτυπάμε την αποθήκευση, τα αποσπάσματα μας μετατρέπονται σε μοναδικά αποσπάσματα και το ερωτηματικό έχει αφαιρεθεί. Φοβερός - λειτουργεί.

Πρόσθετα εργαλεία

Τώρα ας ρίξουμε μια ματιά σε κάποια επιπλέον εργαλεία που μπορούν να βοηθήσουν στην επιτάχυνση της ανάπτυξής σας.

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

Ας το αναζητήσουμε, να το εγκαταστήσουμε και στη συνέχεια να το δούμε στη δράση.

Στο αρχείο μας Home.vue, βλέπουμε ότι υπάρχει σχετική διαδρομή εδώ, όπου εισάγουμε το στοιχείο HelloWorld.

Προκειμένου να αποκτήσουμε τη σχετική διαδρομή ενός αρχείου που θέλουμε να εισαγάγουμε, είχαμε κάνει δεξί κλικ στο αρχείο και, στη συνέχεια, επιλέξτε Αντιγραφή σχετικής διαδρομής. Τώρα, όταν επικολλάμε αυτό που αντιγράψαμε, βλέπουμε ότι έχουμε την ακριβή σχετική πορεία. Παρατηρήστε αυτό το src. Το σχόλιο εδώ μας επιτρέπει να γνωρίζουμε ότι λόγω του τρόπου με τον οποίο έχει ρυθμιστεί το σχέδιό μας, μπορούμε να χρησιμοποιήσουμε το @ αντί.

Ενσωματωμένο τερματικό Ένα βολικό ενσωματωμένο χαρακτηριστικό του επεξεργαστή κώδικα VS είναι το ολοκληρωμένο του τερματικό, το οποίο μπορείτε να χρησιμοποιήσετε αντί να μεταβείτε στον ξεχωριστό τερματικό σας. Μπορείτε να το ανοίξετε με τη συντόμευση πληκτρολογίου: `ctrl +` `

Περισσότερα αποκόμματα Εάν ενδιαφέρεστε να εγκαταστήσετε κάποια επιπλέον εύχρηστα αποσπάσματα κώδικα, μπορείτε να κάνετε λήψη μιας πλήρους σουίτας από τα αποσπάσματα Vue VSCode, τα οποία δημιουργήθηκαν από τη Sarah Drasner μέλος της ομάδας Core Vue.

Ας αναζητήσουμε την επέκταση με το όνομά της, sarah.drasner. Να τα. Τώρα μπορούμε να εγκαταστήσουμε και να φορτώσουμε ξανά.

Ας ρίξουμε μια ματιά σε αυτά στη δράση.

Αν πληκτρολογήσουμε vif σε ένα στοιχείο στο πρότυπό μας, αυτό θα μας δώσει μια δήλωση v-if και η πληκτρολόγηση του von θα μας δώσει έναν πλήρη χειριστή συμβάντων. Αντί να πληκτρολογούμε με μη αυτόματο τρόπο μια ιδιότητα δεδομένων, μπορούμε απλά να πληκτρολογήσουμε vdata που θα δημιουργήσει ένα για εμάς. Μπορούμε να κάνουμε το ίδιο πράγμα για να προσθέσουμε στηρίγματα με vprops. Μπορούμε ακόμη να το χρησιμοποιήσουμε για να δημιουργήσουμε τον κώδικα για να εισάγουμε γρήγορα ένα βιβλιοθήκη, με το vimport-lib. Όπως μπορείτε να δείτε, αυτά είναι πολύ χρήσιμα και αποσπάσματα εξοικονόμησης χρόνου.

Λάβετε υπόψη ότι αν χρησιμοποιείτε αυτήν την επέκταση των Αποκομμάτων, συνιστάται να προσθέσετε μια γραμμή στις Ρυθμίσεις χρήστη σας:

vetur.completion.useScaffoldSnippets πρέπει να είναι ψευδές

Αυτό θα διασφαλίσει ότι αυτά τα αποσπάσματα δεν έρχονται σε σύγκρουση με τα Vetur's.

Χρώμα Θέματα Τέλος, εάν αναρωτιέστε πώς να αλλάξετε το θέμα σας στον κώδικα VS ή εάν αναρωτιέστε ποια από αυτές χρησιμοποιώ εδώ, μπορείτε να μεταβείτε στο Code> Preferences> Color Theme.

Όπως μπορείτε να δείτε, χρησιμοποιώ FlatUI Dark. Μπορείτε να αλλάξετε το χρώμα του θέματος σας σε οποιαδήποτε από αυτές τις επιλογές ή μπορείτε να αναζητήσετε άλλα θέματα στο κατάστημα επεκτάσεων.

Εάν δεν βλέπετε κάποιον που θέλετε, μπορείτε επίσης να κατευθυνθείτε στο Visual Studio Marketplace online. Εδώ μπορείτε να δείτε τους τόνους των διαφόρων plugin και θεμάτων, όπως η Night Owl από τη φίλη μας Sarah Drasner. Μπορείτε να το εγκαταστήσετε απευθείας από το πρόγραμμα περιήγησης και στη συνέχεια να το βρείτε στις προτιμήσεις σας για θέματα χρώματος.

Συνεχίστε τη μάθηση

Για να συνεχίσετε να μαθαίνετε μαζί μου, μπορείτε να πάρετε το πλήρες μάθημα Real World Vue, στο VueMastery.com.