{T}

命令自动补全

当 package.json 中的 scripts 命令越来越多时，手动输入完整的命令会变得繁琐且容易出错。幸运的是，我们可以通过多种方式为 npm script 启用命令行自动补全，从而大幅提升开发效率。

方法一：使用 npm run 列出所有脚本

一个最简单的方法是直接运行不带任何参数的 npm run 命令。这会列出 scripts 对象中定义的所有可用脚本。

如果脚本数量过多，你可以结合使用管道和 less 命令来分页查看：

bash
npm run | less

在 less 视图中，你可以像在 Vim 中一样使用 / 加上关键词（例如 /lint）来搜索特定的脚本。

方法二：集成 npm 原生的自动补全

npm 内置了 completion 工具，可以将其集成到你的 Shell (如 bash 或 zsh) 中，以实现更强大的自动补全功能。

官方推荐的集成方式是将 completion 命令的输出追加到 Shell 的配置文件中：

bash
# 对于 bash
npm completion >> ~/.bashrc

# 对于 zsh
npm completion >> ~/.zshrc

为了保持配置文件的整洁，推荐采用以下方式：

  1. 将补全脚本输出到独立文件：

    bash
    npm completion > ~/.npm-completion.bash

  2. 在 Shell 配置文件中引入该文件：

    bash
    # 在 ~/.bashrc 或 ~/.zshrc 文件末尾添加以下行
source ~/.npm-completion.bash

  3. 重新加载配置文件以使补全生效：

    bash
    # 对于 bash
source ~/.bashrc

# 对于 zsh
source ~/.zshrc

配置完成后，输入 npm run，然后按 Tab 键，Shell 就会列出所有可用的脚本。连续按 Tab 键可以在选项之间切换。此外，它还支持部分匹配，例如输入 npm run cov 再按 Tab，Shell 会自动补全为 npm run cover。

此功能不仅限于 npm script，它同样适用于 npm 的所有子命令（如 install, test 等）。

方法三：使用 zsh-better-npm-completion 插件（Zsh 用户）

对于追求极致效率的 Zsh 用户，zsh-better-npm-completion 插件提供了更强大的补全功能：

  • 智能补全依赖：在 npm install 时，它会根据你过去安装过的包名给出补全建议。
  • 上下文感知：在 npm uninstall 时，它会根据当前项目 package.json 中的依赖列表给出补全建议。
  • 显示脚本详情：在 npm run 时，补全建议旁边会直接显示脚本的实际内容，让你一目了然。

安装和配置请参考其官方 README 文档。

注意：如果你选择使用 zsh-better-npm-completion，请务必移除之前在 .zshrc 中添加的 npm completion 相关配置，以避免冲突。

其他工具：Yarn 的命令自动补全

对于 Yarn 用户，社区也提供了类似的解决方案 yarn-completions，可以实现与 zsh-better-npm-completion 类似的功能。安装方法同样请参考其官方文档。

通过以上方法，你可以根据自己的使用习惯和 Shell 环境，选择最适合的方式来实现 npm script 的自动补全，从而告别手动输入长命令的烦恼。