Πώς να ρυθμίσετε πιο όμορφο στον κώδικα του Visual Studio

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

Αλλά εδώ είναι το πρόβλημα: η μη αυτόματη μορφοποίηση κώδικα μπορεί να είναι απόλυτος πόνος και πολύ επιρρεπής σε σφάλματα. Εργαλεία όπως το Prettier κάνουν τη μορφοποίηση HTML, CSS, JavaScript και άλλων γλωσσών, πολύ πιο εύκολη. Ανακαλύψτε πώς να εγκαταστήσετε και να χρησιμοποιήσετε την επέκταση Prettier για μορφοποίηση κώδικα, καθώς και ορισμένες προηγμένες ρυθμίσεις διαμόρφωσης.

Εγκατάσταση Prettier

Πριν συνεχίσετε, βεβαιωθείτε ότι έχετε εγκαταστήσει το Node.js στον υπολογιστή σας. Μπορείτε να εγκαταστήσετε την πιο πρόσφατη έκδοση από το επίσημη σελίδα λήψεων Node.js

. Έρχεται με ο διαχειριστής πακέτων κόμβου (npm) ενσωματωμένο, το οποίο θα χρησιμοποιήσετε για τη διαχείριση των πακέτων Node.js.

Αφού επιβεβαιώσετε ότι το Node.js είναι εγκατεστημένο τοπικά, ξεκινήστε δημιουργώντας έναν κενό κατάλογο για το έργο σας. Μπορείτε να ονομάσετε τον κατάλογο πιο όμορφο-demo.

Στη συνέχεια, cd σε αυτόν τον κατάλογο χρησιμοποιώντας μια γραμμή εντολών και, στη συνέχεια, εκτελέστε την ακόλουθη εντολή για να αρχικοποιήσετε ένα έργο Node.js:

npm init -y

Αυτή η εντολή δημιουργεί ένα αρχείο package.json που περιέχει τις προεπιλεγμένες ρυθμίσεις.

Για να εγκαταστήσετε την επέκταση Prettier, εκτελέστε αυτήν την εντολή τερματικού:

npm i --save-dev πιο όμορφη

ο --save-dev Το flag εγκαθίσταται πιο όμορφο ως εξάρτηση από dev, που σημαίνει ότι χρησιμοποιείται μόνο κατά την ανάπτυξη.

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

Χρησιμοποιώντας το Prettier μέσω της γραμμής εντολών

Ξεκινήστε δημιουργώντας ένα script.js αρχείο και συμπληρώνοντάς το με τον ακόλουθο κώδικα:

λειτουργίαάθροισμα(α, β) { ΕΠΙΣΤΡΟΦΗ α + β }
συνθ χρήστης = { όνομα: "Kyle", ηλικία: 27,
 isProgrammer: αληθής,
 longKey: "Αξία",
 περισσότεραΔεδομένα: 3
}

Για να μορφοποιήσετε τον κώδικα σε αυτό το αρχείο script.js μέσω της γραμμής εντολών, εκτελέστε την ακόλουθη εντολή:

npx πιο όμορφο --write script.js

Η εντολή επαναμορφοποιεί τον κώδικα JavaScript στο script.js στο προεπιλεγμένο πρότυπο του Prettier. Αυτό θα είναι το αποτέλεσμα:

λειτουργίαάθροισμα(α, β) {
ΕΠΙΣΤΡΟΦΗ a + b;
}
συνθ χρήστης = {
 όνομα: "Kyle",
 ηλικία: 27,
 isProgrammer: αληθής,
 longKey: "Αξία",
 περισσότεραΔεδομένα: 3,
};

Μπορείτε επίσης να μορφοποιήσετε τη σήμανση HTML από τη γραμμή εντολών. Δημιουργήστε ένα index.html αρχείο στον ίδιο κατάλογο με script.js. Στη συνέχεια, επικολλήστε την ακόλουθη κακώς μορφοποιημένη HTML στο αρχείο:

"" alt=""τάξη="μεγάλο εικονίδιο καιρού">

τάξη="currentHeaderTemp"><σπιθαμή>21σπιθαμή></div>
</div>
 </header>

Για να μορφοποιήσετε το HTML, εκτελέστε αυτήν την εντολή:

npx πιο όμορφο --write index.html

Αυτή η εντολή επαναμορφοποιεί το HTML στο προεπιλεγμένο πρότυπο του Prettier, το οποίο έχει ως αποτέλεσμα τον ακόλουθο κώδικα:

<επί κεφαλής>
<div>
<imgsrc=""alt=""τάξη="μεγάλο εικονίδιο καιρού" />
<divτάξη="currentHeaderTemp"><σπιθαμή>21σπιθαμή>div>
div>
επί κεφαλής>

Μπορείτε επίσης να χρησιμοποιήσετε το --έλεγχος επισημάνετε για να ελέγξετε εάν ο κωδικός συμμορφώνεται με τα πρότυπα του Prettier. Το ακόλουθο παράδειγμα ελέγχει script.js:

npx πιο όμορφο -- ελέγξτε το script.js

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

Ενσωμάτωση του Prettier στον κώδικα του Visual Studio

Η χρήση του Prettier μέσω της γραμμής εντολών μπορεί να είναι επώδυνη. Αντί να εκτελείτε μη αυτόματα μια εντολή κάθε φορά που θέλετε να μορφοποιήσετε τον κώδικα, μπορείτε να τη ρυθμίσετε ώστε να μορφοποιείται αυτόματα όταν αλλάζετε ένα αρχείο. Ευτυχώς, ο κώδικας του Visual Studio (VS Code) έχει έναν ενσωματωμένο τρόπο για να το κάνει αυτό για εσάς.

μεταβείτε στο Επεκτάσεις καρτέλα στο VS Code και αναζητήστε Ομορφότερος. Κάντε κλικ στο Prettier - Μορφοποιητής κώδικα, εγκαταστήστε το και μετά ενεργοποιήστε το.

Μεταβείτε στις ρυθμίσεις του VS Code μεταβαίνοντας στο Αρχείο > Προτιμήσεις > Ρυθμίσεις. Στο πλαίσιο αναζήτησης, αναζητήστε Ομορφότερος. Θα βρείτε πολλές επιλογές που θα σας βοηθήσουν να διαμορφώσετε την επέκταση Prettier.

Συνήθως, μπορείτε να τα βγάλετε πέρα ​​με τις προεπιλεγμένες ρυθμίσεις. Το μόνο πράγμα που μπορείτε να σκεφτείτε να αλλάξετε είναι τα ερωτηματικά (μπορείτε να τα αφαιρέσετε αν θέλετε). Διαφορετικά, όλα έχουν οριστεί ως προεπιλογή, αλλά μπορείτε να τα αλλάξετε όπως θέλετε.

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

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

Πώς να αγνοήσετε αρχεία κατά τη μορφοποίηση με πιο όμορφο

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

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

Μπορείτε επίσης να αγνοήσετε αρχεία με συγκεκριμένη επέκταση. Για παράδειγμα, εάν θέλετε να αγνοήσετε όλα τα αρχεία HTML, απλώς προσθέστε *.html προς την .prettierignore.

Πώς να ρυθμίσετε το Prettier

Μπορείτε να διαμορφώσετε τον τρόπο με τον οποίο θέλετε να λειτουργεί ο Prettier με διαφορετικές επιλογές. Ένας τρόπος είναι να προσθέσετε ένα πιο όμορφο κλειδί για σας πακέτο.json αρχείο. Η τιμή θα είναι ένα αντικείμενο που περιέχει όλες τις επιλογές διαμόρφωσης:

{
 ...
"σενάρια": {
"δοκιμή": "echo \"Σφάλμα: δεν καθορίστηκε δοκιμή\" && έξοδος 1"
 },
 πιο όμορφο: {
// οι επιλογές πηγαίνουν εδώ
 }
}

Η δεύτερη επιλογή (την οποία προτείνουμε) είναι να δημιουργήσετε ένα .prettierrc αρχείο. Αυτό το αρχείο θα σας επιτρέψει να κάνετε κάθε είδους προσαρμογές.

Ας πούμε ότι δεν σας αρέσουν τα ερωτηματικά. Μπορείτε να τα αφαιρέσετε τοποθετώντας το ακόλουθο αντικείμενο στο αρχείο:

{
"ημι": αληθής,
"παρακάμπτει": [
 {
"αρχεία": ".ts",
"επιλογές": {
"ημι": ψευδής
 }
 }
 ]
}

ο υπερισχύει Η ιδιότητα σάς επιτρέπει να ορίζετε προσαρμοσμένες παρακάμψεις για ορισμένα αρχεία ή επεκτάσεις αρχείων. Σε αυτήν την περίπτωση, λέμε ότι όλα τα αρχεία που τελειώνουν σε .τσ (δηλαδή, τα αρχεία πληκτρολογίου) δεν πρέπει να έχουν ερωτηματικά.

Χρήση του Prettier With ESLint

Το ESLint είναι ένα εργαλείο για τον εντοπισμό σφαλμάτων στον κώδικα JavaScript καθώς και για τη μορφοποίησή του. Εάν χρησιμοποιείτε το Prettier, πιθανότατα δεν θα θέλατε να χρησιμοποιήσετε το ESLint και για μορφοποίηση. Για να τα χρησιμοποιήσετε μαζί, θα χρειαστεί να εγκαταστήσετε και να ρυθμίσετε eslint-config-prettier. Αυτό το εργαλείο απενεργοποιεί όλες τις διαμορφώσεις ESLint για πράγματα που χειρίζεται ήδη ο Prettier.

Πρώτα, πρέπει να το εγκαταστήσετε:

npm i --save-dev eslint-config-prettier

Στη συνέχεια, προσθέστε το στη λίστα επεκτάσεων στο .eslintrc αρχείο (βεβαιωθείτε ότι είναι το τελευταίο πράγμα στη λίστα):

{
"επεκτείνεται": [
"some-other-config-you-use",
"ομορφότερο"
 ],
"κανόνες": {
"δαντελώνω": "λάθος"
 }
}

Τώρα το ESLint θα απενεργοποιήσει όλους τους κανόνες που ήδη φροντίζει ο Prettier για την αποφυγή συγκρούσεων.

Καθαρίστε το Codebase σας με πιο όμορφο και ESLint

Το Prettier είναι ένα ιδανικό εργαλείο για τον καθαρισμό του κώδικά σας και την επιβολή συνεπούς μορφοποίησης σε ένα έργο. Η ρύθμιση του να λειτουργεί με τον Κώδικα VS σημαίνει ότι είναι πάντα προσιτός.

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