# webstorm_plugins

**Repository Path**: longmo666/webstorm_plugins

## Basic Information

- **Project Name**: webstorm_plugins
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-01-21
- **Last Updated**: 2025-04-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Webstorm 插件

## File Description

https://plugins.jetbrains.com/plugin/24617-file-description
类似 vscode中的 koroFileHeader

```text

```
## .env files support

https://plugins.jetbrains.com/plugin/9525--env-files-support/versions/stable

## AceJump

https://plugins.jetbrains.com/plugin/7086-acejump/versions/stable
AceJump 允许您快速导航插入符号到编辑器中可见的任何位置。
看到一个演示的 Ace 跳跃的行动！只需点击“ ctrl + ;”，键入一个字符，然后键入匹配的字符到 Ace 跳跃。
可以将插入光标快速导航到编辑器中可见的任何位置，有了 AceJump 脱离鼠标全键盘开发不在话下，还有个很好的地方在于即使编辑器窗口拆分了，也可以在不同的窗口之间导航，快捷键
control/ctrl + ;

## CodeGlance Pro

可在编辑器窗格中显示类似于 Sublime 中的缩小概览或小地图
https://plugins.jetbrains.com/plugin/18824-codeglance-pro

隐藏原始滚动条。

右击可快速配置。

支持标记高亮显示。

支持错误条纹高亮显示。

支持风险投资行业的亮点。

支持插入符号行高亮显示。

支援语言色彩方案。

快速浏览代码。

在分流模式下自动计算宽度。

按 Ctrl-Shift-G 切换扫视。

## Codeium: AI Autocomplete

https://plugins.jetbrains.com/plugin/20540-codeium-ai-autocomplete-and-chat-for-python-js-ts-java-go-/versions/stable

## Extra ToolWindow Colorful Icons

使工具窗口图标多彩。此插件基于 ToolWindow 彩色图标插件，并添加了一些图标。您也可以选择要(取消)激活的图标: 参见设置 >
外观和行为 > 额外的工具窗口彩色图标。

## GitHub Copilot

## GitToolBox

![Alt text](./images/gittoolbox_1.png)
![Alt text](./images/gitToolBox_2.png)
很多 Git 的功能增强，比如自动 fetch 代码，状态栏中显示当前 Git 分支的未提交和落后提交数显示，过时分支清理，commit 窗口支持
emoji 表情，Inline Blame 可以看到每行代码是谁提交的、什么时候提交的、以及 commit 信息等等，如果你经常用 Git，这个插件必装了。

- 免费功能
    - 项目视图和状态栏中的提前、落后提交数
    - 项目视图和状态栏中未提交的更改数量
    - 提交消息参考完成
    - 按设定的时间间隔自动获取
- 订阅功能
    - 导航到远程存储库中的文件并复制链接
    - 从剪贴板中的链接导航到本地文件

## IntelliVue

![Alt text](./images/intelliVue.png)
Vue 功能增强
Webstorm 上对 Vue 支持很棒的插件，现在已经支持 Vue3 的一些语法，可以快速创建 Vue2 的 data、methods 等，或者 Vue3 的 setup
method 等，帮你少些一些模板代码。

安装后菜单栏会多一个 Vue 的选项，下拉框里有一些操作功能，对 Vue2 项目比较好用。

## Translation

https://plugins.jetbrains.com/plugin/8579-translation/versions
可以便捷地在 Webstorm 中进行翻译，省去了打开翻译软件的操作，支持右键方式选中翻译，也可以打开独立窗口进行整段的翻译。

个人感觉最方便的功能就是翻译并替换功能，Mac 上快捷键 command + control + O，Win 上为 ctrl + shift +
X，在写业务代码的时候会自动翻译汉字的业务词条自动翻译，字符串可以选择大驼峰或小驼峰什么的。

## String Manipulation / CamelCase：字符串处理

这两个插件都是处理字符串的，可以将英文字符串在 kebab-case、SNAKE_CASE、PascalCase、camelCase、snake_case、space case 形态间切换。

第一个 String Manipulation 插件比较大，推荐经常处理字符串的小伙伴用，第二个 CamelCase 插件比较轻量，日常使用完全足够，使用也很简单，快捷键
option/alt +shift + U 就可以进行切换了。Webstorm 自带切换大小写的快捷键是 command/ctrl + shift + U，这两个差不多的快捷键也很好记。

https://plugins.jetbrains.com/plugin/2162-string-manipulation/versions/stable

## HighlightBracketPair

高亮括号
有些大佬会推介彩虹括号插件 Rainbow Brackets，我也下载过，但括号多了之后花花绿绿的看着也一样分不清。

后来发现 HighlightBracketPair 插件，这个插件会在当前括号上高亮之外，还会在左侧代码行数那显示括号范围，比彩虹括号插件更加直观而且不容易看花眼。
https://plugins.jetbrains.com/plugin/17320-highlightbracketpair

## Key Promoter X

## Presentation Assistant for 2023.2

添加一个选项，以显示您在基于 IntelliJ 的 2023.2 及更老版本 IDE 中调用的任何操作的名称和快捷方式(View | 卖相 | 操作描述)。

自 2023.3 版本以来，这个功能由 IntelliJ 平台提供，所以它可以在所有基于 IntelliJ 的 IDE 开箱即用，参见设置 | 外观和行为 |
演示助理

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

## Import Cost：显示引入的包体积大小

VSCode 上也有这个插件，会在你引入的库后面告诉你这个库的体积大小，和 gzip 后的包体积。

## Mario Progress Bar

https://plugins.jetbrains.com/plugin/14708-mario-progress-bar/versions/stable

## Paste Images into Markdown

将图像直接从剪贴板粘贴到 Intellij 中的 Markdown 文档中。图像文件存储在与 markdown 相关的可配置目录中
https://plugins.jetbrains.com/plugin/8446-paste-images-into-markdown

## MarkdownNavigatorEnhanced

- 使用前需禁用自带的markdown插件

修改jar中插件的版本号

```text
MarkdownNavigatorEnhanced-3.0.213.150.zip\MarkdownNavigatorEnhanced\lib\instrumented-MarkdownNavigatorEnhanced-3.0.213.150.jar\META-INF\plugin.xml
```

# 付费插件

## Smart Input Pro ​(Chinese)​

https://plugins.jetbrains.com/plugin/25280-smart-input-pro-chinese-

- 解决什么问题
    - 对于母语为中文的开发者，写代码过程中经常需要在中/英输入法之间进行切换，而且由于不清楚当前处于哪种输入状态，有时输入到一半发现输入法错了，删除后重新输入，严重影响了编码效率。

    - 其实，在很多特定场景需要使用哪种输入法是可以明确的，既然这样那就可以让IDE帮助我们自动切换输入法。

    - Smart Input Pro可以根据光标所处位置自动切换输入法，用光标颜色表示当前输入法状态，减少因切换输入法导致的输入错误，提升编码的流畅性和效率。

## Smart Jump

https://plugins.jetbrains.com/plugin/14053-smart-jump

Code Navigation:
Java Method ➔ MyBatis Xml
MyBatis Xml ➔ Java Method
Html ➔ JS/CSS file
Html ➔ JS function
Vue event ➔ JS function
JS file ➔ Java Controller RequestMapping
Eggjs jump
Maven pom.xml jump
Go interface unimplement jump
go.mod dependency repo jump

There has three ways to trigger a jump:
Click the gutter icon on the left.
Right click the popup menu 'Smart Jump'.
Shortcut: Alt + J

## Rainbow Brackets freemium 免费增值

https://plugins.jetbrains.com/plugin/10080-rainbow-brackets/versions
之前的功能仍然免费！只有新增加的高阶功能是付费的，不付费仍然可以使用。

## Extra Icons

https://plugins.jetbrains.com/plugin/11058-extra-icons/versions/stable

## commit-template

https://plugins.jetbrains.com/plugin/14104-commit-template/versions

## GitLink

https://plugins.jetbrains.com/plugin/8183-gitlink
一个 Jetbrain 插件，提供了在 GitHub，Bitbucket，GitLab，Gitee Gitea，Gogs，Azure，source，and Gerrit 中打开或复制文件、目录或提交的快捷方式。还可以使用
URL 模板语法配置自定义主机。

## Gitmoji Plus: Commit Button

https://plugins.jetbrains.com/plugin/12383-gitmoji-plus-commit-button/versions/stable

## React Buddy

https://plugins.jetbrains.com/plugin/17467-react-buddy

- Live templates for React hooks
  usest - useState
  usee - useEffect
  usec - useContext
  userd - useReducer
  usecb - useCallback
  usem - useMemo
  user - useRef
  useih - useImperativeHandle
  usele - useLayoutEffect
  usedv - useDebugValue
  ![Alt text](image.png)

# 实用设置 Tips

## 关闭不需要的插件

Webstorm 安装后自带了很多内置插件，有些不需要的或不常用可以将其关闭，项目开启速度可以进一步增加。
https://mmbiz.qpic.cn/mmbiz_png/XP4dRIhZqqUuoDfZneicI1nPLyhniaQUbiag7Y5vmOqxqda5ymBBLogicE0ia2DC4Z5QqvT8rt64Hsv4iaiaPDiaNyQZEw/640?wx_fmt=png&tp=wxpic&wxfrom=5&wx_lazy=1&wx_co=1

## 连体字

现在不少字体都可以设置连体字，比如 Fira Code 或者 2021 年 JetBrains 增加的专用于编程的 JetBrains Mono 字体。强烈推介后者，2021
及以后版本内置于 Webstorm，是最新发布专用于编程的字体，清晰、易读、辨识度高。
设置使用 JetBrains Mono 字体后，可以达到下面这样的效果：
https://mmbiz.qpic.cn/mmbiz_png/XP4dRIhZqqUuoDfZneicI1nPLyhniaQUbia93abEnsicaUIVTqvau4srKibzMQ0lVpKNsGQpQxTTyR0X5QcdCW07hOQ/640?wx_fmt=png&tp=wxpic&wxfrom=5&wx_lazy=1&wx_co=1
如果你喜欢这种风格，在设置的 编辑器->配色方案->配色方案字体 中修改。
https://mmbiz.qpic.cn/mmbiz_png/XP4dRIhZqqUuoDfZneicI1nPLyhniaQUbiakfgfyatJ3uppMXkLqSWwRyMj8pNbtM1WUWR1sue7iaAvYPUfQKDIlzA/640?wx_fmt=png&tp=wxpic&wxfrom=5&wx_lazy=1&wx_co=1

## 设置默认内存

相信很多人装上 Webstorm 第一件事就是改默认内存，可以在 .vmoptions 设置文件里手动改，也可以在 帮助->更改内存设置 中更改，建议设置为
4096 或者更高一点。

当前的占用内存在软件界面右下角可以看到，如果感觉内存设置的不够，可以再改大点。

## 设置配置同步

可以在 文件 -> 管理 IDE 设置 -> IDE 设置同步 中设置配置同步，Webstorm 会将你的配置与你的账户绑定，这样你家里的电脑就可以和公司的电脑使用相同的配置和快捷键。

## 强悍的后缀补全功能

经常听到别人说代码自动补全，但我很少听人说过 Webstorm
的后缀补全，但特别实用，对于有些已经脱离或者希望脱离鼠标的高手来说，后缀补全可以让你少按很多次 ← 键。

下面是 .const 补全的例子：

https://mmbiz.qpic.cn/mmbiz_gif/XP4dRIhZqqUuoDfZneicI1nPLyhniaQUbiaduAicKxOS5lkpYwAHHpDooFL875Ricu2VuQoAAyTqg5erB3yliau9icIdg/640?wx_fmt=gif&tp=wxpic&wxfrom=5&wx_lazy=1
还有补全表达式的括号 .par 和 return 语句的 .return 方式：
https://mmbiz.qpic.cn/mmbiz_gif/XP4dRIhZqqUuoDfZneicI1nPLyhniaQUbiakjOlcAEwkhSMsEHpcpYrjMEcvsTOjNpQgZqZlLvOVdrWib5vmNjic5AA/640?wx_fmt=gif&tp=wxpic&wxfrom=5&wx_lazy=1
全部的后缀补全可以在 编辑器->常规->后缀补全 中看到，也可以自定义喜欢的补全方式。

## 正则表达式快捷验证

在正则表达式上按 option/alt + enter 可以就地快捷验证正则表达式，这是一个快速功能，在做表单验证的一些正则表达式的时候非常实用

# 实用快捷键

## 全局搜索

双击 shift 可以打开随处搜索功能，这里可以搜索设置、代码、文件名、文件夹名、改变主题等等，是 Webstorm 上最强功能之一，相当于 VSC
的 command/ctrl + shift + P

## 打开最近的文件

command/ctrl + E 可以打开最近的文件，在这些文件中间跳转，文件列表中也包括已关闭的文件。比如你刚刚关闭了一个文件，再想把这个文件打开，就可以使用这个快捷键，相当于浏览器的
command + shift + T

## 查看用途

使用 option/alt + F7 可以查看当前变量、函数、类的使用、读取、导入的地方，在阅读别人的代码理清逻辑关系的时候非常好用，有了这个功能阅读源码终于不用
command/ctrl + shift + F 一个个找变量了。
https://mmbiz.qpic.cn/mmbiz_png/XP4dRIhZqqUuoDfZneicI1nPLyhniaQUbiaOKZ8hIhzam6CAumDxCf6TgYSI6bBD1Q4MibfmdEj7aur1TJ3uWt2qbw/640?wx_fmt=png&tp=wxpic&wxfrom=5&wx_lazy=1&wx_co=1
快速显示用法的快捷键是 command/ctrl + option/alt + F7

## 其他超级快捷键

command/ctrl + option/alt + O：import 优化，移除没用到的 import
command/ctrl + option/alt + L：重新格式化代码
command/ctrl + option/alt + Z：Git 回滚当前区域的代码
command/ctrl + J：查看预定义代码模板
command/ctrl + shift + up/down：智能移动代码块，如果移动函数，可以将这个函数整体移动到上一个函数上
control/ctrl + shift + J：合并两行
command/ctrl + G：选择下一个相同匹配项
command/ctrl + D：复制当前行
F2：导航到编辑器报错或者报警告的地方

查看官方的所有快捷键可以点击 帮助->键盘快捷键 PDF，或者双击 shift 输入「键盘快捷键」就可以看到官方快捷键参考
PDF，内容非常全，多看看经常可以发现惊喜。

参考
https://github.com/SHERlocked93/blog