npm script 命令补全的实现

不知不觉中，脚本命令已经写了十来条，并且会越写越多。如果有自动补全机制该有多好啊，既然你我都能想到这个场景需要，npm 当然也会提供这种便利。

安装和使用

安装比较简单，使用下面的命令行即可：

npm install -g npm-completion

然后添加环境变量：

export NPM_CONFIG_COMPLETION=true

然后重新加载你的终端或者命令行，就可以使用npm的自动补全功能了，它的使用非常简单，我们只需要在命令行中输入npm r，然后按Tab键，就会自动补全出所有可用的脚本命令。

npm-completion做了什么？

这个插件提供了 npm 命令的 bash 自动补全功能，这个功能可以为你自动补全 npm 命令、可用的脚本以及全局安装的包。

它对脚本命令补全的部分实际上是调用了 npm 的 run-script 命令，这个命令的 --json 选项可以将脚本命令输出为 JSON 格式，然后自动补全插件就可以解析这个 JSON 格式的输出，提取出可用的脚本命令。

[ "$NPM_CONFIG_COMPLETION" = "true" ] && \
  _npm_completion -- \
  -- npm run-script --silent --json

$ npm run-script --silent --json
{
  "audit": "npx npm-audit fix",
  "build": "webpack --progress",
  "clean": "rimraf dist",
  "coverage": "nyc npm test",
  "lint": "eslint ./src/**/*.js",
  "postinstall": "node -e \"console.log(\\\"postinstall script ran!\\\")\"",
  "pretest": "echo \"pretest script ran!\"",
  "start": "webpack-dev-server --open",
  "test": "nyc --reporter=lcovonly --reporter=text npm run coverage"
}

手动配置

其实，我们也可以手动配置 npm script 的自动补全，在你的.bashrc文件中添加以下代码：

# npm script 命令自动补全
function _npm_completion() {
  local SCRIPTS
  SCRIPTS=$(npm run-script --silent --json | jq -r 'keys[]')

  COMPREPLY=( $(compgen -W "${SCRIPTS}" -- ${COMP_WORDS[COMP_CWORD]}) )
}
complete -F _npm_completion npm

保存并重新加载终端或者命令行，就可以使用自动补全功能了。

更多高级配置

如果你想了解更多高级的配置，可以参考 npm-completion 的文档，它提供了很多有用的选项，可以让你自定义自动补全的行为。

例如，你可以使用 --no-global 选项来禁用全局安装包的自动补全，或者使用 --no-bin 选项来禁用二进制文件的自动补全。

export NPM_CONFIG_COMPLETION_NO_GLOBAL=true
export NPM_CONFIG_COMPLETION_NO_BIN=true

你还可以使用 --completion-filter 选项来指定一个过滤器，只有满足这个过滤器的脚本命令才会被自动补全。

export NPM_CONFIG_COMPLETION_FILTER='^(build|test|start)
export NPM_CONFIG_COMPLETION_FILTER='^(build|test|start)$'
#x27;

上述配置将只自动补全以 build、test 和 start 开头的脚本命令。

总结

npm script 命令补全是一个非常有用的工具，可以帮助我们更轻松地管理和使用脚本命令，提升开发效率。我们可以通过安装 npm-completion 插件或者手动配置的方式来启用这个功能。

希望这篇文章对你有帮助，如果你有任何问题，请随时留言。