2018-10-26に更新

AtomでjQueryイベントのアウトライン表示

Atomのパッケージにはsymbols-tree-viewというのがあり
様々な形式のファイル内のアウトライン表示を行ってくれ、
クリックで簡単に定義に飛ぶことができる。

ただ、Javascriptはどうも思った通りに解析されないので
上手くやる方法はないか調べてみると、
このパッケージはctagsというものを使っているらしい。
(vimとかで使われているものらしい)
その設定ファイルがlib/.ctagsにあるので
それを編集すれば設定が可能。

|sh|
--regex-JavaScript=/(\$([^)]+).click)/\1/,event/
--regex-JavaScript=/(\$([^)]+).keydown)/\1/,event/
--regex-JavaScript=/(\$([^)]+).change)/\1/,event/
--regex-JavaScript=/(\$([^)]+).on([^,]+,[ \t][^,f]+)/\1/,event/
--regex-JavaScript=/(\$([^)]+).on([^,]+,[ \t]
)function/\1/,event/
||

こんな感じで設定するとjQueryのイベントとかに飛べるようになる。
適当なのでちょっと崩れるとダメかも。
だれか完璧なのをpull requestして下さい。

追記
this.やprototype.を含む行のメソッド追加をfunctionとして登録する場合。

|sh|
--regex-JavaScript=/this.([^ \t]+)[^=]=[ \t]function/\1/,function/
--regex-JavaScript=/prototype.([^ \t]+)[^=]=[ \t]function/\1/,function/
||

ツイッターでシェア
みんなに共有、忘れないようにメモ

だら@Crieit開発者

Crieitの開発者です。 Webエンジニアです(在宅)。大体10年ちょい。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel, React, Flutter, Vue.js, Node, RoR 趣味:Elixir, Phoenix, Nuxt, Express, GCP, AWS等色々 PHPフレームワークちいたんの作者

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント