{ "componentChunkName": "component---src-templates-blog-post-jsx", "path": "/post/more-easy-to-use-npm-scripts/", "result": {"data":{"site":{"siteMetadata":{"title":"WEB EGG","author":"Leko - CTO at Yuimedi"}},"markdownRemark":{"id":"2dde9b81-c5d2-5a6e-a34f-da159dc511a0","excerpt":"便乗ネタです。 — peco で npm-scripts を超簡単に実行したい - Qiita という素晴らしい記事が公開されたので実際に使ってみたのですが、 npm runまで打ってから「あれ、コマンドなんだっけ」と思い、入力内容を消しnrun…","html":"

便乗ネタです。

\n
\n

— peco で npm-scripts を超簡単に実行したい - Qiita

\n
\n

という素晴らしい記事が公開されたので実際に使ってみたのですが、
\nnpm runまで打ってから「あれ、コマンドなんだっけ」と思い、入力内容を消しnrunを実行するという一手間を省略したいと思いました。
\nもっと超簡単に実行できるようにnpm run <TAB>で peco が起動するようにしてみました。

\n\n

CHANGELOG

\n

2018/06/01: yarn にも対応しました

\n

まえおき

\n

Bash でのみ動作確認してます。
\nZ や F の方は別途記事書いていただけるとありがたいです。

\n

また、元記事の通りにセットアップができていることを前提とします。

\n
\n

— peco で npm-scripts を超簡単に実行したい - Qiita

\n
\n

npm run <TAB>で peco を作動させる

\n

タブ補完に関しては、こちらの記事を参考にしました。

\n
\n

— Bash タブ補完自作入門 - Cybozu Inside Out | サイボウズエンジニアのブログ

\n
\n

で、実際に書いたシェルがこちら。

\n
_npm_run_peco() {\n    local cur prev cword\n    _get_comp_words_by_ref -n : cur prev cword\n    if [ \"$prev\" = \"run\" ] || [ \"$prev\" = \"yarn\" ]; then\n        COMPREPLY=$(cat package.json | jq -r '.scripts | keys[]' | peco --initial-filter=Fuzzy --query=$cur)\n    fi\n}\ncomplete -F _npm_run_peco npm yarn
\n

このコードを bash_profile などに貼り付け、

\n
source ~/.bash_profile
\n

などと実行すれば反映されます。\nコードは短いですが一応解説です。

\n

Tab 補完の定義方法

\n

complete -F フックさせたい関数名 補完対象にするコマンド（可変長）を実行すると、タブ補完が有効になります。
\n例えばcomplete -F hoge npm yarnと書けばnpmとyarnコマンドに対して関数hogeをフックするタブ補完になります。

\n

_get_comp_words_by_ref

\n

便利関数。現在カーソルがある手前の単語が何かわかります。
\n例えば、prev がrunだった時だけ処理するみたいにフィルタできます。
\ncur は現在カーソルがある単語を指すので、入力途中のスクリプト名を peco の初期クエリに渡せます。

\n
npm run <TAB>  # Tabの位置に単語はないので、クエリは空文字列。全script一覧が表示される\nnpm run b<TAB> # Tabのいちに`b`があるので、bにマッチするscript一覧が表示される
\n

COMPREPLY

\n

COMPREPLYに値をセットすると、補完される文字列になります。
\n例えば COMPREPLY にbuildという値をセットすると、

\n
npm run build
\n

のような補完になります。
\nこれに peco を組み合わせて、peco で選ばれた script が COMPREPLY にセットされるようにすれば良い

\n

peco で fuzzy search

\n

設定次第ですが、オプション指定なしで peco を呼ぶとIgnoreCaseというフィルタになっています。
\n個人的には Fuzzy search なら適当にタイプしても見つかるので設定しています。
\nこの設定は好みなので、peco のオプションを読みつつ、手に馴染む設定をすると良いと思います。

\n

動作デモ

\n

\"動作デモ\"

\n
\n

— タブ補完で peco で npm-scripts をもっと超簡単に実行したい - asciinema

\n
\n

快適 ٩( ‘ω’ )و
\n作ってみたら Bash の Tab 補完とても簡単だったので、これからは積極的に補完していきたい

","timeToRead":4,"frontmatter":{"title":"タブ補完でpecoでnpm-scriptsをもっと超簡単に実行したい","tags":["npm","Bash","peco"],"date":"June 01, 2018","featuredImage":null}}},"pageContext":{"slug":"/more-easy-to-use-npm-scripts/","previous":{"fields":{"slug":"/why-i-need-redux-with-react-new-context/"},"frontmatter":{"title":"ReactのNew Context APIは便利だけどreduxを使うのはやめないと思った","tags":["JavaScript","React","Redux","React Native"]}},"next":{"fields":{"slug":"/how-to-publish-npm-public-scoped-package-with-lerna/"},"frontmatter":{"title":"lernaでnpmにpublicなscoped packageをpublishする方法","tags":["JavaScript","npm"]}}}}, "staticQueryHashes": ["2585454260","2954598359"]}