还在nvm use/npm run/npm install?现在一个插件搞定

781 阅读3分钟

作为一名前端开发,使用VScode打开项目后,直接再打开终端,输入npm run dev可以说是生物本能了。

但是,更多的时候,你可能会遇到以下这些情况:

  • 多个项目使用的node版本不统一,每次启动项目都得切换一下;
  • npm脚本又多又长,一不小心输错了等半天才发现项目压根没启动;
  • 一个代码仓库有好几个前端项目,还散布在各个子目录中,每次都得根据项目的不同cd到不同目录下。

而最不幸的是,这些我全遇上了……

image.png

俗话说,遇到问题、先找插件,于是我把几乎所有VScode上的npm相关插件都用了一遍,但还是没找到能一次性解决这些问题的,所以我最后决定——自己撸一个VScode插件

俗话又说,不会自己写插件的前端不是好程序员,终于历经了断断续续好几个星期的开发后,我总算做出了“完美”解决了上述所有问题的插件——Powerful NPM Run(点击名字即可跳转到插件页面)。

现在的Powerful NPM Run已经在开发生产项目时能够稳定使用,完全没有问题(废话,一个VScode插件能用出什么问题)。

后面就是简单的使用教程和效果演示,也希望大家能再去Github仓库点个star,有啥问题和功能需求也能直接提issue,看到都会回复。

先在这给大哥大姐们磕一个了,求求了。

先配置node版本,别再nvm use

image.png

安装插件后,先打开设置搜索Powerful-npm-run: Default Node Version设置项,输入默认的node版本。

或者直接在package.json的同级目录下添加.nvmrc文件,填入该npm脚本使用的node版本,在执行命令时,会优先使用.nvmrc文件配置的node版本。

当然,这些配置是只针对nvm的,如果是使用的volta进行node版本管理,可以直接略过。

快速执行命令,告别npm run

ezgif-7-4b5a4b1733.gif

当项目打开后,直接在命令面板中输入npm run,就能看到两个命令选项:

  • npm run (New Terminal):使用新的终端运行npm脚本;
  • npm run (Last Used Terminal):使用上次使用的终端运行npm脚本

随便选择一个,就会发现插件将当前工作区中的所有npm脚本(包括在子目录中的)都列了出来,再配合命令面板的搜索功能,就可以快速定位和执行目标脚本。

注意,在执行该脚本前,插件会自动执行nvm use命令来根据配置来切换node版本,

不用看包配置文件,直接npm install梭哈

ezgif-4-6106a24f27.gif

同样的操作方法,直接在命令面板搜索并执行npm install命令,就会自动列出当前工作区中所有的依赖配置文件(package.jsonpackage-lock.jsonyarn.lockpnpm-lock.yaml)和对应的安装依赖命令。

同样的,在执行安装命令前,也会先执行nvm use来切换对应的node版本。


以上就是现在插件的主要功能,虽然都只是解决了几个前端开发时遇到的几个小问题,不过也希望通过解决这些小问题,减少大家在这些小问题上花费的精力。