Duke punuar në një monorepo të madh me një projekt afatgjatë ka çuditë e veta. Çdo herë që nisa një tipar të ri, u shndërrova nga një zhvillues në një “menaxher skedarësh”. Krijoni një dosje, organizoni skedarët, shkruani kodin e boilerplate, kopjoni importet nga një skedar fqinj, dhe mos harroni të pastroni rrëmujën... Çdo veprim merr vetëm një minutë, por në një javë, me të vërtetë shtohet. Në fillim, unë doja të zgjidhja problemin në "mënyrën e lehtë" - duke konfiguruar templates standarde të skedarëve dhe kodit në WebStorm. por shpejt godita një mur: templates nuk mund të trajtojnë rrugët në mënyrë fleksibile, ata nuk mund të konvertojnë siç duhet dy brenda kodit, dhe ndarjen e cilësimeve me të gjithë ekipin është një makth. MyComponent my-component Atëherë mendoja: Kjo mendim më çoi në krijimin e plugin-it tim. Dhe ju e dini çfarë? Nuk ishte aq e frikshme sa thonë njerëzit. Unë nuk kam pasur nevojë të mësoj Java ose të lexoj manuale për vite. doli se për një zhvillues Frontend, Kotlin moderne duket dyshimisht si TypeScript. “What if I stop configuring the IDE and start programming it?” Në këtë artikull, unë do të ndaj se si kam shkuar nga një dëshirë e thjeshtë për të bërë një template për të ndërtuar një mjet të plotë, dhe pse ju duhet të ndaloni të toleroni një përvojë të keqe zhvilluesi (DX). Problemi: Copy-Paste pafund dhe Navigimi “i verbër” Për shembull, një pjesë e përbashkët e projektit është e ndarë në një depozitë të vetme.Kjo imponon kufizime strikte në stilin e kodit. logjikë ( ), dhe stilet janë afër në një skedar të veçantë. harroni të mbështillni komponentin në ? Props nuk shkatërrohen në vijën e parë? Ju nuk do të kalojë Kodi Rishikim. view.tsx index.tsx memo Kapaku i zgjidhjeve të thjeshta: Pse skemat e dosjeve dështuan Skenari ideal në kokën time dukej si kjo: një klik - dhe unë gjeneroj tërë grumbullin e skedarëve (komponent, pamje, stile). Doli se WebStorm mund ta bëjë këtë! Thellë në cilësimet , ka një tipar për të krijuar jo vetëm skedarë, por hierarkitë përmes "Fëmijët Templates". ( Settings -> Editor -> File and Code Templates ) ( ) Shpejt kam vendosur një konfigurim: 
 
 
 
 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 <View />
})
 
 
     
 
 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 <div className={styles.container}></div>;
});
 
 
 
 
 Styles (styles.module.less): 
 
 
 
 File Name: ${NAME}/styles.module Extension: less Code: ( empty file ) Unë zgjidh template, shkruani emrin e dosjes dhe emrin e skedarit, dhe IDE krijon dosjen dhe organizon skedarët vetë. Voila! Euforia u zhduk kur u përball me realitetin e ashpër të Apache Velocity (motor IDE template): 
 
 Problemet e emërimit: Konvertimi i MySuperComponent në my-super-komponent për rrugët e importit dhe përsëri në MY_SUPER_COMPONENT për konstante brenda template është e dhimbshme. 
 
 Aksesi i kufizuar në strukturën e skedarëve: Templates mund të krijojnë skedarë vetëm në lidhje me vendin ku keni klikuar.Nëse kam nevojë të krijoj skedarë në dosje të moduleve të ndryshme në të njëjtën kohë, templates janë të pafuqishme. 
 
 Sinkronizimi i ekipit: Si i ndaj këto cilësime? "Eksporti i cilësimeve në ZIP dhe importi, por mos i përzieni kutitë e kontrollit"? 
 
 Fragility: Goditja e fundit ishte një përditësim i WebStorm. Pas një tjetër përditësimi IDE, templates im i konfiguruar fëmijë thjesht u zhduk. Why Not AI? Përse jo ai? Një pyetje e drejtë: pse të shkruani kodin me dorë në epokën e AI?Pse të mos lejoni GitHub Copilot ose JetBrains AI të krijojë skedarët?Unë aktivisht përdor asistentët e AI në punën time, por për detyrat e infrastrukturës, ata humbasin për 3 arsye: 
 
 
 
 Determinizmi: AI është një model probabilistik. Ajo mund të gjenerojë strukturën e saktë të skedarëve 9 herë nga 10. Por në herë të dhjetë, ajo do të "hallucinojë" një import shtesë ose të përzërë dosjen. Me një udhëzues të rreptë të stilit, kam nevojë për një mjet që mund të besoj 100%, jo një që duhet të kontrolloj dy herë. Një plugin nuk "mendon" ose "mendo", ndjek një algoritëm të rreptë. Konteksti dhe Shpejtësia: Për të bërë AI të krijojë një strukturë komplekse në module të ndryshme, unë duhet të shkruaj një këshillë të detajuar: "Krijoni komponentin X në domain, pastaj zbatimin në web, përdorni këto rrugë ...". Standarde: Është e vështirë të detyrosh 20 zhvillues që të përdorin të njëjtën thirrje, por është e lehtë t’u japësh atyre një buton që garanton të njëjtin rezultat për të gjithë. Maybe Write a Plugin? A mund të shkruani një plugin? Kur u bë e qartë se templates standarde nuk do të prerë atë, kishte vetëm një rrugë mbetur - për të shkruar mjetin tim. Ideja e krijimit të një plugin IDE të përshtatur ishte frikësuese në fillim. Në botën e frontend, ne kemi tendencë të mendojmë se zhvillimi IntelliJ është i rezervuar për inxhinierët hardcore Java. Madje edhe dokumentacioni JetBrains ju paralajmëron menjëherë se ju ndoshta nuk keni nevojë për këtë, duke ofruar Në thelb ju thotë: "Shkoni të shkruani skripte, mos u futni në këtë rrëmujë." Alternativë Alternativë Sinqerisht, kisha frikë të zhytesha në një grumbull të panjohur. jam mësuar me TS, NPM dhe Webpack, dhe këtu pashë Gradle, JVM, dhe një SDK të ndërlikuar. Quick Start: Plugin Template Surpriza e parë e këndshme ishte nga JetBrains. Ky është një template i përgatitur i depozitave që zgjidh problemin e "faqes së zbrazët". Modeli i Plugin Platformës IntelliJ Modeli i Plugin Platformës IntelliJ Ju nuk keni nevojë të konfiguroni manualisht ndërtimin, të shkruani manifeste, ose të kuptoni CI / CD. Ju vetëm klononi repo, dhe ju jeni gati për të shkuar. Ju keni një Hello World që punon, Gradle konfiguruar, dhe GitHub Veprimet. Kjo më shpëtoi ditë, ndoshta javë. Kotlin is Just Like TypeScript (Well, Almost) Frika ime e dytë ishte gjuha. Plugins janë shkruar në Java ose Kotlin. Për dikë që shkruan TypeScript moderne, kalimi në Kotlin ishte çuditërisht i qetë. The syntax is very similar: 
 
 
 
 E njëjta val / var në vend të const / let. Lambdas dhe funksionet e rendit më të lartë punojnë njësoj. Shtypja e rreptë, të cilës jemi mësuar në TS, punon edhe më besueshëm këtu. Në thelb, nëse jeni të rehatshëm me TypeScript, ju mund të lexoni dhe shkruani Kotlin në mbrëmjen e parë. Documentation and AI Help Faza më e vështirë ishte studimi i IntelliJ Platform SDK. Dokumentacioni në JetBrains është i madh, por kurba e të mësuarit është e pjerrët. Për të kuptuar se cila klasë është përgjegjëse për "klikimin e djathtë në një skedar", mund të kaloni orë në forume. Këtu, agjentët e AI erdhën në shpëtim. Unë nuk i përdora ato për të shkruar logjikën e biznesit, por si një motor kërkimi i zgjuar për API. Pyetjet si "Si të shfaqni balonën e njoftimit" shpëtuan shumë kohë. në vend të një gërmimi përmes dokumenteve, mora një shembull kodi, dhe pastaj e kuptova vetë. Implementation: From Templates to Smart Assistant Implementimi: Nga templates në asistentët e mençur Gjatë zhvillimit, kam identifikuar detyrat kyçe që do të zgjidhnin dhimbjet më të mëdha të ekipit. Qëllimi kryesor ishte që mjeti të ndjehej pjesë e lindur e IDE-së, dhe jo ndonjë skenar i huaj. Gjenerata e zgjuar Në botën IntelliJ, çdo veprim është një veprim. Për të shtuar një artikull në menunë me klikim të djathtë, ju vetëm duhet të zgjeroni klasës së AnAction Por unë nuk desha të ngatërroj menunë. Pse kam nevojë për një buton "Krijo komponent" nëse kam klikuar në një dosje me logjikën e biznesit ose përkthimet? Këtu, fleksibiliteti i plugins shkëlqen. Klasa e veprimit ka një metodë, e cila është thirrur çdo herë para shfaqjes së menu. unë shtoi logjikë të thjeshtë: update() 
 
 
 A jam në dosjen e domain-it? A ekziston ende skedari *.test.tsnot këtu? Nëse po - tregoni elementin e menusit. Nëse jo - fshiheni atë. zhvilluesi sheh vetëm mjetet që janë relevante këtu dhe tani. Modelet standarde nuk mund të shkojnë përtej dosjes aktuale, por arkitektura jonë supozon ndarjen e kodit nga modulet dhe shpesh përdor injektimin e implementimeve të platformës të logjikës së biznesit. Pra, kam zbatuar një veprim "inteligjent". zhvilluesi fut emrin e entitetit një herë, dhe plugin: 
 
 
 
 
 Krijon një skedar ndërfaqe në domain me boilerplate për injektim. Llogarit rrugët për web dhe module të lëvizshme. Krijon skedarët përkatës të zbatimit në ato dosje. Korrigjon emrat e skedarëve dhe klasave (Kebab-case për skedarët, PascalCase për klasat). 
 
 Nuanca e rëndësishme: Unë nuk hardcode templates brenda klasave Kotlin. Kjo do të bëjë plugin një "kuti e zezë." Në vend të kësaj, plugin regjistron layouts në cilësimet standarde IDE. Kjo na jep fleksibilitet: çdo anëtar i ekipit mund të shkoni në cilësimet, korrigjo stilin e kodit në template, dhe plugin do të menjëherë të marrë ndryshimet. Nuanca e rëndësishme: Unë nuk hardcode templates brenda klasave Kotlin. Kjo do të bëjë plugin një "kuti e zezë." Në vend të kësaj, plugin regjistron layouts në cilësimet standarde IDE. Kjo na jep fleksibilitet: çdo anëtar i ekipit mund të shkoni në cilësimet, korrigjo stilin e kodit në template, dhe plugin do të menjëherë të marrë ndryshimet. i18n Navigimi Problemi i dytë është teksti “i vdekur”.Ne përdorim një hook të përshtatur dhe një komponent Për IDE, kjo është një rresht pa kuptim useLocalizedString(‘key’) <LocalizedText href=’key’ /> Për t’i sjellë ato në jetë, kam përdorur Kjo API ju lejon të thoni IDE-së: “Shikoni, nëse shihni një zinxhir brenda këtij hook, trajtojeni atë si një lidhje me një skedar JSON”. , Mund të klikoj në çelësin e përkthimit dhe të hidhem në skedarin e lokalizimit të djathtë. PsiReferenceContributor Ctrl/Cmd Pasi fillova, nuk mund të ndalem Sapo pengesa e hyrjes ishte zhdukur dhe korniza themelore ishte gati, unë u mor larg. doli se duke pasur qasje në AST (Abstract Syntax Tree) e kodit ju lejon të bëni mrekulli: 
 
 
 
 Auto-Mocks: Plugin gjeneron të dhëna mock për teste bazuar në ndërfaqe. Kabllo në teste: Kur krijoni një skedar testimi, plugin gjen shaka të nevojshme dhe shton importet automatikisht. Wrappers (HOCs): Një veprim që mbështjell komponentin e zgjedhur në një HOC analitike dhe kalon props e nevojshme. Të gjitha këto janë veprime rutinë, secila prej të cilave kursen dhjetëra sekonda dhe ndihmon për të mbajtur fokus në detyrën kryesore. Shpërndarja 
 
 Dërgimi i mjetit për ekipin ishte i thjeshtë. Asnjë dërgimi i skedarëve .jar në Slack. Plugin është botuar në JetBrains Marketplace. Për një zhvillues të ri, në bord tani duket si kjo: "Install WebStorm, shkarko plugin tonë - dhe ju jeni gati për të shkuar." Dërgimi i mjetit për ekipin ishte i thjeshtë. Asnjë dërgimi i skedarëve .jar në Slack. Plugin është botuar në JetBrains Marketplace. Për një zhvillues të ri, në bord tani duket si kjo: "Install WebStorm, shkarko plugin tonë - dhe ju jeni gati për të shkuar." xhami Tregu i JetBrains Përmbledhje: Përvoja e zhvilluesve është në duart tuaja A ia vlen të shpenzosh kohë duke studiuar infrastrukturën, duke krijuar mjedisin dhe duke koduar në një gjuhë “të huaj” për të kursyer disa minuta në ditë? absolutisht të Nëse numëroni kohën e pastër, kursimet mund të mos duken të mëdha – ndoshta një orë ose dy në muaj. Kur mjeti punon në mënyrë të parashikueshme dhe të shpejtë, mikro-ngacmimet që grumbullohen gjatë ditës zhduken. Unë ndalova së menduari se në cilën dosje të futja skedarin ose se si ta emëroja atë. flow Kjo eksperiencë më mësoi dy gjëra: 
 
 
 
 
 
 . 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 Shkruar nga Aleksei Kovrigin, Inxhinier Software në Social Discovery Group Shkruar nga Aleksei Kovrigin, Inxhinier Software në Social Discovery Group Aleksandër Kovrigin Aleksandër Kovrigin Grupi i zbulimit social Grupi i zbulimit social Eksploroni karrierën tuaj të ëndrrave në SDG dhe bashkohuni me një ekip që ri-definon inovacionin - mundësia juaj e ardhshme e madhe është vetëm një klik larg! 👉 Ready to shape the future of social discovery? ! Gjeni mundësinë tuaj të ardhshme të karrierës në SDG Gjeni mundësinë tuaj të ardhshme të karrierës në SDG

This story contains new, firsthand information uncovered by the writer.

See how we create Social Life 3.0 👉

Social Discovery Group Earns the Great Place To Work® Certification in the USA!

Swipe Away Loneliness: 2024 Dating Trends Forecast

Kjo audio është prodhuar në gjuhën origjinale të tregimit!

Unë vetëm donte kodin templates, por unë përfundoi duke shkruar një WebStorm plugin

About Author

KOMENTE

VARUR TAGS

KY ARTIKU U PARAQIT NË

Related Stories

Rrjeti SQD sapo vrau emetimet e tokenëve.Ja çfarë paguan 16 miliardë dollarë në DeFi TVL

Rrjeti SQD sapo vrau emetimet e tokenëve.Ja çfarë paguan 16 miliardë dollarë në DeFi TVL

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps