長期的なプロジェクトで大きなモノレポで作業するには、奇妙な点があります。新しい機能を開始するたびに、私は開発者から「ファイルマネージャー」に変わりました。 フォルダを作成し、ファイルを整理し、ボイラープレートコードを書く、隣のファイルから輸入をコピーし、混乱を掃除することを忘れないでください... 各アクションは1分間かかりますが、一週間で本当に増加します。 最初は、WebStormで標準のファイルとコードテンプレートを構成することによって、「簡単な方法」で問題を解決したいと思いましたが、すぐに壁にぶつかりました:テンプレートは柔軟にパスを処理できません、正しく変換できません。 2位 コードの中に入り、全体のチームと設定を共有することは悪夢です。 MyComponent my-component そこで私は思った: この考えは、私自身のプラグインを作成するために私を導きました。そしてあなたは何を知っていますか?それは人々が言うほど怖くありませんでした。私はJavaを学ぶ必要もなく、何年もマニュアルを読む必要もありませんでした。 “What if I stop configuring the IDE and start programming it?” この記事では、シンプルなテンプレートを作成するという欲求から完全なツールを構築するという欲求から、なぜ悪い開発者体験(DX)を許すのをやめるべきかを説明します。 The Problem: Infinite Copy-Paste and “Blind” Navigation(無限のコピーパスタと”盲目の”ナビゲーション) 何十人もの開発者が単一のリポジトリでプロジェクトに取り組んでいます。これはコードスタイルに厳しい制限を課します。例えば、Reactのコンポーネントは常にプレゼンテーション部分に分けられます( 論理( ), and styles lie near in a separate file. Forgot to wrap the component in プロプションは最初の行で破壊されない? あなたはコードレビューを経過しません。 view.tsx index.tsx memo シンプルなソリューションの:ファイルテンプレートが失敗した理由 ようやくルーチンにうんざりしたとき、私は設定に掘り下げました。私の頭の中の理想的なシナリオは、このように見えました: 1 クリック - そして私はファイル (コンポーネント、ビュー、スタイル) 全体を生成します。 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 <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-component に変換し、テンプレート内の常数を MY_SUPER_COMPONENT に戻すのは痛ましいことです。 
 
 ファイル構造へのアクセス制限: テンプレートは、クリックした場所に関連してのみファイルを作成できます. If I need to create files in folders of different modules at the same time, templates are powerless. 
 
 チーム同期: これらの設定を共有するにはどうすればよいですか? 「設定を ZIP にエクスポートしてインポートするが、チェックボックスを混ぜない」は、20 人のチームでは機能しません。 
 
 Fragility: The final blow was a WebStorm update. もう一つの IDE アップデートの後、私の設定した Child Templates は単に消えました。 Why Not AI? なんでAIじゃないの? なぜAIの時代にコードを手で書くのか?なぜGitHub CopilotやJetBrains AIにファイルを作成させないのか?私は積極的にAIアシスタントを使用していますが、インフラストラクチャのタスクでは3つの理由で負けています。 
 
 
 
 決定主義:AIは確率モデルです。10のうち9回で正しいファイル構造を生成するかもしれないが、10回目で、それは追加のインポートまたはフォルダを混ぜる「幻想」になります。厳格なスタイルガイドで、私は100%信頼できるツールを必要とします。 コンテキストとスピード: AI が異なるモジュールで複雑な構造を作成するようにするには、「Domain でコンポーネント X を作成し、Web で実装し、これらのパスを使用する」という詳細なプロンプトを書く必要があります。 標準: 20 人の開発者が同じプロンプトを使用するように強制することは難しいが、すべての人に同じ結果を保証するボタンを1つ与えることは容易である。 Maybe Write a Plugin? プラグインを書くのかな? 標準テンプレートがそれを切り取らないということが明らかになったとき、自分のツールを書くことだけが残り1つの方法でした。カスタマイズされたIDEプラグインを作成するというアイデアは最初は恐ろしかった。フロントエンドの世界では、IntelliJの開発はハードコアのJavaエンジニアに限定されていると考える傾向があります。JetBrainsのドキュメンタリーでさえ、あなたがおそらくこれを必要としないことを直ちに警告しています。 (LivePluginのように) 基本的には、「スクリプトを書こう、この混乱に巻き込まないでください」と言います。 代替 代替 私はTS、NPM、Webpackに慣れていて、ここで私はGradle、JVM、そして複雑なSDKを見ました。 Quick Start: Plugin Template 最初の嬉しいサプライズは、 JetBrains. これは「空白ページ」の問題を解決する準備済みのリポジトリ テンプレートです。 IntelliJ Platform Plugin Template IntelliJプラットフォームプラグイン テンプレート あなたはビルドを手動で構成する必要はありません、宣言を書く必要はありません、またはCI / CDを発見する必要はありません. あなたはリポをクローンするだけで、あなたは行く準備ができています. あなたは働くHello World、構成 Gradle、GitHubアクションを持っています. これは私に日々、おそらく数週間を節約しました。 Kotlin is Just Like TypeScript (Well, Almost) 私の2番目の恐怖は言語でした。プラグインはJavaやKotlinで書かれています。現代のTypeScriptを書く人にとって、Kotlinへの移行は驚くほどスムーズでした。 The syntax is very similar: 
 
 
 
 同じ val / var は const / let の代わりにします。 Lambdas と Higher Order 関数は同じように動作します。 TS で慣れてきた厳格な書き込みは、ここでさらに信頼性が高くなります。 基本的に、あなたがTypeScriptで快適であれば、あなたは最初の晩からKotlinを読み書きすることができます。 Documentation and AI Help 最も困難な段階は、IntelliJ Platform SDKを研究することでした。JetBrainsのドキュメンタリーは膨大ですが、学習曲線は急激です。どのクラスが「ファイルを右クリックする」のかを理解するには、フォーラムで何時間も過ごすことができます。 ここで、AIエージェントは救助にやって来た。ビジネス論理を書くために使うのではなく、APIのスマートな検索エンジンとして使用しました。「通知ボールを表示する方法」のようなクエリは多くの時間を節約しました。 Implementation: From Templates to Smart Assistant 実装:テンプレートからスマートアシスタントまで 開発中に、チームの最大の痛みを解決する重要なタスクを特定しました. 主な目標は、ツールがIDEのネイティブな部分でなく、いくつかのエイリアンスクリプトに感じることでした. I will not go deep into specific APIs - what matters is what the IDE allows you to do. 1.スマート世代 IntelliJの世界では、すべてのアクションはアクションです. 右クリックメニューにアイテムを追加するには、単にアクションを拡張する必要があります。 クラス AnAction しかし、私はメニューを混乱させたくありませんでした。なぜ私はビジネスロジックや翻訳のフォルダをクリックした場合に「コンポーネントを作成」ボタンを必要としますか? ここでは、プラグインの柔軟性が輝きます。 メニューを表示する前に毎回呼ばれる方法. I added simple logic: update() 
 
 
 ドメインフォルダにありますか? ファイル *.test.tsnot はまだ存在しますか? もしそうなら - メニューアイテムを表示する. もしそうでないなら - 隠す. 開発者は、ここと今、関連するツールだけを見る。 標準のテンプレートは現在のフォルダの外側には入れないが、当社のアーキテクチャはモジュールごとにコードを分割し、しばしばビジネスロジックのプラットフォーム実装の注入を使用する。 したがって、私は「スマート」のアクションを実装しました. 開発者はエンティティ名を一度入力し、プラグイン: 
 
 
 
 
 Boilerplate for injection でドメイン内のインターフェイスファイルを作成します。 Webおよびモバイルモジュールへのパスを計算します。 これらのフォルダで適切な実装ファイルを作成します。 ファイルとクラスの名前を修正します(ファイルのためのケバブケース、クラスのためのPascalCase)。 
 
 重要なニュアンス:私はKotlinクラス内のテンプレートをハードコードしませんでした。これはプラグインを「ブラックボックス」にします。代わりに、プラグインは標準のIDE設定でレイアウトを登録します。これは私たちに柔軟性を提供します:どのチームメンバーも設定に入り、テンプレート内のコードスタイルを修正し、プラグインはすぐに変更を取得します。 重要なニュアンス:私はKotlinクラス内のテンプレートをハードコードしませんでした。これはプラグインを「ブラックボックス」にします。代わりに、プラグインは標準のIDE設定でレイアウトを登録します。これは私たちに柔軟性を提供します:どのチームメンバーも設定に入り、テンプレート内のコードスタイルを修正し、プラグインはすぐに変更を取得します。 i18n ナビゲーション 第2の問題は「死んだ」テキストです 私たちはカスタムハックを使用しています A Component IDEにとって、これは無意味な文字列である。 useLocalizedString(‘key’) <LocalizedText href=’key’ /> 人生を生きるために、私は使った この API は IDE に「見てください、このハックの内部に文字列が見えたら、それを JSON ファイルへのリンクとして扱ってください」と伝えます。 , I can click on the translation key and jump to the right localization file. No more manual searching. 私は翻訳キーをクリックし、右のローカライゼーションファイルにジャンプすることができます。 PsiReferenceContributor Ctrl/Cmd 一旦スタートしたら、止められなかった。 入力障壁がなくなり、基本フレームワークが準備ができるとすぐに、私は運ばれてしまいました。コードのAST(抽象シンタクスツリー)へのアクセスを取得すると、奇跡を起こすことができます。 
 
 
 
 Auto-mocks: このプラグインは、インターフェイスに基づくテストのためのマックデータを生成します。 テストにおけるケーブル化:テストファイルを作成するとき、プラグインは必要なモックを見つけて、自動的にインポートを追加します。 Wrappers (HOCs) : 選択したコンポーネントを分析 HOC に包装し、必要なプロプを渡すアクション。 これらはすべて、数十秒を節約し、主なタスクに集中するのに役立ちます。 配布 
 
 ツールをチームに配信することは簡単でした. Slack で .jar ファイルを送信する必要はありません. プラグインは JetBrains Marketplace に公開されています. 新しい開発者にとって、オンボードは「WebStorm をインストールして、プラグインをダウンロードしてください。 ツールをチームに配信することは簡単でした. Slack で .jar ファイルを送信する必要はありません. プラグインは JetBrains Marketplace に公開されています. 新しい開発者にとって、オンボードは「WebStorm をインストールして、プラグインをダウンロードしてください。 ジャー JetBrainsマーケット 概要:開発者の経験はあなたの手にあります インフラストラクチャを勉強し、環境を構築し、「外国語」でコーディングして、1日数分を節約するのに時間を費やしたのですか? 絶対に 純粋な時間を数えると、節約は大きく見えないかもしれません - たぶん1ヶ月に1時間または2時間です。 . ツールが予測可能かつ迅速に動作するとき、一日の間に蓄積するマイクロ不安は消え去ります. 私はどのフォルダにファイルを挿入するか、またはそれを何と呼ぶかについて考えるのを止めました. 私はボタンを押すと、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のソフトウェアエンジニア Aleksei Kovrigin、Social Discovery Groupのソフトウェアエンジニア アレクセイ・コヴリギン アレクセイ・コヴリギン ソーシャルディスカバリーグループ ソーシャルディスカバリーグループ SDGであなたの夢のキャリアを探索し、イノベーションを再定義するチームに参加してください - あなたの次の大きなチャンスはわずか1クリックです! 👉 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

このオーディオは、ストーリーの元の言語で制作されています。

I Just Wanted Code Templates, but I Ended Up Writing a WebStorm Plugin (私はコードテンプレートを欲しかったが、私はWebStormプラグインを書くことになった)

About Author

コメント

ラベル

この記事は

Related Stories

HackerNoon ライティングコンテストで優勝したいですか? #crypto-api コンテスト優勝者のおすすめはこちら

AI の力を解き放つ。最先端技術の体系的レビュー: 概要と序論

AI/ML データレイクのリファレンスアーキテクチャを構築するためのアーキテクトガイド

デジタルノマドの皆さん、タイの新しい DTV ビザについて知っておくべきこと

HackerNoon ライティングコンテストで優勝したいですか? #crypto-api コンテスト優勝者のおすすめはこちら

AI の力を解き放つ。最先端技術の体系的レビュー: 概要と序論

AI/ML データレイクのリファレンスアーキテクチャを構築するためのアーキテクトガイド

デジタルノマドの皆さん、タイの新しい DTV ビザについて知っておくべきこと

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps