前端提高代码质量与开发效率，必用的几个webStorm插件

前端提高代码质量与开发效率，必用的几个webStorm插件

---

大纲链接 §

[toc]

---

1. Better Highlights 代码高亮，代码复杂度提示 ⇧

提高代码质量，最推荐的插件

• 十分好用，可以看到模块的引用数 和 方法的复杂度

在 vue 的SFC 中可以查看逻辑部分的代码复杂度

• 类似的有 Code Complexity，不过不支持前端语言

• Code Complexity 插件主页

• Better Highlights 插件主页

---

2. File Description 自动添加文件文档注释 ⇧

• 团队代码规范，方法必须写文档注释，可以自定义配置格式

• 适用于 js/ts，甚至 vue 的 SFC 也很好的支持

• 插件主页

---

3. Hunspell 拼写检查 ⇧

• 严格正确地拼写变量名称是写好代码的基础
• 相同的还有 TypingCat、Grazie

• 插件主页

---

4. Translation 翻译中文为英语，用来命名变量 ⇧

• 用来防止由于不知道英文名称，而使用魔法数字来起变量名
• 可以选择各种格式：大小写的驼峰、横杠等
• 类似的还有 GoogleTranslate、Comment Translator、Easy-Translation

• Translation 插件主页

---

5. Show Comment 快捷注释展示 ⇧

• 在调用的变量或方法的行末尾显示 引用对象的文档注释，心中有个大概
• 支持 js/ts

• Show Comment 插件主页

---

6. Hungry Backspace Reloaded 自动删除行尾空格 ⇧

• 如果有 VSC 插件 Trailing Spaces 配合，就好了；发现并在保存时去除尾部多余的空格

• Hungry Backspace Reloaded 插件主页

---

7. Bracket Block 代码块范围高亮 ⇧

• 一眼望得到函数的范围，如果也支持 css 样式代码就更好了

• Bracket Block 插件主页

---

8. Fold Call Blocks 折叠函数体 ⇧

• 好用是好用，但还是需要注意函数体不可以过长，复杂度不可太高，保持单一性原则

• Fold Call Blocks 插件主页

相似功能插件还有：

• Collapse Closing Tags 折叠关闭html标签，使得 html 外观更简洁
• HTML Attribute Folder 折叠html属性
• Tailwind Fold 折叠html属性

---

9. Kursor 光标处显示当前输入法语言提示 ⇧

• 不用为中文输入法没切换而烦恼了

• Kursor 插件主页

---

10. Ligatures Limited 编辑时，光标在符号附近，不显示连字符 ⇧

• Ligatures Limited 插件主页

---

11. WebStorm 内置功能 ⇧

识别重复代码行 ⇧

我与重复不共戴天

---

12. 结语

• 大家有什么好用的提高代码质量与开发效率插件，也可以在评论区分享

---

---

参考文章

• vscode就是个弟弟

相关文章

• 无

---

---