Απλά ήθελα πρότυπα κώδικα, αλλά τελικά έγραψα ένα plugin WebStorm

Κάθε φορά που ξεκίνησα ένα νέο χαρακτηριστικό, μετακόμισα από έναν προγραμματιστή σε έναν «διαχειριστή αρχείων». Δημιουργήστε ένα φάκελο, οργανώστε αρχεία, γράψτε κώδικα λέβητα, αντιγράψτε εισαγωγές από ένα γειτονικό αρχείο και μην ξεχάσετε να καθαρίσετε το χάος... Κάθε δράση διαρκεί μόνο ένα λεπτό, αλλά σε μια εβδομάδα, πραγματικά προσθέτει. Στην αρχή, ήθελα να λύσω το πρόβλημα με τον "εύκολο τρόπο" - με τη διαμόρφωση των προτύπων αρχείου και κώδικα στο WebStorm. αλλά γρήγορα χτύπησα έναν τοίχο: τα πρότυπα δεν μπορούν να χειριστούν τις διαδρομές ευέλικτα, δεν μπορούν να μετατρέψουν σωστά Δύο μέσα στον κώδικα, και η κοινή χρήση των ρυθμίσεων με όλη την ομάδα είναι ένας εφιάλτης.Το εργαλείο που υποτίθεται ότι βοήθησε άρχισε να με ενοχλεί. MyComponent my-component Και τότε σκέφτηκα: Αυτή η σκέψη με οδήγησε να δημιουργήσω το δικό μου plugin. Και ξέρετε τι; Δεν ήταν τόσο τρομακτικό όσο λένε οι άνθρωποι. Δεν χρειάστηκε να μάθω Java ή να διαβάσω εγχειρίδια για χρόνια. Αποδείχθηκε ότι για έναν προγραμματιστή Frontend, το σύγχρονο Kotlin μοιάζει ύποπτα με το TypeScript. “What if I stop configuring the IDE and start programming it?” Σε αυτό το άρθρο, θα μοιραστώ πώς πήγα από μια απλή επιθυμία να δημιουργήσω ένα πρότυπο για να δημιουργήσω ένα πλήρες εργαλείο και γιατί πρέπει να σταματήσετε να ανεχτείτε μια κακή εμπειρία προγραμματιστή (DX). Το πρόβλημα: Ατελείωτο Copy-Paste και «τυφλή» πλοήγηση Εξάλλου, υπάρχουν πολλοί λόγοι για τους οποίους οι προγραμματιστές μας εργάζονται στο έργο μας σε ένα ενιαίο αποθετήριο. Αυτό επιβάλλει αυστηρούς περιορισμούς στο στυλ του κώδικα. Για παράδειγμα, οποιοδήποτε στοιχείο του React χωρίζεται πάντα σε ένα μέρος της παρουσίασης ( ) και η λογική ( ), και τα στυλ βρίσκονται κοντά σε ένα ξεχωριστό αρχείο. ξέχασε να τυλίξει το στοιχείο σε Τα προνόμια δεν καταστρέφονται στην πρώτη γραμμή; Δεν θα περάσετε την αναθεώρηση κώδικα. view.tsx index.tsx memo Η παγίδα των απλών λύσεων: Γιατί τα πρότυπα αρχείων απέτυχαν Το ιδανικό σενάριο στο μυαλό μου έμοιαζε με αυτό: ένα κλικ - και δημιουργώ ολόκληρο το σωρό αρχείων (στοιχείο, προβολή, στυλ). Αποδείχθηκε ότι το WebStorm μπορεί να κάνει αυτό! Βαθιά στις ρυθμίσεις , υπάρχει μια δυνατότητα να δημιουργήσετε όχι μόνο αρχεία, αλλά ιεραρχίες μέσω "Child Templates". ( Settings -> Editor -> File and Code Templates ) ( ) Έχω δημιουργήσει γρήγορα μια διαμόρφωση: Parent template (Standard TSX Component): Name: React Component Folder Extension: tsx File Name: ${NAME}/index Code: import { memo } from 'react' import View from './view' type Props = {} export const ${NAME} = memo((props: Props) => { const {} = props return }) Child files (via Create Child Template button): View (view.tsx): File Name: ${NAME}/view Extension: tsx Code: import { memo } from 'react'; import styles from './styles.module.less'; type Props = {}; export default memo((props: Props) => { return ; }); Styles (styles.module.less): File Name: ${NAME}/styles.module Extension: less Code: ( empty file ) Επιλέγω το πρότυπο, εισάγω το όνομα του φακέλου και το όνομα του αρχείου και το IDE δημιουργεί το φάκελο και οργανώνει τα ίδια τα αρχεία. Voila! Η ευφορία εξαφανίστηκε όταν αντιμετώπισα την σκληρή πραγματικότητα του Apache Velocity (της μηχανής προτύπων IDE): Προβλήματα ονομασίας: Η μετατροπή του MySuperComponent σε my-super-component για τις διαδρομές εισαγωγής και πίσω στο MY_SUPER_COMPONENT για τις σταθερές μέσα στο πρότυπο είναι επώδυνη. Περιορισμένη πρόσβαση στη δομή αρχείων: Τα πρότυπα μπορούν να δημιουργήσουν αρχεία μόνο σε σχέση με το σημείο στο οποίο κάνετε κλικ. Αν χρειαστεί να δημιουργήσω αρχεία σε φακέλους διαφορετικών ενοτήτων ταυτόχρονα, τα πρότυπα είναι ανίσχυρα. Συγχρονισμός ομάδας: Πώς μπορώ να μοιραστώ αυτές τις ρυθμίσεις; "Εξαγωγή ρυθμίσεων σε ZIP και εισαγωγή, αλλά μην ανακατεύετε τα κουτιά ελέγχου"; Αυτό δεν λειτουργεί σε μια ομάδα 20 ατόμων. Fragility: Το τελευταίο χτύπημα ήταν μια ενημέρωση WebStorm. Μετά από μια άλλη ενημέρωση IDE, τα διαμορφωμένα πρότυπα παιδιού μου απλά εξαφανίστηκαν. Why Not AI? ΓΙΑΤΙ ΟΧΙ ΑΥΤΟΣ; Μια δίκαιη ερώτηση: γιατί να γράψω κώδικα με το χέρι στην εποχή της τεχνητής νοημοσύνης; Γιατί να μην αφήσω το GitHub Copilot ή το JetBrains AI να δημιουργήσουν τα αρχεία; Χρησιμοποιώ ενεργά βοηθούς τεχνητής νοημοσύνης στη δουλειά μου, αλλά για εργασίες υποδομής χάνουν για 3 λόγους: Determinism: Η AI είναι ένα μοντέλο πιθανότητας. Μπορεί να δημιουργήσει τη σωστή δομή αρχείων 9 φορές από 10. Αλλά την 10η φορά, θα "παραπλανήσει" μια επιπλέον εισαγωγή ή θα ανακατέψει τον φάκελο. Με έναν αυστηρό οδηγό στυλ, χρειάζομαι ένα εργαλείο που μπορώ να εμπιστευτώ 100%, όχι ένα που πρέπει να ελέγξω διπλά. Ένα plugin δεν "σκεφτεί" ή "πείθει", ακολουθεί έναν αυστηρό αλγόριθμο. Πλαίσιο και ταχύτητα: Για να κάνω την AI να δημιουργήσει μια σύνθετη δομή σε διαφορετικές ενότητες, πρέπει να γράψω μια λεπτομερή προειδοποίηση: "Δημιουργήστε το στοιχείο X στον τομέα, στη συνέχεια την εφαρμογή στο web, χρησιμοποιήστε αυτές τις διαδρομές...". Πρότυπα: Είναι δύσκολο να αναγκάσετε 20 προγραμματιστές να χρησιμοποιήσουν την ίδια ακριβώς προτροπή, αλλά είναι εύκολο να τους δώσετε ένα κουμπί που εγγυάται το ίδιο αποτέλεσμα για όλους. Maybe Write a Plugin? Μπορείς να γράψεις ένα plug-in; Όταν έγινε σαφές ότι τα τυπικά πρότυπα δεν θα το κόψουν, υπήρχε μόνο ένας τρόπος - να γράψω το δικό μου εργαλείο. Η ιδέα της δημιουργίας ενός προσαρμοσμένου plugin IDE ήταν εκφοβιστική στην αρχή. Στον κόσμο του frontend, έχουμε την τάση να πιστεύουμε ότι η ανάπτυξη IntelliJ προορίζεται για hardcore μηχανικούς Java. Ακόμη και η τεκμηρίωση JetBrains σας προειδοποιεί αμέσως ότι πιθανότατα δεν χρειάζεστε αυτό, προσφέροντας Βασικά σας λέει: "Πηγαίνετε να γράψετε σενάρια, μην μπείτε σε αυτό το χάος". Εναλλακτικές Εναλλακτικές Είμαι συνηθισμένος στο TS, το NPM και το Webpack, και εδώ είδα το Gradle, το JVM και ένα πολύπλοκο SDK. Quick Start: Plugin Template Η πρώτη ευχάριστη έκπληξη ήταν η Αυτό είναι ένα έτοιμο πρότυπο αποθετηρίου που λύνει το πρόβλημα της "άδειας σελίδας". Πλατφόρμα Plugin Template Πλατφόρμα Plugin Template Δεν χρειάζεται να ρυθμίσετε χειροκίνητα την κατασκευή, να γράψετε μανιφέστα ή να καταλάβετε το CI/CD. Απλά κλωνοποιήστε το repo και είστε έτοιμοι να πάτε. Έχετε ένα λειτουργικό Hello World, ρυθμισμένο Gradle και GitHub Actions. Αυτό με έσωσε ημέρες, ίσως εβδομάδες. Kotlin is Just Like TypeScript (Well, Almost) Ο δεύτερος φόβος μου ήταν η γλώσσα. τα plugins είναι γραμμένα σε Java ή Kotlin. Για κάποιον που γράφει σύγχρονο TypeScript, η μετάβαση στο Kotlin ήταν εκπληκτικά ομαλή. The syntax is very similar: Το ίδιο val / var αντί για const / let. Lambdas και υψηλότερης τάξης λειτουργίες λειτουργούν ακριβώς το ίδιο. Η αυστηρή πληκτρολόγηση, στην οποία είμαστε συνηθισμένοι στο TS, λειτουργεί ακόμη πιο αξιόπιστα εδώ. Βασικά, αν είστε άνετοι με το TypeScript, μπορείτε να διαβάσετε και να γράψετε το Kotlin από το πρώτο βράδυ. Documentation and AI Help Το πιο δύσκολο στάδιο ήταν η μελέτη του IntelliJ Platform SDK. Η τεκμηρίωση στο JetBrains είναι τεράστια, αλλά η καμπύλη μάθησης είναι απότομη. Εδώ, οι πράκτορες της AI ήρθαν στη διάσωση. Δεν τους χρησιμοποίησα για να γράψω επιχειρηματική λογική, αλλά ως έξυπνη μηχανή αναζήτησης για το API. Ερωτήσεις όπως "Πώς να εμφανίσετε ένα μπαλόνι ειδοποιήσεων" εξοικονομούσαν πολύ χρόνο. Implementation: From Templates to Smart Assistant Εφαρμογή: Από τα πρότυπα έως τον έξυπνο βοηθό Κατά τη διάρκεια της ανάπτυξης, προσδιόρισα βασικά καθήκοντα που θα λύνουν τους μεγαλύτερους πόνους της ομάδας. Ο κύριος στόχος ήταν το εργαλείο να αισθάνεται ένα εγγενές μέρος του IDE, και όχι κάποια εξωγήινα σενάρια. Δεν θα πάω βαθιά σε συγκεκριμένα API - αυτό που έχει σημασία είναι τι σας επιτρέπει να κάνετε το IDE. Η έξυπνη γενιά Στον κόσμο της IntelliJ, οποιαδήποτε ενέργεια είναι μια ενέργεια. Για να προσθέσετε ένα στοιχείο στο μενού με δεξί κλικ, απλά πρέπει να επεκτείνετε το της τάξης. AnAction Αλλά δεν ήθελα να μπερδέψω το μενού. Γιατί χρειάζομαι ένα κουμπί "Δημιουργία στοιχείου" αν κάνω κλικ σε ένα φάκελο με επιχειρηματική λογική ή μεταφράσεις; Εδώ, η ευελιξία των plugins λάμπει. μέθοδος, η οποία καλείται κάθε φορά πριν από την εμφάνιση του μενού. πρόσθεσα απλή λογική: update() Είμαι στο φάκελο domain; Υπάρχει ακόμα το αρχείο *.test.tsnot εδώ; Αν ναι - δείξτε το στοιχείο μενού. Αν όχι - κρύψτε το. ο προγραμματιστής βλέπει μόνο τα εργαλεία που είναι σχετικά εδώ και τώρα. Τα τυποποιημένα πρότυπα δεν μπορούν να πάνε πέρα από τον τρέχοντα φάκελο, αλλά η αρχιτεκτονική μας υποθέτει διαιρέσεις κώδικα από ενότητες και συχνά χρησιμοποιεί ενέσεις εφαρμογών πλατφόρμας επιχειρηματικής λογικής. Ο προγραμματιστής εισάγει το όνομα της οντότητας μία φορά και το plugin: Δημιουργεί ένα αρχείο διεπαφής στον τομέα με boilerplate για ένεση. Υπολογίζει διαδρομές σε web και κινητές ενότητες. Δημιουργεί τα αντίστοιχα αρχεία υλοποίησης σε αυτούς τους φακέλους. Διορθώνει τα ονόματα αρχείων και τάξεων (kebab-case για αρχεία, PascalCase για τάξεις). Σημαντική απόχρωση: Δεν κωδικοποίησα σκληρά τα πρότυπα μέσα στις τάξεις Kotlin. Αυτό θα έκανε το plugin ένα "μαύρο κουτί". Αντ 'αυτού, το plugin καταγράφει τις διατάξεις στις τυπικές ρυθμίσεις IDE. Αυτό μας δίνει ευελιξία: οποιοδήποτε μέλος της ομάδας μπορεί να πάει στις ρυθμίσεις, να διορθώσει το στυλ κώδικα στο πρότυπο και το plugin θα πάρει αμέσως τις αλλαγές. Δεν κωδικοποίησα σκληρά τα πρότυπα μέσα στις τάξεις Kotlin. Αυτό θα έκανε το plugin ένα "μαύρο κουτί". Αντ 'αυτού, το plugin καταγράφει τις διατάξεις στις τυπικές ρυθμίσεις IDE. Αυτό μας δίνει ευελιξία: οποιοδήποτε μέλος της ομάδας μπορεί να πάει στις ρυθμίσεις, να διορθώσει το στυλ κώδικα στο πρότυπο και το plugin θα πάρει αμέσως τις αλλαγές. Important nuance: i18n Πλοήγηση Το δεύτερο πρόβλημα είναι το «νεκρό» κείμενο. Χρησιμοποιούμε ένα προσαρμοσμένο hook και ένα συστατικό Για το IDE, αυτό είναι μια άσκοπη ουρά useLocalizedString(‘key’) Για να τους φέρει στη ζωή, χρησιμοποίησα Αυτό το API σάς επιτρέπει να πείτε στο IDE: «Κοίτα, αν δείτε μια γραμμή μέσα σε αυτό το κέλυφος, αντιμετωπίστε το ως σύνδεσμο σε ένα αρχείο JSON». , Μπορώ να κάνω κλικ στο κλειδί μετάφρασης και να πηδήσω στο σωστό αρχείο εντοπισμού. PsiReferenceContributor Ctrl/Cmd Όταν ξεκίνησα δεν μπορούσα να σταματήσω Μόλις το εμπόδιο εισόδου είχε φύγει και το βασικό πλαίσιο ήταν έτοιμο, πήγα μακριά. Αποδείχθηκε ότι η πρόσβαση στο AST (Απόσπαστο Δέντρο Συντάξης) του κώδικα σας επιτρέπει να κάνετε θαύματα: Auto-mocks: Το plugin δημιουργεί δεδομένα mock για δοκιμές με βάση τη διεπαφή. Δίκτυο σε δοκιμές: Κατά τη δημιουργία ενός αρχείου δοκιμής, το plugin βρίσκει τα απαραίτητα κουτσομπολιά και προσθέτει εισαγωγές αυτόματα. Wrappers (HOCs): Μια ενέργεια που τυλίγει το επιλεγμένο στοιχείο σε ένα HOC ανάλυσης και περάσει τις απαιτούμενες προδιαγραφές. Όλα αυτά είναι συνήθεις ενέργειες, καθένα από τα οποία εξοικονομεί δεκάδες δευτερόλεπτα και βοηθά να παραμείνει επικεντρωμένη στην κύρια εργασία. Διανομή Η παράδοση του εργαλείου στην ομάδα ήταν απλή. Δεν στέλνουμε αρχεία .jar στο Slack. Το plugin δημοσιεύεται στο JetBrains Marketplace. Για έναν νέο προγραμματιστή, το onboarding τώρα μοιάζει με αυτό: "Εγκατάσταση WebStorm, κατεβάστε το plugin μας - και είστε έτοιμοι να πάτε". Η παράδοση του εργαλείου στην ομάδα ήταν απλή. Δεν στέλνουμε αρχεία .jar στο Slack. Το plugin δημοσιεύεται στο JetBrains Marketplace. Για έναν νέο προγραμματιστή, το onboarding τώρα μοιάζει με αυτό: "Εγκατάσταση WebStorm, κατεβάστε το plugin μας - και είστε έτοιμοι να πάτε". ΤΖΑΡ Αγορά JetBrains Συνοπτικά: Η εμπειρία των προγραμματιστών είναι στα χέρια σας Αξίζει τον κόπο να ξοδέψετε χρόνο μελετώντας τις υποδομές, δημιουργώντας το περιβάλλον και κωδικοποιώντας σε μια «ξένη» γλώσσα για να εξοικονομήσετε μερικά λεπτά την ημέρα; απολύτως . Αν υπολογίσετε καθαρό χρόνο, η εξοικονόμηση μπορεί να μην φαίνεται τεράστια – ίσως μια ώρα ή δύο το μήνα. Όταν το εργαλείο λειτουργεί προβλέψιμα και γρήγορα, οι μικρο-ενοχλήσεις που συσσωρεύονται κατά τη διάρκεια της ημέρας εξαφανίζονται. σταμάτησα να σκέφτομαι ποιο φάκελο να βάλω το αρχείο ή τι να το ονομάσω. flow Αυτή η εμπειρία μου έμαθε δύο πράγματα: . The division into frontend and backend (or tooling) often exists only in our heads. If you understand algorithms and know how to Google (or ask AI), you can build tools for any platform. Kotlin turned out to be friendly, and the IntelliJ Platform is powerful. There are no boundaries . We are used to putting up with inconveniences, waiting for the vendor to release an update. But WebStorm, like VS Code, is a platform. If you don’t like how your hammer works — you can rebuild it. The IDE is a constructor If you work on a large project and feel like you are drowning in routine — don’t be afraid to spend time building your own plugin. It’s an investment that pays off every single day when you come to work and just write code, instead of fighting with the file system. Written by , Software Engineer at Aleksei Kovrigin Social Discovery Group Γράφτηκε από τον Aleksei Kovrigin, μηχανικός λογισμικού στο Social Discovery Group Γράφτηκε από Μηχανικός λογισμικού στο Αλεξέι Κόβριγκιν Ομάδα κοινωνικής ανακάλυψης Αλεξέι Κόβριγκιν Αλεξέι Κόβριγκιν Ομάδα κοινωνικής ανακάλυψης Ομάδα κοινωνικής ανακάλυψης Εξερευνήστε την καριέρα των ονείρων σας στο SDG και συμμετάσχετε σε μια ομάδα που επαναπροσδιορίζει την καινοτομία - η επόμενη μεγάλη ευκαιρία σας είναι μόλις ένα κλικ μακριά! 👉 Ready to shape the future of social discovery? ! Find your next career opportuniry at SDG Βρείτε τις επόμενες ευκαιρίες σταδιοδρομίας σας στο SDG