Atomプラグインの開発プロセスを詳しく解説

Atomコンポーネントを最初から開発するにはどうすればよいですか?次の記事では、Atom プラグインの開発プロセスを紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

atom の使い方チュートリアル」

copyファイルを直接 Atom にpasteしてアップロード操作を完了します。確認後、レンガの移動を開始します。

AtomはElectronアプリケーションであるため: https://electronjs.org

で開発されたデスクトップ アプリケーションなので、フロントエンドとしては素晴らしいものです。まずAtom
の公式ドキュメントを参照して、プラグインの作成に関連する操作を確認しましょう。まず、Atom
でコマンド パネルを開き、次にEnterGenerate Package

Enter キーを押すと、ダイアログ ボックスが表示されます。作成するパッケージの名前を入力します。

の作成を完了します。

はデフォルト ファイルのセットを生成し、新しいウィンドウを開きます。プロジェクト構造

生成されたプラグイン ディレクトリは次のとおりです。

. ├── keymaps │ └── first-package.json ├── lib │ ├── first-package-view.js │ └── first-package.js ├── menus │ └── first-package.json ├── package.json ├── spec │ ├── first-package-spec.js │ └── first-package-view-spec.js └── styles └── first-package.less

keymaps

ここでは、監視するショートカット キーを設定でき、カスタム ショートカット キーを設定して、プラグインの動作の一部をトリガーできます。

{ "atom-workspace": { "ctrl-alt-o": "first-package:toggle" } }

ここにさまざまなカスタマイズされたショートカット キーを追加できます。

Value
は次のように定義されます:パッケージ名: トリガーされたイベント名注意してください:ここで設定されたショートカット キーにはスコープの概念もあります。それは、
JSON
の外側のkeyです。atom-workspace
は、Atomで有効になることを意味します。atom-text-editor
は、テキスト エディターの範囲内でのみ有効になることを意味します。

Atom 公式ドキュメント

lib

これは、プラグインのメイン コードが保存される場所です。

##package.js
package.view という 2 つのファイルが生成されます。 js

• デフォルトのプラグインによって生成されたメイン エントリ ファイルはここを指します。

エントリ ファイルはJSON

activate
• : このメソッドは、

  Packageがアクティブ化されたときに実行されます。関数のシグネチャは、渡されるstateパラメーターを受け入れることを示していますSerializeメソッドによって渡されます (実装されている場合)

  ##deactivate
:
• Package

  のときにトリガーされるメソッドこれら 2 つのメソッドは、React## のcomponentWillMountおよびcomponentWillUnmountserialize

  として理解できます。 # : つまり、上記のメソッドは、次回のアクティブ化後に使用する
JSON
• オブジェクトを返すことができます。

  ショートカット キーに対応するイベント名をカスタマイズします: 毎回Package

  対応するショートカット キーがトリガーされたときに実行されるメソッド

• menus

  これには、アプリケーション メニューと編集領域メニューの構成が保存されますbar file

{ "context-menu": { "atom-text-editor": [ { "label": "Toggle first-package", "command": "first-package:toggle" } ] }, "menu": [ { "label": "Packages", "submenu": [ { "label": "first-package", "submenu": [ { "label": "Toggle", "command": "first-package:toggle" } ] } ] } ] }

context-menu

はAtomメイン メニュー バーに表示されます:
同様に、

text-editor

workspaceという 2 つの環境を区別します。specいくつかのテスト ケースがここに保存されています。Package

styles

require('electron').clipboard.readImage().toPng()

try { let buffer = clipboard.readImage().toPng() let tempFilePath = 'XXX' fs.writeFileSync(tempFilePath, Buffer.from(buffer)) } catch (e) { // catch error } finally { fs.unlink(tempFilePath) // 因为我们并不依赖于删除成功的回调，所以直接空调用异步方法即可 }

let editor = atom.workspace.getActiveTextEditor()

editor.insertText(`![](${placeHolderText})`, editor)

editor.scan(new RegExp(placeHolderText), tools => tools.replace(url))

apm show 你的包名

apm publish 你的包名

apm publish