Atomエディタに独自の補完候補を追加する(1)

Atom Cocos2d-x Cocos2d-JS JavaScript

Cocos2d-xのJavaScript版で何か作ろうと思って少しずつ勉強を進めていたのですが、ついでにエディタもAtomに変えてみようと思ったのが紆余曲折の始まりで、気づけばパッケージを色々試したり、キーバインディングを変更したり、Mac版とWindows版の違いに悩まされたりと、すっかり時間が経ってしまいました。

試行錯誤の中でも、一番時間を使ったのがCocos2d-x向けにAtomに補完候補のキーワードを追加する方法で、使えそうなパッケージがないため結局自作の道を選ぶことになりました。

ということで、今回はCocos2d-xではなく、その前哨戦としてAtomに独自の補完候補を追加する方法について2回に分けて解説してみたいと思います。

Atomエディタについて

AtomはGitHubが開発しているテキストエディタです。フレームワークとしてChromiumとNode.jsを組み合わせたElectronが使われており、エディタのカスタマイズにJavaScriptとHTMLを使用します。

f:id:tkitao:20160504011950p:plain

Atomはおしゃれなルックスだけでなく、GitHubと連動して手軽に様々な拡張パッケージをインストールすることができ、シンタックスハイライトや補完などの基本機能も拡張パッケージとして実現されています。

ちなみに（まだ試行錯誤中ですが）私がJavaScriptの開発向けに入れているパッケージは以下になります。

せっかく新しいエディタにトライしているので、vim-modeなしのオリジナルの操作体系で使えるように努力してみたのですが、一週間で挫折しました…。

Atomエディタの補完の仕組み

Atomでは、ビルトインパッケージであるautocomplete-plusによって補完機能が実現されています。ビルトインパッケージでサポートされていない言語やライブラリの補完は、autocomplete-plusをさらに拡張する追加パッケージをインストールすることで実現します。

autocomplete-plusの追加パッケージには、CSS向けのautocomplete-cssやRuby向けのautocomplete-rubyなどがあり、慣習としてautocomlete-xxxというパッケージ名になっていることが多いようです。

そして残念ながら、私が必要としているCocos2d-x向けのautocomplete-plusの追加パッケージは今の所存在しないため、自作しなければなりません。

補完用パッケージを作成する

autocomplete-plusの追加パッケージは、通常のAtomの拡張パッケージと同様の手順で作成します。ただし、実現することはautocomplete-plusに補完候補を追加するだけなので、通常のパッケージで必要となる処理の大部分を省くことができます。

実際の手順を順を追って説明していきます。

まず、メニューのPackages⇨Package Generator⇨Generate Atom Packageを選択し、作成するパッケージ名を入力します。

f:id:tkitao:20151101205439p:plain

今回は、autocomplete-plusの慣習に従い、autocomplete-sampleというパッケージ名を指定しています。

f:id:tkitao:20151101205455p:plain

次に作成されたパッケージフォルダに以下の変更を行います。

  • keymaps、menus、stylesフォルダを削除
  • libフォルダのautocomplete-sample.coffee、autocomplete-sample-view.coffeeを削除
  • libフォルダにmain.coffeeを追加

変更後のフォルダ構成がこちらです。

f:id:tkitao:20151101205511p:plain

パッケージのコードを作成する

続いて、autocomplete-plusのProvider作成マニュアルに従い、パッケージのコードを作成していきます。

まずプロジェクトの設定を行っているpackage.jsonを以下のように変更します。

  • "main"の"./lib/autocomplete-sample"を"./main"に変更
  • "activationCommands"のブロックを削除
  • "providedServices"のブロックとして以下のコードを追加
"providedServices": {
  "autocomplete.provider": {
    "versions": {
      "2.0.0": "getProvider"
    }
  }
}

変更されたpackage.jsonは以下になります。

{
  "name": "autocomplete-sample",
  "main": "./lib/main",
  "version": "0.0.0",
  "description": "A short description of your package",
  "keywords": [
  ],
  "repository": "https://github.com/someone/autocomplete-sample",
  "license": "MIT",
  "engines": {
    "atom": ">=1.0.0 <2.0.0"
  },
  "dependencies": {
  },

  "providedServices": {
    "autocomplete.provider": {
      "versions": {
        "2.0.0": "getProvider"
      }
    }
  }
}

次に補完候補を追加するコードを作成します。

今回はシンプルにJavaScriptかCoffeeScriptの時に、autocomplete-sample-keywordという語をいつでも補完候補に追加するようにしてみます。

main.coffeeに以下のコードを記述します。

provider =
  selector: '.source.js, .source.coffee'

  getSuggestions: (request) ->
    test =
      text: 'autocomplete_sample_keyword'
      type: 'function'
    [test]

module.exports =
  getProvider: -> provider

ここでは、selectorで対象となる言語を設定し、getSuggestionsで補完候補を返すメソッドを定義しています。

補完候補は、候補となる語をtextまたはsnippetとして記述し、そこにtype等の補助情報を加えたJavaScriptオブジェクトの配列になります。

動作確認

実際に動作を確認してみます。作成したパッケージを更新するには、コマンドパレットからWindow: Reloadを実行します。

適当なJavaScriptファイルを作成して、文字を入力してみると補完候補が追加されていることが確認できます。

f:id:tkitao:20151101205532p:plain

次回は、Cocos2d-x JavaScript版のキーワードを追加し、正式なパッケージとして機能を整えるところまでの説明と、パッケージ作成の際に知っておくと便利なTipsをいくつか紹介したいと思います。