Trabajar en un monorepo grande con un proyecto a largo plazo tiene sus rarezas. Cada vez que empecé una nueva característica, me convertí de un desarrollador a un “gerente de archivos”. Crear una carpeta, organizar archivos, escribir código de boilerplate, copiar importaciones de un archivo vecino, y no olvidar limpiar el desorden... Cada acción solo toma un minuto, pero en una semana, realmente se suma. Lo más importante, esta rutina drena energía. Al principio, quería resolver el problema de la “muy fácil manera” - configurando las plantillas estándar de archivo y código en WebStorm. pero rápidamente golpeé un muro: las plantillas no pueden manejar los caminos de manera flexible, no pueden convertir correctamente Dos dentro del código, y compartir las configuraciones con todo el equipo es una pesadilla.La herramienta que se suponía que ayudaba comenzó a molestarme. MyComponent my-component Entonces pensé: Este pensamiento me llevó a crear mi propio plugin. Y sabes qué? No era tan aterrador como la gente dice. No tuve que aprender Java o leer manuales durante años. “What if I stop configuring the IDE and start programming it?” En este artículo, voy a compartir cómo he pasado de un simple deseo de hacer una plantilla a construir una herramienta completa, y por qué debes dejar de tolerar una mala Experiencia de Desarrollador (DX). El problema: Infinite Copy-Paste y la navegación “ciego” En la actualidad, la mayoría de los desarrolladores trabajan en nuestro proyecto en un solo repositorio. Esto impone restricciones estrictas sobre el estilo de código. Por ejemplo, cualquier componente de React siempre está separado en una parte de presentación ( ) y la lógica ( ), y los estilos se encuentran cerca en un archivo separado. Olvidó de envolver el componente en ¿Los props no se destruyen en la primera línea?No pasarás la Revisión de Código. view.tsx index.tsx memo La trampa de soluciones simples: por qué los modelos de archivos fallaron Cuando finalmente me cansé de la rutina, cavé en las configuraciones.El escenario ideal en mi cabeza parecía esto: un clic - y genero todo el montón de archivos (componente, vista, estilos). Resultó que WebStorm puede hacer esto! Profundo en las configuraciones , hay una característica para crear no solo archivos, sino jerarquías a través de "Templates de niños". ( Settings -> Editor -> File and Code Templates ) ( ) A continuación, se establece una 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 ) Elige el modelo, introduzca el nombre de la carpeta y el nombre del archivo, y el IDE crea la carpeta y organiza los archivos. Voila! La euforia desapareció cuando me enfrenté a la dura realidad de Apache Velocity (el motor de plantillas IDE): 
 
 Problemas de nombramiento: Convertir MySuperComponent a my-super-componente para los caminos de importación y volver a MY_SUPER_COMPONENT para constantes dentro del modelo es doloroso. 
 
 Acceso limitado a la estructura de archivos: los modelos solo pueden crear archivos en relación con el lugar en el que haya hecho clic.Si necesito crear archivos en carpetas de diferentes módulos al mismo tiempo, los modelos son impotentes. 
 
 Sincronización de equipos: ¿Cómo comparto estas configuraciones? "Exportar a ZIP e importar, pero no mezclar las cajas de verificación"? 
 
 Fragilidad: El golpe final fue una actualización de WebStorm. Después de otra actualización de IDE, mis plantillas de niños configuradas simplemente desaparecieron. Why Not AI? ¿Por qué no AI? Una pregunta justa: ¿por qué escribir código a mano en la era de la IA? ¿Por qué no dejar que GitHub Copilot o JetBrains AI creen los archivos? Yo uso activamente asistentes de IA en mi trabajo, pero para tareas de infraestructura, pierden por 3 razones: 
 
 
 
 Determinismo: AI es un modelo probabilístico. Puede generar la estructura de archivos correcta 9 veces de 10.Pero en la 10a vez, “hallucinará” una importación adicional o mezclará la carpeta. Con una guía de estilo estricta, necesito una herramienta en la que puedo confiar al 100%, no una que tenga que comprobar dos veces.Un plugin no “piensa” o “guisa”, sigue un algoritmo estricto. Contexto y Velocidad: Para hacer que la IA crea una estructura compleja en diferentes módulos, necesito escribir un prompt detallado: "Crear el componente X en el dominio, luego la implementación en la web, use estos caminos...". Estándares: Es difícil forzar a 20 desarrolladores a usar exactamente el mismo prompt, pero es fácil darles un botón que garantice el mismo resultado para todos. Maybe Write a Plugin? ¿Escribir un plugin? Cuando se hizo claro que los modelos estándar no lo cortarían, sólo había un camino que seguir: escribir mi propia herramienta. La idea de crear un plugin IDE personalizado era intimidante al principio. En el mundo frontend, tendemos a pensar que el desarrollo de IntelliJ está reservado para ingenieros Java hardcore. Incluso la documentación de JetBrains le advierte de inmediato que probablemente no necesita esto, ofreciendo (como LivePlugin). básicamente te dice: "Vete a escribir scripts, no te metas en esta confusión". Alternativas Alternativas Estoy acostumbrado a TS, NPM y Webpack, y aquí vi Gradle, JVM, y un SDK complejo. Quick Start: Plugin Template La primera sorpresa agradable fue la de JetBrains. Este es un modelo de repositorio preparado que resuelve el problema de "página en blanco". Modelo Plugin de Plataforma IntelliJ Modelo Plugin de Plataforma IntelliJ Usted no necesita configurar manualmente la edificación, escribir manifiestos, o averiguar el CI / CD. Sólo clona el repo, y usted está listo para ir. Usted tiene un mundo de trabajo, configurado Gradle, y GitHub Acciones. Esto me salvó días, tal vez semanas. Kotlin is Just Like TypeScript (Well, Almost) Mi segundo miedo fue el idioma.Los plugins están escritos en Java o Kotlin. Para alguien que escribe TypeScript moderno, la transición a Kotlin fue sorprendentemente suave. The syntax is very similar: 
 
 
 
 El mismo val / var en lugar de const / let. Lambdas y funciones de orden superior funcionan exactamente lo mismo. La tipografía estricta, a la que estamos acostumbrados en TS, funciona aún más fiablemente aquí. Básicamente, si te sientes cómodo con TypeScript, puedes leer y escribir Kotlin desde la primera noche. Documentation and AI Help La etapa más difícil fue estudiar el SDK de la Plataforma IntelliJ. La documentación en JetBrains es enorme, pero la curva de aprendizaje es abrupta. Aquí, los agentes de IA vinieron al rescate. No los usé para escribir lógica empresarial, sino como un motor de búsqueda inteligente para la API. Preguntas como "Cómo mostrar el balón de notificaciones" ahorraron mucho tiempo. En lugar de una excavación a través de los documentos, obtuve un ejemplo de código, y luego lo descubrí yo mismo. Implementation: From Templates to Smart Assistant Implementación: De modelos a asistentes inteligentes Durante el desarrollo, identificé tareas clave que resolverían los mayores dolores del equipo.El objetivo principal era que la herramienta se sintiera parte nativa del IDE, y no algún script alienígena. 1 Generación inteligente En el mundo de IntelliJ, cualquier acción es una acción. Para agregar un elemento al menú de clic derecho, sólo tienes que extender el de clase . AnAction Pero no quería confundir el menú. ¿Por qué necesito un botón "Crear Componente" si hice clic en una carpeta con lógica empresarial o traducciones? Aquí, la flexibilidad de los plugins brilla. La clase de acción tiene una método, que se llama cada vez antes de mostrar el menú. agregé una lógica simple: update() 
 
 
 ¿Estoy en la carpeta de dominio? ¿El archivo *.test.tsnot todavía existe aquí? Si es así - mostrar el elemento de menú. Si no - ocultarlo. El desarrollador sólo ve las herramientas que son relevantes aquí y ahora. Las plantillas estándar no pueden ir más allá de la carpeta actual, pero nuestra arquitectura asume dividir el código por módulos y a menudo utiliza implementaciones de plataforma de implementación de la lógica empresarial. Así que implementé una acción "inteligente".El desarrollador introduce el nombre de la entidad una vez, y el plugin: 
 
 
 
 
 Crea un archivo de interfaz en el dominio con boilerplate para inyección. Calcula los caminos a los módulos web y móviles. Crea los archivos de implementación correspondientes en esas carpetas. Corregir los nombres de archivos y clases (Kebab-case para archivos, PascalCase para clases). 
 
 Nuancia importante: No he codificado las plantillas dentro de las clases de Kotlin. Esto haría del plugin una "caixa negra". En su lugar, el plugin registra los diseños en las configuraciones IDE estándar. Esto nos da flexibilidad: cualquier miembro del equipo puede entrar en las configuraciones, corregir el estilo de código en la plantilla, y el plugin recogerá inmediatamente los cambios. Nuancia importante: No he codificado las plantillas dentro de las clases de Kotlin. Esto haría del plugin una "caixa negra". En su lugar, el plugin registra los diseños en las configuraciones IDE estándar. Esto nos da flexibilidad: cualquier miembro del equipo puede entrar en las configuraciones, corregir el estilo de código en la plantilla, y el plugin recogerá inmediatamente los cambios. i18n Navegación El segundo problema es el texto “muerto”. usamos un hook personalizado y un componente Para el IDE, esta es una cadena sin sentido useLocalizedString(‘key’) <LocalizedText href=’key’ /> Para llevarlos a la vida, usé Esta API le permite decirle al IDE: “Mira, si ves una cadena dentro de este hook, trátalo como un enlace a un archivo JSON”. , Puedo hacer clic en la clave de traducción y saltar al archivo de localización a la derecha. PsiReferenceContributor Ctrl/Cmd Una vez que empecé, no pude parar Tan pronto como la barrera de entrada había desaparecido y el marco básico estaba listo, me llevaron. 
 
 
 
 Auto-Mocks: El plugin genera datos de mock para pruebas basadas en la interfaz. Cables en las pruebas: Al crear un archivo de prueba, el plugin encuentra los chistes necesarios y agrega las importaciones automáticamente. Wrappers (HOCs): Una acción que envuelve el componente seleccionado en un HOC de análisis y pasa los props requeridos. Todas estas son acciones de rutina, cada una de las cuales ahorra docenas de segundos y ayuda a mantener el foco en la tarea principal. Distribución 
 
 Entregar la herramienta al equipo fue sencillo. No enviar archivos .jar en Slack. El plugin se publica en el JetBrains Marketplace. Para un nuevo desarrollador, el embarque ahora parece así: “Instala WebStorm, descarga nuestro plugin – y estás listo para ir.” Entregar la herramienta al equipo fue sencillo. No enviar archivos .jar en Slack. El plugin se publica en el JetBrains Marketplace. Para un nuevo desarrollador, el embarque ahora parece así: “Instala WebStorm, descarga nuestro plugin – y estás listo para ir.” JAR Mercado de JetBrains Resumen: La experiencia del desarrollador está en tus manos ¿Vale la pena pasar el tiempo estudiando la infraestructura, configurando el entorno y codificando en un idioma “extranjero” para ahorrar unos minutos al día? absolutamente . Si se cuenta el tiempo puro, el ahorro puede no parecer enorme - tal vez una hora o dos al mes. Cuando la herramienta funciona de forma previsible y rápida, desaparecen las micro-anormalidades que se acumulan durante el día.Me detuve a pensar en qué carpeta colocar el archivo o qué nombrarlo.Primí un botón, y el IDE hace exactamente lo que se necesita. flow Esta experiencia me ha enseñado dos cosas: 
 
 
 
 
 
 . 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, Ingeniero de Software en Social Discovery Group Escrito por Ingeniero de Software en Alejandro Kovrigin Grupo Discovery Social Alejandro Kovrigin Alejandro Kovrigin Grupo Discovery Social Grupo Discovery Social Explora tu carrera de sueño en SDG y únete a un equipo que redefine la innovación - tu próxima gran oportunidad está a solo un clic de distancia! 👉 Ready to shape the future of social discovery? ! Encuentra tu próxima oportunidad de carrera en SDG Encuentra tu próxima oportunidad de carrera 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 es producido en el idioma original de la historia!

Sólo quería plantillas de código, pero terminé escribiendo un complemento de WebStorm

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Navegando por las aguas: desarrollo de aplicaciones RAG de nivel de producción con lagos de datos

Cómo mejorar su flujo de trabajo 10 veces: 17 aplicaciones esenciales

Valhalla de Floki se une como patrocinador asociado de la gira de la India por Sri Lanka

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

Navegando por las aguas: desarrollo de aplicaciones RAG de nivel de producción con lagos de datos

Cómo mejorar su flujo de trabajo 10 veces: 17 aplicaciones esenciales

Valhalla de Floki se une como patrocinador asociado de la gira de la India por Sri Lanka

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps