最近苏南大叔发现:webstorm软件,可以自定义右键扩展程序,可定制度还是挺高的。在本篇文章里面,就和大家分享一下,这个“自定义webstorm右键菜单程序”的实用小技巧。

苏南大叔:webstorm软件,如何自定义右键扩展程序? - webstorm-external-tools
webstorm软件,如何自定义右键扩展程序?(图4-1)

本文测试环境:win10webstorm@2020.2.3。理论上来说,本文中的方式技巧,对应jetbrains旗下软件,应该都是通用的,大家可以自行实验。

效果展示

下面先看看最终的效果,在css文件的编辑界面,点击右键菜单,然后就可以看到苏南大叔的特殊菜单,然后下一层就是工具本身。这里苏南大叔设置的是postcss。点击之后,就会对当前css文件,利用postcss进行加工处理。

苏南大叔:webstorm软件,如何自定义右键扩展程序? - webstorm-external-tools-2
webstorm软件,如何自定义右键扩展程序?(图4-2)

定义方法

定义方法很简单,在settings里面找到external tools。然后就可以设置菜单名字及对应的程序了。

苏南大叔:webstorm软件,如何自定义右键扩展程序? - webstorm-external-tools-3
webstorm软件,如何自定义右键扩展程序?(图4-3)

需要注意的是,这里有几个参数变量,大家可以顾名思义一下就可以:

  • $FileDir$
  • $FileNameWithoutExtension$
  • $FileName$
  • $ProjectFileDir$

苏南大叔:webstorm软件,如何自定义右键扩展程序? - webstorm-external-tools-4
webstorm软件,如何自定义右键扩展程序?(图4-4)

下面的是苏南大叔的测试实验中,所设置的参数:

  • programC:\Users\sunan\AppData\Roaming\npm\postcss.cmd
  • arguments -u autoprefixer -o $FileDir$/$FileNameWithoutExtension$.m.css $FileName$
  • working directory$ProjectFileDir$

具体的参数设置,可以参考下面这篇文章:

相关链接

总结

作为前端程序员的必备软件,webstorm提供的这个高大上的功能,还是可以试试的。

更多webstorm相关使用技巧,请点击下面的链接:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   webstorm    jetbrains

本站的忠实读者小伙伴,正在阅读下面这些文章: