AtomのPackage開発

AtomのPackage開発についてまとめます。

テンプレートの生成

1. Menu
2. Packages
3. Package Generator
4. Generate Atom Package

five-move という Package を作成する場合、
以下の様なファイル群が生成されます。

$ tree
.
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── keymaps
│   └── five-move.json
├── lib
│   ├── five-move-view.js
│   └── five-move.js
├── menus
│   └── five-move.json
├── package.json
├── spec
│   ├── five-move-spec.js
│   └── five-move-view-spec.js
└── styles
    └── five-move.less

各ファイルについて

Package: Word Count - Atom Flight Manual

package.json

package のメタデータを記述するファイル。
package 名や最初に読み込むファイルなど。
以下は自動生成した直後の内容です。

{
  "name": "five-move",
  "main": "./lib/five-move",
  "version": "0.0.0",
  "description": "move (and select) 5 lines.",
  "keywords": [
  ],
  "activationCommands": {
    "atom-workspace": "five-move:toggle"
  },
  "repository": "https://github.com/atom/five-move",
  "license": "MIT",
  "engines": {
    "atom": ">=1.0.0 <2.0.0"
  },
  "dependencies": {
  }
}

ソースコード

lib 配下がソースコードです。
PackageのトップレベルのモジュールはSingletonであり、Packageのライフサイクルを管理します。

CSS

styles/XXXX.less にStyleを指定できます。

Keymaps

keymaps/XXXX.json にショートカットキーを定義できます。

Menu

menus/XXXX.json にメニュー（メニューバー、コンテキストメニュー）を定義できます。

デバッグ

console.log で出力を行い開発ツールで出力を確認できます。

テスト

Atom の Package テンプレートは Jasmine のテストテンプレートを 生成してくれます。 ctrl+alt+cmd+p でテストを実行できます。

リロード

開発中のコードを即リロードして動作確認したい場合は、

ctrl+alt+cmd+l で window:reload を行います。

参考資料

• AtomEnvironment
• Package: Word Count - Atom Flight Manual