Кожны раз, калі я пачаў новую функцыю, я пераходзіў з распрацоўшчыка ў «файлавы менеджэр». Стварыць папку, арганізаваць файлы, напісаць код котлы, скапіяваць імпорт з суседніх файлаў, і не забывайце вычысці нешта... Кожнае дзеянне займае толькі хвіліну, але за тыдзень, гэта сапраўды павялічваецца. Найбольш важнае, гэта руціна вытрае энергію. У першую чаргу, я хацеў вырашаць праблему «простым шляхам» — канфігураваць стандартныя шаблоны файла і кода ў WebStorm. Але я хутка трапіў у сцяну: шаблоны не могуць гандляваць шляхі гнучкі, яны не могуць правільна пераўтвараць два Нават назвы некаторых мы не чулі, а калі і бачылі такія аўто, то толькі ў кіно. MyComponent my-component Тады я падумаў: Гэтая думка прывяла мяне да стварэння свайго ўласнага плагіна. І вы ведаеце што? Гэта было не так страшна, як кажуць людзі. Я не маўчаў вывучаць Java або чытаць рукапісы на працягу гадоў. Выказалася, што для распрацоўшчыка Frontend, сучасны Kotlin выглядае сумна, як TypeScript. “What if I stop configuring the IDE and start programming it?” У гэтай артыкуле, я падзялюся, як я пайшоў ад простага жадання зрабіць шаблон да будаўніцтва поўным інструментам, і чаму вы павінны спыніць толерантнасць слабых Developer Experience (DX). The Problem: Infinite Copy-Paste і «Сляпы» навігацыя У гэтым выпадку пешаходы, якія сканчаюць пераход, уяўляюць істотную небяспеку ( а) і абмежаванне ( У гэтым выпадку пешаходы, якія сканчаюць пераход, уяўляюць істотную небяспеку (мал. — А як вы збіраецеся пракарміць дзіця на першым месцы? — запытаў суддзя. view.tsx index.tsx memo Пастка простых рашэнняў: Чаму шаблоны файлаў не спрацавалі Ідэальны сцэнарый у мяне выглядаў так: адзін клік — і я генерую ўсю групу файлаў (компонент, пагляд, стылі). Здавалася, што WebStorm можа зрабіць гэта! Глыбока ў параметрах , ёсць функцыя стварэння не толькі файлаў, але іерархій з дапамогай «Дзеці шаблоны». ( 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 <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 ) Я выбраў шаблон, увайшоў у назву папкі і назву файла, і IDE стварыў папку і арганізаваў файлы самі. Voila! Эўфарыя знікла, калі я сустракаўся з жорсткай рэальнасцю Apache Velocity (двигуна шаблонаў IDE): 
 
 Праблемы названня: Пераўтварэнне MySuperComponent ў my-super-компонент для імпорту шляхоў і назад у MY_SUPER_COMPONENT для канстант у межах шаблона болей. 
 
 У нашай багатай беларускай літаратуры няма другога такога твора, які па энцыклапедычнасці выяўлення ў ім нацыянальнага, так набліжаўся б да "Новай зямлі". 
 
 Нават назвы некаторых мы не чулі, а калі і бачылі такія аўто, то толькі ў кіно. 
 
 Напрыклад, панятак гендарфлюіднасці (рухомасці гендараў), згодна з якім чалавек можа прачнуцца зранку, адчуваючы сябе адным гендарам, а заснуць — з іншым, і гэта цалкам нармальна. Why Not AI? Чаму не хто? — Якое, на ваш погляд, найбольш знакавае пытанне беларусаў (па аналогіі з рускімі “Что делать?” і “Кто виноват?”)? 
 
 
 
 Дэтэмінізм: AI з'яўляецца мадэлью верагоднасці. Ён можа стварыць правільную структуру файлаў 9 разоў з 10. Але ў 10-ы раз, ён будзе "галюзінаваць" дадатковы імпорт або змяшаць папку. З строгім сілавым кіраўніцтвам, мне патрэбны інструмент, які я магу даверыць 100%, не той, які я магу падвойна праверыць. Плугин не "думае" або "гадуе", ён выконвае строгі алгарытм. Контекст і хуткасць: Для таго, каб AI стварыць складаную структуру ў розных модулях, я магу напісаць падрабязнае просьбу: "Стварыце кампанент X у дамене, затым рэалізацыю ў вэб-сайце, выкарыстоўвайце гэтыя шляхі ...". Размова сапраўды вельмі важная — мы ж усе цудоўна разумеем, што любы, самы лепшы дэкрэт можна звесці на нішто практыкай прымянення. Maybe Write a Plugin? Можа, вы хочаце пісаць Plugin? Калі стала ясна, што стандартныя шаблоны не скарацілі б яго, застаўся толькі адзін шлях - напісаць сваё ўласнае інструмент. Ідэя стварэння задавальняенага IDE-плагіна быў запушчальны ў першую чаргу. У свеце фронтэнду, мы схільныя думаць, што распрацоўка IntelliJ зарэгістравана для хардкорных інжынераў Java. Навіць дакументацыя JetBrains адразу абмяркоўвае, што вам, вядома, гэта не патрэбна, прапаноўваючы (напрыклад, LivePlugin). Гэта ў асноўным кажа вам: "Прыйдзіце напісаць сцэнары, не ўвайдзіце ў гэты хаос". Альтэрнатыўныя Альтэрнатыўныя Я звычайны з TS, NPM, і Webpack, і тут я бачыў Gradle, JVM, і складаны SDK. Quick Start: Plugin Template Першым прыемным сюрпрызам быў Гэта рэпазітарны шаблон, які вырашае праблему "пустая старонка". IntelliJ Platform Plugin Template Сцягнуць IntelliJ Platform Plugin Template Вам не трэба ручна канфігураваць будынак, напісаць маніфесты або выявіць CI / CD. Вы проста клонуеце рэпо, і вы гатовыя ісці. Kotlin is Just Like TypeScript (Well, Almost) Мой другі страх быў мова. Плагіны напісаны на Java або Kotlin. Для тых, хто піша сучасны TypeScript, пераход на Kotlin быў выдатна лёгкім. The syntax is very similar: 
 
 
 
 Тое ж самае валь / var замест const / let. Lambdas і функцыі вышэйшага парадку працуюць такія ж. Праблема ў тым, што добрыя матывы не заўсёды добрыя справы. У асноўным, калі вам зручна з TypeScript, вы можаце прачытаць і напісаць Kotlin з самого першага вечара. Documentation and AI Help Найлепшая траекторыя руху пры змене паласы - гэта вельмі плыўная, але не занадта расцягнутая па даўжыні крывая. Тут агенты AI прыйшлі да выхаду. Я не выкарыстоўваў іх, каб напісаць бізнес-логіку, але як розумную пошукавую рухавіцу для API. Запыты, такія як "Як паказаць паведамленне балон" захаваў шмат часу. Implementation: From Templates to Smart Assistant Імплементацыя: ад шаблонаў да Smart Assistant Падчас развіцця, я вызначыў ключавыя задачы, якія будуць вырашаць найбуйнейшыя болі каманды. Галоўны метад быў для інструмента, каб адчуць навагоднюю частку IDE, а не некаторыя іншаземныя сцэнары. 1 Смартвая генерацыя Калі вы хочаце падзяліцца сваёй думкай з майстрам, рабіце гэта максімальна ветліва. І клас. AnAction Але я не хацеў заплутаць меню. Чаму мне патрэбна кнопка "Стварыць кампанент", калі я націснуў на папку з бізнес-логікай або перакладам? Тут глыбокасць плагінаў сядзіць. метад, які выклікае кожны раз, перш чым паказаць меню. я дадаў простая логіка: update() 
 
 
 Ці я ў доменах? Ці існуюць тут яшчэ файлы *.test.tsnot? Калі так - паказаць пункт меню. Калі не - схаваць яго. Развівальнік бачыць толькі інструменты, якія актуальныя тут і цяпер. Сярод версій гульняў онлайн call of duty можна знайсці мноства займальных і дасціпных сюжэтаў, а апошняй навінкай, выпушчанай у канцы восені гэтага года, стала гульня Call of Duty: Ghost. Так, я імплементаваў "смартную" акцыю. Развівальнік увайшоў у назву суб'екта раз, і плагіна: 
 
 
 
 
 Стварыць файл інтэрфейсу ў домене з boilerplate для ўпрыгожвання. Вылічвае шляхі да вэб- і мабільных модуляў. Стварыць адпаведныя файлы рэалізацыі ў гэтых папках. Выпраўляе назвы файлаў і класаў (Kebab-case для файлаў, PascalCase для класаў). 
 
 Важны нюанс: Я не жорсткі код шаблонаў у межах класаў Kotlin. Гэта зрабіла б плагіна «чорнай кошыкай». Уместо гэтага, плагіна зарэгіструе размяшчэнне ў стандартных настроях IDE. Гэта дае нам гнучкі: любы член каманды можа ісці ў параметры, скараціць стыль кода ў шаблоне, і плагіна адразу выйграе змены. Важны нюанс: Я не жорсткі код шаблонаў у межах класаў Kotlin. Гэта зрабіла б плагіна «чорнай кошыкай». Уместо гэтага, плагіна зарэгіструе размяшчэнне ў стандартных настроях IDE. Гэта дае нам гнучкі: любы член каманды можа ісці ў параметры, скараціць стыль кода ў шаблоне, і плагіна адразу выйграе змены. I18N Навігацыя Другая праблема — «мертвы» тэкст. Мы выкарыстоўваем наладны хак І частка Для IDE, гэта безнаяўная струна useLocalizedString(‘key’) <LocalizedText href=’key’ /> Для таго, каб прыйсці да жыцця, я выкарыстоўваў Гэтая API дазваляе вам сказаць IDE: «Глядзіце, калі вы бачыце строк унутры гэтага хака, апрацоўвайце яго як спасылка на JSON-файл». Нават назвы некаторых мы не чулі, а калі і бачылі такія аўто, то толькі ў кіно. PsiReferenceContributor Ctrl/Cmd Калі я пачаў, я не мог спыніцца Калі б у мяне з'явілася шмат грошай, у тэатра былі б іншыя памяшканні, іншыя касцюмы. 
 
 
 
 Auto-mocks: Плугин генеруе макавыя дадзеныя для тэстаў на аснове інтэрфейсу. Пры стварэння тэст-файла, плагіна знаходзіць неабходныя шапкі і дае імпарты аўтаматычна. Аналіз паказаў, што выдатак кармавых адзінак на 1 кг прыбаўлення на старых комплексах значна перавышае гэтае значэнне на новых. Усе гэта з'яўляюцца рутиннымі дзеяннямі, кожная з якіх забяспечвае дзясяткі секунд і дапамагае падтрымліваць фокус на асноўным задачы. распрацоўкі 
 
 Дастаўка інструмента ў камандзе была простая. Няма адпраўкі .jar файлаў у Slack. Плугин апублікаваны на JetBrains Marketplace. Для новага распрацоўшчыка, набор цяпер выглядае так: “Інсталяваць WebStorm, загрузіць наш плугин — і вы гатовыя ісці”. Дастаўка інструмента ў камандзе была простая. Няма адпраўкі .jar файлаў у Slack. Плугин апублікаваны на JetBrains Marketplace. Для новага распрацоўшчыка, набор цяпер выглядае так: “Інсталяваць WebStorm, загрузіць наш плугин — і вы гатовыя ісці”. Яр JetBrains Рынак Кнігадрукаванне адкрыла шырокі шлях для Ці варта траціць час на вывучэнне інфраструктуры, наладжванне асяроддзя і кодыроўку на «чужой» мове, каб захаваць пару хвілін у дзень? Абсалютна Калі вы лічыце чысты час, захаванне можа не выглядаць велізарным — можа, гадзіну або два ў месяц. Калі інструмент працуе прагнозна і хутка, мікра-дразнення, якія набіраюцца на працягу дня, знікаюць.Я спыніў думаць пра тое, якую папку ўбачыць файл або што назваць яго.Я націсніў на кнопку, і IDE робіць менавіта тое, што трэба. 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 Напісанне Інжынер праграмы ў Алексіевіч Ковалін Група Social Discovery Алексіевіч Ковалін Алексіевіч Ковалін Група Social Discovery Група Social Discovery Вывучайце кар'еру сваёй мечты ў SDG і далучайцеся да каманды, якая пераўтварае інновацыі - ваша наступная вялікая магчымасць толькі ў кліклі! 👉 Ready to shape the future of social discovery? ! Find your next career opportuniry at SDG Знайдзіце сваю наступную кар'ерную магчымасць у 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

Гэта аўдыя зроблена на мове арыгіналу гісторыі!

Я проста хацеў шаблоны кода, але я скончыў напісанне WebStorm плагіна

About Author

КАМЕНТАРЫІ

ВЕСІЦЬ БІРКІ

ГЭТЫ АРТЫКУЛ БЫЎ ПРАДСТАЎЛЕНЫ Ў

Related Stories

HackerNoon Hackathon: Стань афіцыйным партнёрам экасістэмы

10 Reasons Why Publishing on HackerNoon Will Skyrocket Your Reach and Impact

How Mercuryo and Ledger Are Reinventing Crypto Payments with a Self-Custody Debit Card

34 Stories To Learn About Eos

HackerNoon Hackathon: Стань афіцыйным партнёрам экасістэмы

10 Reasons Why Publishing on HackerNoon Will Skyrocket Your Reach and Impact

How Mercuryo and Ledger Are Reinventing Crypto Payments with a Self-Custody Debit Card

34 Stories To Learn About Eos

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps