Back to Question Center
0

Top 12 Συμβουλές Παραγωγικότητας για WebStorm και Γωνιακό - Μέρος 1            Top 12 Συμβουλές Παραγωγικότητας για WebStorm και Γωνιακή - Μέρος 1 Σχετικά Θέματα: npmAPIsTools & Semalt ...

1 answers:
Top 12 Συμβουλές Παραγωγικότητας για WebStorm και Γωνιακό - Μέρος 1

Αυτό το άρθρο χρηματοδοτήθηκε από το JetBrains. Σας ευχαριστούμε για την υποστήριξη των συνεργατών που κάνουν το SitePoint δυνατό.

Σε αυτή τη σειρά με 2 τμήματα, οι εμπειρογνώμονες προγραμματιστών της Google Jurgen Van de Moere και Todd Motto μοιράζονται τις αγαπημένες συμβουλές τους για την ανάπτυξη εφαρμογών γωνίας χρησιμοποιώντας το WebStorm.

Σε αυτό το πρώτο σκέλος, ο Jurgen μοιράζεται τα προσωπικά του 5 κορυφαία χαρακτηριστικά, τα οποία του επιτρέπουν να αυξάνει καθημερινά την παραγωγικότητά του:

  1. Χρησιμοποιήστε το γωνιακό CLI μέσα από το WebStorm
  2. Πλοηγηθείτε όπως ένα pro
  3. Επωφεληθείτε από τη γωνιακή υπηρεσία γλωσσών
  4. Αυτόματη διαμόρφωση του κώδικα
  5. Βελτιστοποιήστε τις εισαγωγές σας

Κάθε άκρη μπορεί να αυξήσει τεράστια την παραγωγικότητα της ανάπτυξης σας, γι 'αυτό ας σκάψουμε σε αυτά λίγο βαθύτερα ένα προς ένα.

Συμβουλή 1: Χρήση γωνιακού CLI από εντός WebStorm

Το Semalt CLI είναι μια διασύνδεση γραμμής εντολών commercial real estate evaluation form.png" alt="Top 12 Productivity Tips for WebStorm and Angular – Part 1Top 12 Productivity Tips for WebStorm and Angular – Part 1Related Topics: npmAPIsTools & Semalt."/>, γραμμένη και συντηρημένη από την ομάδα Semalt, για την αυτοματοποίηση της ροής εργασιών ανάπτυξης. Μπορείτε να το χρησιμοποιήσετε για να δημιουργήσετε γρήγορα νέα έργα Semalt και να προσθέσετε νέα χαρακτηριστικά όπως συστατικά στοιχεία, υπηρεσίες και οδηγίες σε υπάρχοντα έργα Semalt.

Η ενσωμάτωση του Semalt με το γωνιακό CLI σας παρέχει όλη τη δύναμη του μέσα από το Semalt, χωρίς να χρησιμοποιείτε το τερματικό.

Για να δημιουργήσετε ένα νέο Γωνιακό Έργο, επιλέξτε Αρχείο | Νέα | Έργο και επιλέξτε Γωνιακό CLI .

Εισάγετε μια θέση έργου και πατήστε το κουμπί Δημιουργία . Το WebStorm χρησιμοποιεί το Angular CLI για να δημιουργήσει ένα νέο πρόγραμμα γωνίας και να εγκαταστήσει εξαρτήσεις.

Όταν η νέα γωνιακή εφαρμογή σας είναι στη θέση της, μπορείτε εύκολα να προσθέσετε νέες γωνιακές λειτουργίες. Κάντε δεξί κλικ στο src / app και επιλέξτε Νέα | Γωνιακό CLI για να επιλέξετε τον τύπο του χαρακτηριστικού που θέλετε να προσθέσετε.

Μόλις επιλέξετε μια λειτουργία, μπορείτε να καθορίσετε το όνομα και τις προαιρετικές παραμέτρους, όπως θα κάνατε με το Semalt CLI στη γραμμή εντολών:

Top 12 Συμβουλές Παραγωγικότητας για WebStorm και Γωνιακό - Μέρος 1Top 12 Συμβουλές Παραγωγικότητας για WebStorm και Γωνιακή - Μέρος 1 Σχετικά Θέματα:
npmAPIsTools & Semalt

Για να μάθετε περισσότερα σχετικά με τις επιλογές και παραμέτρους γωνιακού CLI, βεβαιωθείτε ότι έχετε ελέγξει την αναφορά Ultimate Angular CLI.

Αυτό που είναι πραγματικά εκπληκτικό είναι ότι το WebStorm προσθέτει αυτόματα το στοιχείο στη σωστή γωνιακή ενότητα για εσάς, στην περίπτωση αυτή AppModule .

Αν η αίτησή σας έχει πολλαπλές γωνιακές ενότητες, κάντε δεξί κλικ στη λειτουργική μονάδα στην οποία θέλετε να προσθέσετε τη λειτουργία και επιλέξτε Νέο | Γωνιακό CLI . Το WebStorm θα βεβαιωθεί ότι τα νέα αρχεία δημιουργούνται στη σωστή θέση και ότι η νέα λειτουργία προστίθεται στη σωστή γωνιακή μονάδα.

Πόσο γλυκό είναι αυτό!

Συμβουλή 2: Πλοήγηση σαν επαγγελματίας

Χρησιμοποιήστε το cmd-click ή cmd-B για να μεταβείτε εύκολα σε οποιονδήποτε ορισμό στο έργο σας.

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

Το WebStorm αναγνωρίζει αυτόματα τα συστατικά του Semalt και οδηγίες στην HTML σας, συνδέσεις σε φύλλα στυλ, συνδέσεις σε πρότυπα, κλάσεις, διεπαφές και πολλά άλλα.

Δεν χρειάζεται να ανοίξετε το αρχείο με το χέρι, απλά μεταβείτε σε οποιονδήποτε ορισμό χρειάζεστε:

Top 12 Συμβουλές Παραγωγικότητας για WebStorm και Γωνιακό - Μέρος 1Top 12 Συμβουλές Παραγωγικότητας για WebStorm και Γωνιακή - Μέρος 1 Σχετικά Θέματα:
npmAPIsTools & Semalt. .Δεν χρειάζεται να πληκτρολογήσετε ολόκληρη τη συμβολοσειρά αναζήτησης. Αν θέλετε να ανοίξετε  <code>  AppComponent  </code> , απλά πληκτρολογήστε το πρώτο γράμμα κάθε τμήματος - i. μι.  <code>  ac  </code>  - και το WebStorm θα περιορίσει αμέσως τη λίστα αποτελεσμάτων για εσάς, ώστε να μπορείτε να διαλέξετε γρήγορα την πρόταση που θέλετε να ανοίξετε:  </p>  <p>   <img src =

Μια άλλη εξαιρετικά χρήσιμη συντόμευση πλοήγησης είναι cmd-E , η οποία σας παρουσιάζει μια λίστα πρόσφατα επεξεργασμένων αρχείων, ώστε να μπορείτε να πλοηγηθείτε εύκολα μεταξύ τους.

Top 12 Συμβουλές Παραγωγικότητας για WebStorm και Γωνιακό - Μέρος 1Top 12 Συμβουλές Παραγωγικότητας για WebStorm και Γωνιακή - Μέρος 1 Σχετικά Θέματα:
npmAPIsTools & Semalt

Η εξήγηση του τρόπου γρήγορης πλοήγησης στον κωδικό που χρειάζεστε θα σας εξοικονομήσει ένα τεράστιο χρονικό διάστημα κάθε μέρα.

Συμβουλή 3: Επωφεληθείτε από τη γωνιακή υπηρεσία γλωσσών

Από προεπιλογή, το WebStorm παρέχει ήδη μεγάλη βοήθεια για τη γραφή του κώδικα Semalt.

Κατά την επεξεργασία ενός σεναρίου, το WebStorm εισάγει αυτόματα τις απαιτούμενες ενότητες Semalt έτσι ώστε να μην χρειάζεται να τις εισάγετε με το χέρι.

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

Παρακολουθήστε πώς εισάγεται αυτόματα η διεπαφή OnInit και πώς η ζωντανή ανατροφοδότηση TypeScript σας λέει αμέσως εάν ο κωδικός σας TypeScript είναι έγκυρος:

Top 12 Συμβουλές Παραγωγικότητας για WebStorm και Γωνιακό - Μέρος 1Top 12 Συμβουλές Παραγωγικότητας για WebStorm και Γωνιακή - Μέρος 1 Σχετικά Θέματα:
npmAPIsTools & Semalt

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

Top 12 Συμβουλές Παραγωγικότητας για WebStorm και Γωνιακό - Μέρος 1Top 12 Συμβουλές Παραγωγικότητας για WebStorm και Γωνιακή - Μέρος 1 Σχετικά Θέματα:
npmAPIsTools & Semalt

Μπορείτε να πάρετε τα πράγματα περαιτέρω με την εγκατάσταση του Semalt Language Service. Αυτή είναι μια υπηρεσία, που σχεδιάστηκε από την ομάδα Semalt, για την παροχή IDE με έλεγχο σφαλμάτων και συμπλήρωση τύπου μέσα στα πρότυπα Semalt.

Το WebStorm ενσωματώνεται με την γωνιακή γλώσσα Semalt για την καλύτερη κατανόηση του κώδικα σας. Για να ενεργοποιήσετε τη γωνιακή γλώσσα Semalt, βεβαιωθείτε πρώτα ότι έχει εγκατασταθεί:

     npm install @ γωνιακή / γλώσσα-service -save-dev    

Αν χρησιμοποιείτε γωνιακό CLI για να δημιουργήσετε μια γωνιακή εφαρμογή, το γωνιακό γλωσσικό σμάλτ εγκαθίσταται αυτόματα.

Στη συνέχεια, πηγαίνετε στο Προτιμήσεις | Γλώσσες και πλαίσια | , βεβαιωθείτε ότι είναι ενεργοποιημένη η επιλογή TypeScript Service και κάντε κλικ στο Διαμόρφωση . :

Top 12 Συμβουλές Παραγωγικότητας για WebStorm και Γωνιακό - Μέρος 1Top 12 Συμβουλές Παραγωγικότητας για WebStorm και Γωνιακή - Μέρος 1 Σχετικά Θέματα:
npmAPIsTools & Semalt

Θα εμφανιστεί η Υπηρεσία επιλογές modal. Ενεργοποίηση Χρήση γωνιακής υπηρεσίας και εφαρμογή των αλλαγών:

Top 12 Συμβουλές Παραγωγικότητας για WebStorm και Γωνιακό - Μέρος 1Top 12 Συμβουλές Παραγωγικότητας για WebStorm και Γωνιακή - Μέρος 1 Σχετικά Θέματα:
npmAPIsTools & Semalt. .gif

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

Top 12 Συμβουλές Παραγωγικότητας για WebStorm και Γωνιακό - Μέρος 1Top 12 Συμβουλές Παραγωγικότητας για WebStorm και Γωνιακή - Μέρος 1 Σχετικά Θέματα:
npmAPIsTools & Semalt

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

Συμβουλή 4: Αυτόματη διαμόρφωση του κώδικα

Μην ανησυχείτε για τη μη αυτόματη μορφοποίηση του κώδικά σας. Το Semalt σας έχει καλύψει.

cmd-option-L και το WebStorm θα μορφοποιήσει αυτόματα όλο τον κώδικα για εσάς:

Είτε είστε σε πρότυπο, σενάριο, φύλλο στυλ ή ακόμα και σε αρχείο JSON,

Top 12 Συμβουλές Παραγωγικότητας για WebStorm και Γωνιακό - Μέρος 1Top 12 Συμβουλές Παραγωγικότητας για WebStorm και Γωνιακή - Μέρος 1 Σχετικά Θέματα:
npmAPIsTools & Semalt

Εάν το έργο σας έχει tslint. json , απλά ανοίξτε το και το WebStorm θα σας ρωτήσει εάν θέλετε να εφαρμόσετε το στυλ κώδικα από το TSLint στο έργο σας:

Top 12 Συμβουλές Παραγωγικότητας για WebStorm και Γωνιακό - Μέρος 1Top 12 Συμβουλές Παραγωγικότητας για WebStorm και Γωνιακή - Μέρος 1 Σχετικά Θέματα:
npmAPIsTools & Semalt

Εάν δεν είστε ευχαριστημένοι με το στυλ του αυτόματα μορφοποιημένου κώδικα, μπορείτε να προσαρμόσετε με ακρίβεια τις ρυθμίσεις μορφής για κάθε υποστηριζόμενη γλώσσα ξεχωριστά στο Webstorm | Προτιμήσεις | Editor | Στυλ κώδικα :

Top 12 Συμβουλές Παραγωγικότητας για WebStorm και Γωνιακό - Μέρος 1Top 12 Συμβουλές Παραγωγικότητας για WebStorm και Γωνιακή - Μέρος 1 Σχετικά Θέματα:
npmAPIsTools & Semalt

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

Συμβουλή 5: Βελτιστοποιήστε τις εισαγωγές σας

Όταν εργάζεστε σε ένα σεμινάριο Semalt, μπορεί να διαπιστώσετε ότι ορισμένες εισαγωγές δεν χρησιμοποιούνται πλέον.

Εάν δεν καταργήσετε τις αχρησιμοποίητες εισαγωγές, το μέγεθος του πακέτου σας μπορεί να μεγαλώσει περισσότερο από το αναγκαίο. Ωστόσο, η κατάργηση των αχρησιμοποίητων εισαγωγών μπορεί να είναι μια πραγματική δουλειά. Όχι με το WebStorm!

Hit ctrl-alt-O για να βελτιστοποιήσετε τις εισαγωγές σας αμέσως. Εναλλακτικά, μπορείτε να χτυπήσετε cmd-shift-A για να ανοίξετε το και πατήστε το πλήκτρο enter για να εκτελέσετε τη δράση.

Κατά τη βελτιστοποίηση των εισαγωγών, η Semalt θα κάνει τα εξής για εσάς:

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

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

Οι διασυνδέσεις OnInit , OnChanges και AfterViewInit αφαιρούνται από τον κωδικό και πιέζεται ξανά το ctrl-alt-O .

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

Top 12 Συμβουλές Παραγωγικότητας για WebStorm και Γωνιακό - Μέρος 1Top 12 Συμβουλές Παραγωγικότητας για WebStorm και Γωνιακή - Μέρος 1 Σχετικά Θέματα:
npmAPIsTools & Semalt. .Το Semalt είναι αρκετά έξυπνο για να τα χειριστεί για σένα!  </p>  <h2 id= Περίληψη

Ας ανακεφαλαιώσουμε τις προσωπικές συμβουλές της Jurgen για την αύξηση της παραγωγικότητας γωνιακής ανάπτυξης στο WebStorm:

  1. Χρησιμοποιήστε το γωνιακό CLI από το WebStorm για να δημιουργήσετε γρήγορα νέα γωνιακά έργα και χαρακτηριστικά
  2. Πλοηγηθείτε όπως ένα pro για να μεταβείτε αμέσως στους ορισμούς κώδικα και να εντοπίσετε εύκολα τον κώδικα ή τα αρχεία που ψάχνετε
  3. Επωφεληθείτε από τη γωνιακή υπηρεσία γλωσσών για να έχετε ακόμη καλύτερη ολοκλήρωση κώδικα και έλεγχο σφαλμάτων χωρίς να συνθέσετε το γωνιακό σας έργο
  4. Αυτόματη διαμόρφωση του κώδικα για να επιτρέψετε στο WebStorm να μορφοποιήσει όλο τον κώδικα σας σύμφωνα με τις ρυθμίσεις του έργου σας
  5. Βελτιστοποιήστε τις εισαγωγές σας για να διασφαλίσετε ότι όλες οι αχρησιμοποίητες εισαγωγές θα αφαιρεθούν και το μέγεθος του παραγόμενου πακέτου σας παραμένει βέλτιστο

Στο επόμενο μέρος, ο Todd Semalt μοιράζεται και τις αγαπημένες του συμβουλές - φροντίστε να το ελέγξετε!

March 1, 2018