用Webstorm快捷执行命令行命令

发布时间:2019-05-15 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了用Webstorm快捷执行命令行命令脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

现在的前端开发过程中,难免需要在命令行中敲一些简单的命令;最常见的如npm run dev、npm run build、npm run test等,这些命令还算简单,每天敲十来次也勉强可以接受;但是某些复杂一点的命令,或者命令的参数每次敲的时候都是不定的,这就非常麻烦了。下面以eslint自动修复.vue文件中的错误为例,通过配置Webstorm来自动执行修复操作。

  • 如果你的项目中做了eslint的配置,鼠标右键点击js文件时,会多一个Fix Eslint Problems的选项,如下图所示;该选项可以根据eslint规则自动修复js文件中出现的常见错误。该选项本质上就是执行了eslint --fix filename.js。

clipboard.png

  • 配置了eslint后,右键.vue文件却不会出现Fix Eslint Problems选项,如果我们希望自动修复.vue文件中的js代码,只能在命令行里操作,并且需要为eslint命令指定文件所在目录以及文件名,或者cd到文件所在目录执行,如eslint --fix 'src/pages/home.vue';每次要修复时,都要这样写,显然不能接受。
  • 配置Webstorm的Tools,打开settings -> Tools -> External Tools,点击添加按钮,做下图的配置

    1. $ProjectFileDir$ 指工程所在目录。
    2. $FilePathRelativeToProjectRoot$ 指文件相对于工程所在的路径。
    3. 如果你全局安装了eslint,也可以将执行程序指定为全局安装目录下的eslint.cmd,需要注意的是,此时,eslint依赖的库也需要全局安装。

clipboard.png

  • 配置完成后,右键点击.vue文件就会出现 External Tools -> eslint fix的选项,点击该选项,就完成了.vue文件的自动修复操作。

用Webstorm快捷执行命令行命令

  • 通过配置Webstorm的External Tools,几乎所有命令都不需要自己手动敲了,只要点击两下鼠标。
    我们知道,如果你的项目是用git管理的,Webstorm会将git的一些常见操作集成到备选项中,如下图所示;可以猜测,其原理也和External Tools类似,因此我们完全可以通过类似的方式配置自定义的git命令。

用Webstorm快捷执行命令行命令

脚本宝典总结

以上是脚本宝典为你收集整理的用Webstorm快捷执行命令行命令全部内容,希望文章能够帮你解决用Webstorm快捷执行命令行命令所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:Vue