WebStorm 好用的插件推荐

已于 2022-04-22 23:29:54 修改
阅读量2w 收藏 41
点赞数 9
分类专栏： 编辑器 文章标签： idea ide 编辑器 webstorm plugin
于 2020-12-26 12:32:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010281877/article/details/111722817
版权

WebStorm 插件推荐

Hello

webstorm用了几年了了, 一直很少用插件, 都是只有自带的 nodejs插件啊, vue插件, 支持基本开发就够了, 后来发现 HBuilder 的彩虹屁老婆插件, 惊为天人, 插件居然能在自己编辑器里整个虚拟老婆出来, 还会在撸代码的时候吹你的代码牛逼, 惊呆我了;然后就像看webstorm里有没有类似的插件, 搜了一家伙, 居然还真有类似的, 不过只有彩虹屁, 没有老婆, 然后就寻思着继续找几个插件, 没想到逛了逛插件市场, 还真有不少很用的插件, 在这里做了下整理, 作为推荐

插件推荐

Chinese ​(Simplified)​ Language Pack / 中文语言包

插件主页

这个插件放在第一名, 自然是必备中的必备, 给国内开发者的福音, JetBrains官方持续完善中的中文包插件, 支持绝大部分的IDE内容中文翻译, 比之前网上的 jar包好用多了, 当然也非常感谢之前网上做jar中文包的大佬们, 没有他们可能webstorm可能到现在还不知道咋玩
中文界面
可以看到中文翻译相对已经很全了, 而且官方一直在更新, 不得不佩服, 汉化的还是挺好的

CodeGlance

这个插件居然没被默认配置, 隔壁VSCode自带的代码小地图插件, 功能在视图右侧自带一个代码缩略图, 必备神器不解释
在这里插入图片描述

Rainbow Fart

插件主页

开始提到过的彩虹屁插件, 内置一个萌妹子可以在你写代码的时候夸你(嘿嘿嘿)

支持使用额外的语音包扩展

Wechat mini program support

插件主页

小程序开发者的福音, 支持微信小程序文件格式的支持等
在这里插入图片描述

Key Promoter X

快捷键提示, 教你使用IDE的快捷键

插件主页

用IDE可能永远也学不会使用所有的快捷键, 这个插件在你使用鼠标操作某些行为的时候右下角弹窗提示你可以用快捷键代替, 点击后可以调到对应的快捷键设置
在这里插入图片描述

.​env files support

环境变量文件类型支持

插件主页

让你的.env文件再也不是txt似的枯燥颜色
在这里插入图片描述

Atom Material Icons

给点颜色看看

插件主页

让你的图标更加花里胡哨
在这里插入图片描述

GitToolBox

git 工具插件

插件主页

支持更多git信息展示, 我主要觉得在光标行结尾显示当前行的最新的git提交信息挺酷的
在这里插入图片描述

Translation

插件主页

翻译插件, 内置谷歌百度有道3大翻译, 可以翻译代码中的变量, 很适合英文不好的同学, 求求大家不要再写拼音变量了, 作为中国人, 这种代码真的很难看懂,

// bad bad bad
var lieBiao = [];

// nice
var list = [];

// 当然也可以这么写(事实上这种写法兼容性很好)
var 列表 = [];

这个插件在写变量的时候可以直接使用快捷键将英文翻译成中文, 或者直接把中文给转成英文

将中文选中, 使用快捷键可以迅速替换为英文

也可以选中英文, 使用另一种快捷键翻译出结果

事实上该插件能做到的远不止如此, 可以去插件主页查看

在这里插入图片描述

Rainbow Brackets

彩虹括号, 看名字知意思, 让你的括号变的花里胡哨起来

插件主页
在这里插入图片描述

发现更多好用的插件

https://plugins.jetbrains.com/

余栀丶
关注
  • 9
    点赞
  • 踩
  • 41
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
webstorm中px转rem插件
09-28
webstorm中px转rem插件 使用说明： 1.file-settings-plugins-install plugin from disk-选择生成的jar文件-restart webstorm 2.tools-SetPX2REM设置计算的比值-选中代码段，如'100px'-后，点击shift+f 3.设置界面和快捷键设置可以在插件中自定义 本项目的github地址：https://github.com/sunqian1991/WebStorm-PX2REM
WebStorm eslint 插件
09-27
在WebStorm中安装ESLint插件，你可以选择通过内置的插件市场在线安装，或者如描述中所述，从本地进行安装。以下是通过本地安装的步骤： 1. 下载ESLint插件的`.jar`文件，这通常可以在WebStorm的插件仓库或开发者...
Webstorm 舒适高效配置，打造提高生产率环境 （html, vue, uniapp）
LlanyW的专栏
11-06 9930
狂拽炫酷吊炸天装逼的插件，atom 上的神器啊,抱着试一试的心态一搜,webstorm 上居然也有了,安装之后可以在 window -> activate-power-mode 中关闭震动以及开启彩色模式。选个纯色的 轻绿色（C7EDCC）的背景导入（可以从刚才设置的代码区域截取一个纯色图片导入），设置透明度：Opacity然后：OK即可切换到养眼的界面。用过 sublime 的同学会知道右侧有一个当前文件中代码的缩略图，这个插件可以让 webstorm 也具有此功能。一个比较全面的正则插件。
WebStorm开发插件
最新发布
weixin_63074242的博客
05-12 342
WebStorm 是 JetBrains 公司开发的一款专业的 JavaScript 集成开发环境（IDE），支持 HTML、CSS、JavaScript 等多种前端技术。WebStorm 提供了丰富的内置功能和插件，可以扩展其功能，以满足不同的开发需求。：实时检查 JavaScript 和 JSX 代码中的错误、风格问题和危险操作，支持自动修复。：提供 Vue 项目开发必需的支持，如语法高亮、自动完成、Linting 检查等。：提供 React 项目开发必需的支持，如 JSX 语法支持和自动完成等。
​WebStorm 超好用的10款插件，效率提升了好多！
热门推荐
qq_34874784的博客
03-29 2万+
​WebStorm 超好用的10款插件，效率提升了好多！ WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。 今天主要跟大家介绍...
WebStorm的必装插件（2024版）
AGW.的博客
03-10 3205
WebStrom真的很牛！
WebStorm设置中文-安装官方插件
m0_58565372的博客
11-22 7662
2.找到Plugins,搜索chinese选择第二个，点击Install下载。1.菜单栏File>Setings进入设置页面。3.安装完毕重启WebStorm。
【webstrom】常用插件和快捷键设置
qq_37485170的博客
05-12 1445
1.1.1 File-setting-LiveTemplates-JavaScript，点击右侧的加号，选择Live Template1.1.2 ///+enter实现代码注释/***/1.2.3 点击Define，选择模板的应用范围，选中JavaScript。
关于webstorm安装Chinese包失败
m26241708的博客
11-12 299
（3）将下载下来的文件放入C:\Program Files\JetBrains\WebStorm 2020.2.3\plugins\中。（4）打开WebStorm，打开设置页面，点击右上角的齿轮按钮，点击Install Plugin fromDisk...（5）点击之后，会弹出一个路径选择页面，在里面选入你所下载的文件的路径。（2）找到适合自己WebStorm版本的安装包，并下载下来。（6）选完路径之后点击应用按钮进行重启WebStorm。（7）接下来，页面的文字就都会编程中文的啦。
uniapp使用及踩坑项目记录
qq_45832807的博客
01-28 6171
在src下创建components文件夹，把创建的组件存放在components中，然后就可以全局使用了，不用导入，也不用注册，直接通过自定义组件文件名称来使用，vit会自动识别components中的文件为组件。由于vue3中不支持require，所以我就用自定义组件的方式， 通过利用image的error方法来实现了图片加载失败的占位效果。imgUrl : {也可以通过下面这种方式写，我是用自定义组件是因为调用接口的方法不支持内容的修改。
WebStorm 集成 ReactNative 插件
01-13
WebStorm 集成 ReactNative 插件,reactnative 代码提示 ReactNative的代码模板,包括: 1. 组件名称 2. Api 名称 3. 所有StyleSheets属性 4. 组件属性 [2015-12-25]新增
webstorm汉化包
11-09
将resources_cn.jar文件添加到安装webstorm的目录下的lib文件夹，重新打开webstorm即可
WebStorm 汉化教程 - 含汉化包-附件资源
03-02
WebStorm 汉化教程 - 含汉化包-附件资源
个人webstorm插件离线包
07-28
个人webstorm插件离线包（WebStorm2023.2）
import-cost webstorm 插件
06-11
【标题】"import-cost WebStorm 插件"是一款专为WebStorm IDE设计的实用工具，它的主要功能是帮助开发者在编写代码时实时了解所引入的外部库或模块的大小，从而优化项目性能，减小应用的加载时间。通过提供直观的...
如何用ChatGPT插件+Webstorm提高程序员效率
04-28
如何用ChatGPT插件+Webstorm提高程序员效率
webstorm+小程序相配合来开发小程序
浩星
06-09 4211
​ webstorm可以安装的一个小程序插件：wechat-miniprogram-plugin，来实现小程序语法的高亮，并识别 rpx 这种小程序专有单位，还可以实现跟开发者工具中一些类似的操作功能
WebStorm快捷键大全及常用插件
sxzxiaofeng168的博客
09-13 849
下面是Webstorm的一些常用快捷键及插件： 掌握和常用的插件使用,可以大大提高你开发的效率 ctrl + shift + n: 打开工程中的文件，目的是打开当前工程下任意目录的文件。 ctrl + j: 输出模板 ctrl + b: 跳到变量申明处 ctrl + alt + T: 围绕包裹代码(包括zencoding的Wrap with Abbreviation) ctrl + []: 匹配...
webstorm好用的插件推荐
09-09
在WebStorm中有许多好用的插件可以增强开发体验。其中一个推荐的插件是 Sublime Thumbs，它可以在WebStorm中添加一个当前文件的代码缩略图，就像Sublime编辑器中一样。这个插件可以使你更方便地浏览代码，并且可以快速定位到感兴趣的部分。除了Sublime Thumbs插件，还有其他一些非常实用的插件可以提高你的工作效率。例如，CodeGlance插件提供了一个类似Sublime的缩略图，可以在编辑器的右侧显示整个代码文件的概览。此外，Material Theme UI插件可以帮助你定制WebStorm的外观，使其更具个性化。还有其他许多插件可以根据你的需求进行选择和安装，你可以在WebStorm的插件市场中找到更多有用的插件。因此，如果你想增强WebStorm的功能，我建议你去探索一下这些插件，找到适合你的工作流程的插件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值