Atomエディタに独自の補完候補を追加する(1)
Cocos2d-xのJavaScript版で何か作ろうと思って少しずつ勉強を進めていたのですが、ついでにエディタもAtomに変えてみようと思ったのが紆余曲折の始まりで、気づけばパッケージを色々試したり、キーバインディングを変更したり、Mac版とWindows版の違いに悩まされたりと、すっかり時間が経ってしまいました。
試行錯誤の中でも、一番時間を使ったのがCocos2d-x向けにAtomに補完候補のキーワードを追加する方法で、使えそうなパッケージがないため結局自作の道を選ぶことになりました。
ということで、今回はCocos2d-xではなく、その前哨戦としてAtomに独自の補完候補を追加する方法について2回に分けて解説してみたいと思います。
Atomエディタについて
AtomはGitHubが開発しているテキストエディタです。フレームワークとしてChromiumとNode.jsを組み合わせたElectronが使われており、エディタのカスタマイズにJavaScriptとHTMLを使用します。
Atomはおしゃれなルックスだけでなく、GitHubと連動して手軽に様々な拡張パッケージをインストールすることができ、シンタックスハイライトや補完などの基本機能も拡張パッケージとして実現されています。
ちなみに(まだ試行錯誤中ですが)私がJavaScriptの開発向けに入れているパッケージは以下になります。
- vim-mode(Vim操作でテキストが編集できる)
- project-manager(プロジェクトフォルダを管理する)
- linter(書式チェックの基本パッケージ)
- linter-jshint(JSHintを使って書式チェックをする)
- linter-jsonlint(JSONLintを使って書式チェックをする)
- atom-beautify(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
を選択し、作成するパッケージ名を入力します。
今回は、autocomplete-plusの慣習に従い、autocomplete-sample
というパッケージ名を指定しています。
次に作成されたパッケージフォルダに以下の変更を行います。
keymaps
、menus
、styles
フォルダを削除lib
フォルダのautocomplete-sample.coffee
、autocomplete-sample-view.coffee
を削除lib
フォルダにmain.coffee
を追加
変更後のフォルダ構成がこちらです。
パッケージのコードを作成する
続いて、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ファイルを作成して、文字を入力してみると補完候補が追加されていることが確認できます。
次回は、Cocos2d-x JavaScript版のキーワードを追加し、正式なパッケージとして機能を整えるところまでの説明と、パッケージ作成の際に知っておくと便利なTipsをいくつか紹介したいと思います。