この記事は Sencha Advent Calendar 2015 5日目の記事です。

--

Senchaを使っての開発をするにあたり、どのエディターを使ってますか？
僕の周りではVimかSublimeTextあたりが多かったのですが、最近はJetBrains プラグインが出たおかげでPHPStormに変えている方もいらっしゃいます（JetBrainsプラグインについては@martini3ozさんの記事で紹介されています）。

そんななか僕はATOMを使っています。
まだまだ発展途上感はありますが、将来性に期待して。。

ところがATOMにはSenchaのパッケージが一切ありません（探し方が悪いだけだったらすみません）。
ないなら作ろうというわけで、これから何回かにわけてパッケージを作っていきたいと思います。
微妙にSenchaの話題からずれてしまうような気もしますが、
パッケージを作る過程でクラスシステムとかは避けて通れないでしょうし、それでなんとか。。。

ATOMのパッケージはCoffeeScriptで作られるのですが、
CoffeeScriptを書くのも、パッケージを作るのも初めてのことなので、
拙い部分は多いと思いますが、ご容赦ください。
うまくできたら公開するかも。

要件定義

自分がSenchaでの開発をするにあたってほしい機能を入れたいと思います。

コード補完
SenchaCmdの実行
コードジャンプ

ひとまずこんなところかな。

対象バージョンは

ExtJS5
ExtJS6

としておきます。

パッケージの作成

雛形の作成

ATOMのパッケージは、
Packages > Package Generator > Create Atom Package
を実行すると雛形を作成することができます。

Snippetの作成

Snippetは、snippetsというディレクトリを作り、
jsonもしくはcson形式で記述します。

とりあえず試しにひとつ作ってみます。

sencha.cson


'.source.js':
    'define':
        'prefix' : 'define'
        'body': """
        /**
         * @class ${1:className}
         * @extend ${2:extendClassName}
         * @description
         */
        Ext.define('${1:className}', {

            // {{{ extend

            extend: '${2:extendClassName}',

            // }}}
            // {{{ requires

            requires: [
            	${3:}
            ]

            // }}}

        });
        """

動いた動いた。まぁSninppetについては順次必要なもの追加していきます。

短いですが今回はここまでで。。次回に続きます。

PS. パッケージの修正反映させるのにATOMを再起動する以外の方法ご存知の方いたら教えてください。。

--