배경

점점 많아지는 npm scripts외우기도 힘들고 의미도 없고 알아서 자동 완성해주면 좋겠다.

"scripts": {
    "start": "react-scripts -r @cypress/instrument-cra start",
    "cy": "cypress open",
    "cy:run": "cypress run --spec \"cypress/integration/**\"",
    "nyc:report": "npx nyc report --check-coverage",
    "nyc:summary": "npx nyc report --reporter=text-summary",
    "build": "react-scripts build",
    "build:production": "GENERATE_SOURCEMAP=false react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "graphql:codegen": "apollo schema:download --endpoint=https://graphql.hyundai.ems.musma.net/graphql schema.json && amplify codegen statements && graphql-codegen"
  },

준비물

  1. fzf : 입력에 대해서 간단하게 검색을 할 수 있게 해준다.
  2. jq : unix 시스템에서 json 파일을 파싱 할 수 있게 해준다.
$ brew install fzf
$ brew install jq

1. jq를 이용해서 scripts만 뽑아오기

$ cat package.json | jq .scripts

# {
#   "start": "react-scripts -r @cypress/instrument-cra start",
#   "cy": "cypress open",
#   "cy:run": "cypress run --spec \"cypress/integration/**\"",
#   "nyc:report": "npx nyc report --check-coverage",
#   "nyc:summary": "npx nyc report --reporter=text-summary",
#   "build": "react-scripts build",
#   "build:production": "GENERATE_SOURCEMAP=false react-scripts build",
#   "test": "react-scripts test",
#   "eject": "react-scripts eject",
#   "graphql:codegen": "apollo schema:download --endpoint=https://graphql.hyundai.ems.musma.net/graphql schema.json && amplify codegen statements && graphql-codegen"
# }

2. jq를 사용해서 key를 line으로 출력하기

$ cat package.json | jq .scripts | jq -r 'keys | .[]'

# build
# build:production
# cy
# cy:run
# eject
# graphql:codegen
# nyc:report
# nyc:summary
# start
# test

3. 완성

$ yarn $(cat package.json | jq .scripts | jq -r 'keys | .[]' | fzf)

해당 내용을 .zshrc 에 alias로 등록합니다.

...
# npm script auto complete
alias yarns='yarn $(cat package.json | jq .scripts | jq -r "keys | .[]" | fzf)'

.zshrc 변경사항 적용하기

$ source .zshrc

4. 동작 화면

result