Traballar nun gran monorepo cun proxecto a longo prazo ten as súas rarezas. Cada vez que comecei un novo recurso, converteime dun desenvolvedor nun "xestor de ficheiros". Crear unha carpeta, organizar ficheiros, escribir código de boilerplate, copiar importacións dun ficheiro veciño, e non esquezas limpar a confusión... Cada acción só leva un minuto, pero nunha semana, realmente se suma. Ao principio, quería resolver o problema do "método sinxelo" - configurando os modelos de arquivo e código estándar en WebStorm. Pero eu rapidamente golpeou unha parede: os modelos non poden manexar os camiños de forma flexible, non poden converter correctamente Dúas dentro do código, e compartir configuracións con todo o equipo é un pesadelo. MyComponent my-component Entón pensei: Este pensamento levoume a crear o meu propio plugin. E sabes o que? Non era tan asustado como a xente di. Non tiven que aprender Java ou ler manuais durante anos. “What if I stop configuring the IDE and start programming it?” Neste artigo, vou compartir como pasei dun simple desexo de facer un modelo a construír unha ferramenta completa, e por que debes deixar de tolerar unha mala experiencia de desenvolvedor (DX). O problema: Infinite Copy-Paste e navegación "cega" Aínda que, por outra banda, non é certo que se produza un cambio significativo nas condicións de vida das persoas, como é o caso de España, onde o consumo de drogas é cada vez máis elevado. (es) ) e a lóxica ( ), e os estilos atópanse preto nun ficheiro separado. Esqueceu envolver o compoñente en ? Props non son destruídos na primeira liña? Non pasará a Revisión de Código. view.tsx index.tsx memo A trampa de solucións sinxelas: por que os modelos de ficheiros fracasaron O escenario ideal na miña cabeza parecía este: un clic - e eu xero toda a pila de arquivos (compoñente, vista, estilos). Resultou que WebStorm pode facer isto! Profundo nas configuracións , hai unha característica para crear non só ficheiros, senón xerarquías a través de "Templates infantís". ( Settings -> Editor -> File and Code Templates ) ( ) Fixemos rapidamente unha configuración: 
 
 
 
 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 ) Selecciono o modelo, introduzo o nome da carpeta e o nome do ficheiro, e o IDE crea a carpeta e organiza os arquivos. Voila! A euforia desapareceu cando enfrontei a dura realidade de Apache Velocity (o motor de modelos IDE): 
 
 Problemas de nomeamento: Converter MySuperComponent a my-super-component para os camiños de importación e volver a MY_SUPER_COMPONENT para constantes dentro do modelo é doloroso. 
 
 Acceso limitado á estrutura de ficheiros: os modelos só poden crear ficheiros en relación ao lugar no que se fixo clic.Se necesito crear ficheiros en carpetas de diferentes módulos ao mesmo tempo, os modelos son impotentes. 
 
 Sincronización de equipos: ¿Como comparto estas opcións? "Exportar a configuración a ZIP e importar, pero non mesturar as caixas de verificación"? 
 
 Fragilidade: O golpe final foi unha actualización de WebStorm. Despois doutra actualización de IDE, os modelos infantís configurados simplemente desapareceron. Why Not AI? Por que non AI? Unha pregunta xusta: por que escribir código a man na era da IA? por que non deixar que GitHub Copilot ou JetBrains AI creen os arquivos? eu uso activamente asistentes de IA no meu traballo, pero para tarefas de infraestrutura, perden por 3 razóns: 
 
 
 
 Determinismo: AI é un modelo probabilístico. Pode xerar a estrutura de ficheiros correcta 9 veces de 10. Pero na 10a vez, "hallucinará" unha importación adicional ou mesturar a carpeta. Cunha estrita guía de estilo, necesito unha ferramenta na que podo confiar 100%, non unha que teña que comprobar dúas veces. Un plugin non "pensar" ou "avisar", segue un algoritmo estrito. Contexto e velocidade: Para facer que a IA cree unha estrutura complexa en diferentes módulos, teño que escribir un prompt detallado: "Crear o compoñente X no dominio, a continuación, a implementación na web, use estes camiños...". Padróns: É difícil forzar a 20 desenvolvedores a usar exactamente o mesmo prompt, pero é fácil darlles un botón que garanta o mesmo resultado para todos. Maybe Write a Plugin? Quizais escriba un plugin? Cando quedou claro que os modelos estándar non o cortarían, só quedaba un camiño - para escribir a miña propia ferramenta. A idea de crear un plugin IDE personalizado era intimidante ao principio. No mundo frontend, tendemos a pensar que o desenvolvemento IntelliJ está reservado para enxeñeiros de Java hardcore. Mesmo a documentación de JetBrains advirte inmediatamente de que probablemente non necesite isto, ofrecendo (como LivePlugin). Basicamente díxolle: "Vai escribir scripts, non te metas neste caos". Alternativas Alternativas Estou acostumado a TS, NPM e Webpack, e aquí vin Gradle, JVM, e un SDK complexo. Quick Start: Plugin Template A miña primeira sorpresa foi a de JetBrains. Este é un modelo de repositorio preparado que resolve o problema de "páxina baleira". Modelo de Plugin da Plataforma IntelliJ Modelo de Plugin da Plataforma IntelliJ Non ten que configurar manualmente a construción, escribir manifestos, ou descubrir CI / CD. Só clona o repo, e está listo para ir. Ten un mundo de traballo, configurado Gradle, e Accións GitHub. Isto me salvou días, quizais semanas. Kotlin is Just Like TypeScript (Well, Almost) O meu segundo temor foi a linguaxe. Os plugins están escritos en Java ou Kotlin. Para alguén que escribe TypeScript moderno, a transición a Kotlin foi sorprendentemente suave. The syntax is very similar: 
 
 
 
 O mesmo val / var no canto de const / let. Lambdas e funcións de orde superior funcionan do mesmo xeito. A tipografía estrita, á que estamos acostumados en TS, funciona aínda máis fiablemente aquí. Basicamente, se vostede está cómodo con TypeScript, pode ler e escribir Kotlin na primeira noite. Documentation and AI Help A etapa máis difícil foi estudar o SDK da Plataforma IntelliJ. A documentación en JetBrains é enorme, pero a curva de aprendizaxe é áspera. Aquí, os axentes de IA viñeron ao rescate. Non os usei para escribir lóxica empresarial, senón como un motor de busca intelixente para a API. Preguntas como "Como amosar o balón de notificacións" aforraron moito tempo. Implementation: From Templates to Smart Assistant Implementación: De modelos a asistentes intelixentes Durante o desenvolvemento, identifiquei as tarefas clave que resolverían as maiores dores do equipo.O obxectivo principal era que a ferramenta sentise parte nativa do IDE, e non algún script alieníxena. 1 Xeración intelixente No mundo IntelliJ, calquera acción é unha acción. Para engadir un elemento ao menú de clic dereito, só tes que estender o unha clase. AnAction Pero non quería confundir o menú. Por que necesito un botón "Crear compoñente" se preme nunha carpeta con lóxica empresarial ou traducións? Aquí, a flexibilidade dos plugins brilla. método, que é chamado cada vez antes de mostrar o menú. engadín lóxica simple: update() 
 
 
 Estou no ficheiro de dominio? O ficheiro *.test.tsnot aínda existe aquí? Se si - mostrar o elemento de menú. Se non - ocultalo. O desenvolvedor só ve as ferramentas que son relevantes aquí e agora. Os modelos estándar non poden ir máis aló da carpeta actual, pero a nosa arquitectura asume dividir o código por módulos e a miúdo utiliza implementacións de plataforma de inxección de lóxica empresarial. Entón, implementei unha acción "intelixente".O desenvolvedor introduce o nome da entidade unha vez, e o plugin: 
 
 
 
 
 Crea un ficheiro de interface en dominio con boilerplate para inxección. Calcula os camiños para web e módulos móbiles. Crea os ficheiros de implementación correspondentes nestas carpetas. Corrixir nomes de ficheiros e clases (Kebab-case para ficheiros, PascalCase para clases). 
 
 Nuancia importante: Non hardcodei os modelos dentro das clases de Kotlin. Isto faría do plugin unha "caixa negra". En lugar diso, o plugin rexistra os deseños nas configuracións IDE estándar. Isto nos dá flexibilidade: calquera membro do equipo pode entrar nas configuracións, corrixir o estilo de código no modelo e o plugin recollerá inmediatamente os cambios. Non codifiquei os modelos dentro das clases de Kotlin. Isto faría do plugin unha "caixa negra". En lugar diso, o plugin rexistra os deseños nas configuracións IDE estándar. Isto nos dá flexibilidade: calquera membro do equipo pode entrar nas configuracións, corrixir o estilo de código no modelo e o plugin recollerá inmediatamente os cambios. Important nuance: i18n Navegación O segundo problema é o texto "morto". usamos un gancho personalizado e unha compoñente Para o IDE, esta é unha cadea sen sentido useLocalizedString(‘key’) <LocalizedText href=’key’ /> Para poñelos á vida, usei Esta API permite dicirlle ao IDE: "Mira, se ves unha cadea dentro deste gancho, trátala como unha ligazón a un ficheiro JSON". , Podo premer na clave de tradución e saltar ao ficheiro de localización dereito. PsiReferenceContributor Ctrl/Cmd Unha vez que comecei, non puiden parar Axiña que a barreira de entrada desapareceu e o marco básico estaba listo, fun levado. Resultou que ter acceso ao AST (Árbore de sintaxe abstracta) do código permite facer marabillas: 
 
 
 
 Auto-mocks: O plugin xera datos de mock para probas baseadas na interface. Cablaxe en probas: Ao crear un ficheiro de proba, o plugin atopa os chistes necesarios e engade importacións automaticamente. Wrappers (HOCs): Unha acción que envolve o compoñente seleccionado nun HOC de análise e pasa os props necesarios. Todas estas son accións de rutina, cada unha das cales aforra decenas de segundos e axuda a manter o foco na tarefa principal. Distribución 
 
 A entrega da ferramenta ao equipo foi sinxela. Non envíe ficheiros .jar en Slack. O plugin publícase no JetBrains Marketplace. Para un novo desenvolvedor, a incorporación agora parece así: "Instala WebStorm, descarga o noso plugin - e estás listo para ir". A entrega da ferramenta ao equipo foi sinxela. Non envíe ficheiros .jar en Slack. O plugin publícase no JetBrains Marketplace. Para un novo desenvolvedor, a incorporación agora parece así: "Instala WebStorm, descarga o noso plugin - e estás listo para ir". Xardín Mercado de JetBrains Resumo: A experiencia do desenvolvedor está nas túas mans Pasar o tempo estudando a infraestrutura, configurando o ambiente e codificando nunha lingua "estranxeira" para aforrar un par de minutos ao día? de xeito absoluto. Se conta tempo puro, o aforro pode non parecer enorme - quizais unha hora ou dúas ao mes. Cando a ferramenta funciona de forma previsible e rápida, as micro-anormalidades que se acumulan durante o día desaparecen. Deixei de pensar en que carpeta poñer o ficheiro ou como nomealo. flow Esta experiencia ensinoume dúas cousas: 
 
 
 
 
 
 . 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 Escrito por Aleksei Kovrigin, enxeñeiro de software en Social Discovery Group Escrito por Aleksei Kovrigin, enxeñeiro de software en Social Discovery Group Aleksei Kovrigin Aleksei Kovrigin Grupo de descubrimento social Grupo de descubrimento social Explora a túa carreira de soño en SDG e únete a un equipo que redefine a innovación - a túa próxima gran oportunidade está a só un clic de distancia! 👉 Ready to shape the future of social discovery? ! Atopa a túa próxima oportunidade de carreira en SDG Atopa a túa próxima oportunidade de carreira en 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

Este audio está producido na lingua orixinal da historia!

Eu só quería modelos de código, pero acabo de escribir un complemento WebStorm

About Author

COMENTARIOS

Etiquetas colgantes

ESTE ARTIGO FOI PRESENTADO EN

Related Stories

HackerNoon Decoded 2024: Celebrating Our Life Hacking Community!

HackerNoon Decoded 2024: Celebrating Our Writing Community!

HackerNoon Decoded 2024: Celebrating Our Web3 Community!

HackerNoon Decoded 2024: Celebrating Our Media Community!

HackerNoon Decoded 2024: Celebrating Our Life Hacking Community!

HackerNoon Decoded 2024: Celebrating Our Writing Community!

HackerNoon Decoded 2024: Celebrating Our Web3 Community!

HackerNoon Decoded 2024: Celebrating Our Media Community!

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps