WebStorm：常用插件（全部实用）包含主题、界面、开发效率等

逃离我推掉我的手 2023-10-12 09:27 3阅读 0赞

##  ##

## 一、主题插件 ##

### Material Theme UI ###

**推荐原因**：这款插件不仅**可以设置主题**，还**可以设置其他 UI界面**。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zi_5rO9X3plcg_size_17_color_FFFFFF_t_70_g_se_x_16][]

**注意：安装完成之后，记得一定要重启一下WebStorm。**

**这款主题的设置：**Settings —> Appearance & Behavior —> Material Theme

也可以直接搜索：Material 也是可以找到的。

#### 第一，设置主题 ####

这里很推荐这款主题：**Atom One Dark** （这款主题是目前我所用到的最舒服的一个主题）

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zi_5rO9X3plcg_size_20_color_FFFFFF_t_70_g_se_x_16][]

#### 第二，设置 Tab 栏的高度 ####

找到下面的**Tabs ——> Tab Height ，设置为 26**，这个高度是我平时开发觉得的最舒服的高度。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zi_5rO9X3plcg_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

#### 第三，设置 UI 的紧凑 ####

找到下面的**Compact ，勾选 Compact Statusbar 和 Compact Menus** ，这个紧凑度最舒服。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zi_5rO9X3plcg_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

#### 第四，其他的设置 ####

找到下面的 Components **，勾选 Accent Scrollbars 、 Transparent Scrollbars 和 Tabs Shadow**，这个设置最舒适。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zi_5rO9X3plcg_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

--------------------

### **Atom Material Icons** ###

**推荐原因**：这款插件不仅**支持很多不同类型的文件图标**，还**支持设置文件夹图标**。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zi_5rO9X3plcg_size_17_color_FFFFFF_t_70_g_se_x_16 1][]

**注意：安装完成之后，记得一定要重启一下WebStorm。**

**这款主题的设置：**Settings —> Appearance & Behavior —> [Atom][] Material Icons Setting

也可以直接搜索：Material 也是可以找到的。

**勾选一下几个选项就是最适合的配置了。**

**Enable File Icons** 文件图标

**Enable Directory Icons** 目录图标

**Enable UI Icons**  顶部UI 图标

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zi_5rO9X3plcg_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

**注意：顶部UI图标指的是下面这些**

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zi_5rO9X3plcg_size_19_color_FFFFFF_t_70_g_se_x_16][]

--------------------

### 字体 **JetBrains Mono** ###

**推荐原因：**程序员专用字体。

**注意：新版 WebStorm自带这款字体。**

--------------------

## 二、效率插件 ##

### **Rainbow Brackets** ###

**推荐理由：**用各种鲜明的颜色显示括号，这样可以很容易分清楚括号配对问题。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zi_5rO9X3plcg_size_17_color_FFFFFF_t_70_g_se_x_16 2][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zi_5rO9X3plcg_size_18_color_FFFFFF_t_70_g_se_x_16][]

--------------------

### CodeGlance2 ###

**推荐理由：**让右侧显示当前文件中代码缩略图。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zi_5rO9X3plcg_size_17_color_FFFFFF_t_70_g_se_x_16 3][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zi_5rO9X3plcg_size_20_color_FFFFFF_t_70_g_se_x_16 5][]

--------------------

### Key promoter ###

**推荐理由：**只要是鼠标操作能够用快捷键替代的，Key Promoter 会弹出提示框，告知你用什么快捷键替代。

### ![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zi_5rO9X3plcg_size_17_color_FFFFFF_t_70_g_se_x_16 4][] ###

--------------------

### Translation ###

**推荐理由：**不仅可以翻译一些陌生单词的意思，还可以在取名字的时候不知道怎么取的时候，可以通过右键翻译并替换，就可以自动替换想要的名字。（快捷键：ctrl + shift + X）

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zi_5rO9X3plcg_size_17_color_FFFFFF_t_70_g_se_x_16 5][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zi_5rO9X3plcg_size_20_color_FFFFFF_t_70_g_se_x_16 6][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zi_5rO9X3plcg_size_12_color_FFFFFF_t_70_g_se_x_16][]

--------------------

## 三、WebStorm的小设置 ##

### 设置默认内存 ###

推荐：装上 Webstorm 第一件事就是改默认内存，可以在 .vmoptions 设置文件里手动改，也可以**在 Help —> Change Memory Settings 中更改**，建议设置为 4096 或者更高一点。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zi_5rO9X3plcg_size_20_color_FFFFFF_t_70_g_se_x_16 7][]

--------------------

### 设置同步配置 ###

推荐：将你的配置与你的账户绑定，这样无论在哪个电脑使用都是相同的配置和快捷键。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zi_5rO9X3plcg_size_20_color_FFFFFF_t_70_g_se_x_16 8][]

--------------------

**更多等待更新......**

**各位有什么好的插件也可以留言推荐给我哈~~~**

文档编辑测试不易，来个三连呗

### PS：提示 ###

插一句：其实我们用UI插件之后，他会自动覆盖我们webstorm主题。发现想字体之类，原地方已经不能修改。如何修改呢？  
**设置** >> **搜索字体**  
![在这里插入图片描述][a0bab22f44be4d6ba00304a5e211a5ae.png]点击这个蓝色区域，进入以下页面。就能修改了。![在这里插入图片描述][266d77b19d6e4bc3aa794568aa4101c3.png]  
语言默认值，也能修改我们的代码样式。  
![在这里插入图片描述][98f2470cb1a941e79f3e83d735db451f.png]

转载：https://blog.csdn.net/yanzer/article/details/123963639

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zi_5rO9X3plcg_size_17_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/5f5577ac71744a6c8eb86e31f49fc4ec.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zi_5rO9X3plcg==,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zi_5rO9X3plcg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/6360aa25ad9c4a7f95310256448303ed.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zi_5rO9X3plcg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zi_5rO9X3plcg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/5fa8820e3274415283dcf370d2e91169.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zi_5rO9X3plcg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zi_5rO9X3plcg_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/e5e574ce026c484e8d45a6535f3de00c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zi_5rO9X3plcg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zi_5rO9X3plcg_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/f0006a66cca84b58a8068c3cc31d24fa.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zi_5rO9X3plcg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zi_5rO9X3plcg_size_17_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/020f7f5cffed4f05b091483f0cef3536.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zi_5rO9X3plcg==,size_17,color_FFFFFF,t_70,g_se,x_16
[Atom]: https://so.csdn.net/so/search?q=Atom&spm=1001.2101.3001.7020
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zi_5rO9X3plcg_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/41344c0144d44ddf94ef9e7c1e6dc7a6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zi_5rO9X3plcg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zi_5rO9X3plcg_size_19_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/17d9c549d5ca429696885a2ce4f6e835.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zi_5rO9X3plcg==,size_19,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zi_5rO9X3plcg_size_17_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/4fccf7b2798849149ff09f4afd6eaddd.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zi_5rO9X3plcg==,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zi_5rO9X3plcg_size_18_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/10b98b62032a4d95847a540896ca8345.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zi_5rO9X3plcg==,size_18,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zi_5rO9X3plcg_size_17_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/ff38ee306b0345f18c86abaf43e343c8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zi_5rO9X3plcg==,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zi_5rO9X3plcg_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/f10c85cd24ad42b8854e960c8e498035.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zi_5rO9X3plcg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zi_5rO9X3plcg_size_17_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/329bd9fb42a04ce0a51f25823f6ab3ca.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zi_5rO9X3plcg==,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zi_5rO9X3plcg_size_17_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/0d8af30b3fc14a1bb231c34e237cf3de.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zi_5rO9X3plcg==,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zi_5rO9X3plcg_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/0a816f34623c4d82aba99b3fdc65ad65.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zi_5rO9X3plcg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zi_5rO9X3plcg_size_12_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/774e741aa023433f9ddce940ef150f24.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zi_5rO9X3plcg==,size_12,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zi_5rO9X3plcg_size_20_color_FFFFFF_t_70_g_se_x_16 7]: https://img-blog.csdnimg.cn/5eafbca307ea437c9928eafe328d923f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zi_5rO9X3plcg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zi_5rO9X3plcg_size_20_color_FFFFFF_t_70_g_se_x_16 8]: https://img-blog.csdnimg.cn/6b09758a95cf42afabe4bf09f82f8edc.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zi_5rO9X3plcg==,size_20,color_FFFFFF,t_70,g_se,x_16
[a0bab22f44be4d6ba00304a5e211a5ae.png]: https://img-blog.csdnimg.cn/a0bab22f44be4d6ba00304a5e211a5ae.png
[266d77b19d6e4bc3aa794568aa4101c3.png]: https://img-blog.csdnimg.cn/266d77b19d6e4bc3aa794568aa4101c3.png
[98f2470cb1a941e79f3e83d735db451f.png]: https://img-blog.csdnimg.cn/98f2470cb1a941e79f3e83d735db451f.png