Formatter JSX
Μορφοποιήστε στοιχεία React και άλλο JSX με αυτό το Formatter JSX. Επικολλήστε τον κώδικά σας και το εργαλείο τον αναλύει ως module JavaScript με JSX, εκτυπώνει το JavaScript με εσοχή δύο διαστημάτων και ελληνικά ερωτηματικά και διατάσσει τα στοιχεία JSX πολλών γραμμών, με τις ένθετες ετικέτες σε δικές τους γραμμές μέσα σε παρενθέσεις. Τα συντακτικά σφάλματα αναφέρονται, ώστε οι προγραμματιστές React να λαμβάνουν ευανάγνωστα στοιχεία για ελέγχους, αποσφαλμάτωση και τεκμηρίωση.
Συχνές ερωτήσεις
Πώς λειτουργεί το Formatter JSX;
Αρχικά αναλύει τον κώδικα ως λειτουργική μονάδα JavaScript με ενεργοποιημένο το JSX και τον εκτυπώνει με συνεπή μορφοποίηση. Στη συνέχεια, τα στοιχεία JSX τοποθετούνται με τους ίδιους κανόνες όπως στον Μορφοποιητή HTML, ώστε οι εμφωλευμένες ετικέτες block να εμφανίζονται σε ξεχωριστές γραμμές με εσοχή.
Πώς γράφονται τα πολυγραμμικά στοιχεία JSX;
Όταν ένα στοιχείο περιέχει θυγατρικά στοιχεία επιπέδου block, όπως div, section, p, ul ή h1, κάθε θυγατρικό στοιχείο τοποθετείται στη δική του γραμμή και όλο το στοιχείο περικλείεται σε παρενθέσεις. Τα στοιχεία που χωρούν σε μία γραμμή, όπως μια μεμονωμένη ετικέτα component, παραμένουν σε μία γραμμή.
Υποστηρίζονται τα fragments και τα components χωρίς κλείσιμο;
Ναι, τα fragments που γράφονται ως <> και </> και τα components χωρίς κλείσιμο, όπως το <Item key={1}/>, αναλύονται και διατηρούνται. Τα χαρακτηριστικά τους και οι εκφράσεις μέσα σε άγκιστρα αντιγράφονται όπως είναι γραμμένα.
Τι συμβαίνει με τα συντακτικά σφάλματα;
Ο αναλυτής διακόπτει τη λειτουργία του και το εργαλείο εμφανίζει το μήνυμα, για παράδειγμα ένα μη αναμενόμενο token, αντί να επιστρέψει μερικώς μορφοποιημένο κώδικα. Διορθώστε το σημείο που αναφέρεται και μορφοποιήστε ξανά.
Ποιο στυλ χρησιμοποιεί το μέρος JavaScript;
Τα blocks έχουν εσοχή δύο διαστημάτων, μία εντολή ανά γραμμή, κενά γύρω από τους τελεστές και ελληνικά ερωτηματικά στο τέλος των εντολών. Δεν υπάρχουν επιλογές αλλαγής του στυλ.
Διατηρούνται τα σχόλια;
Ναι, τα σχόλια γραμμής και block στο JavaScript διατηρούνται. Τα σχόλια μέσα στις εκφράσεις JSX παραμένουν μέσα στα άγκιστά τους.
Υποστηρίζει TypeScript σε αρχεία TSX;
Όχι, οι επισημειώσεις τύπων δεν αποτελούν μέρος της γραμματικής JSX που αναλύει αυτό το εργαλείο, επομένως το TSX με τύπους απορρίπτεται ως συντακτικό σφάλμα. Για κώδικα με τύπους, χρησιμοποιήστε τον Μορφοποιητή TypeScript.
Θα αλλάξει η μορφοποίηση τον τρόπο απόδοσης του component μου;
Το JavaScript απλώς επανεκτυπώνεται και η διάταξη JSX αλλάζει τα κενά μεταξύ στοιχείων block, τα οποία το React αγνοεί όταν βρίσκονται σε ξεχωριστές γραμμές. Ελέγξτε το ενσωματωμένο κείμενο δίπλα στις ετικέτες αν έχει σημασία η ακριβής απόσταση.
Γιατί το αποτέλεσμα περικλείεται σε πλαίσιο javascript;
Το JSX είναι επέκταση του JavaScript, επομένως το αποτέλεσμα επιστρέφεται ως block κώδικα Markdown με την ένδειξη javascript. Αντιγράψτε τις γραμμές ανάμεσα στους οριοθέτες στο αρχείο .jsx σας.
Πόσο μεγάλο μπορεί να είναι το component μου;
Έως 5 MB κώδικα ανά εκτέλεση· μεγαλύτερη είσοδος απορρίπτεται με σχετικό μήνυμα. Το αποτέλεσμα είναι ίδιο με την επιλογή JSX του Μορφοποιητή κώδικα.