做为网页开发者，最称手的dnf搬砖专用工具无外乎 Webstorm 和 VSCode，Webstorm 像ios系统，闭源、收费、官方网有优良而强悍的开发设计能力、智能化数据库索引和补齐作用言不及义者，VSCode 如同安卓系统，开源系统、不断迭代更新、小区活力四射。

Webstorm 的 2021.3 版升级后，过去卡顿的状况减轻了许多，即使重装 node_modules 也不会像之前一样卡住大半天，由于卡顿退坑 Webstorm 的朋友们可以回家看一下

在下应用 Webstorm 较多，汇总了一些很好的组件和好用 Tips，期待能帮上你~

文中是 <这些实用的专用工具> 系列产品文章内容之一：

1. 推荐几种 windows 下十分实用的专用工具
2. 打造出舒服dnf搬砖自然环境，这种就是我最想推荐的桌面上好货
3. 干货满满！推荐几种 Mac 下十分好用的app（第一弹）
4. 干货满满！推荐几种 Mac 下十分好用的app（第二弹）
5. 干货满满！推荐几种 Mac 下十分好用的app（第三弹）

1. 软件推荐

下列推荐的软件都能够在 Webstorm 官方网软件销售市场免费下载，立即检索软件名安裝就可以。

有一些觉得并没处理困扰的软件例如电脑打字动画特效 activate-power-mode、七色彩虹引号 Rainbow Brackets、七色彩虹时间轴 Dmitry Batkovich 就沒有推荐了。

也有一些第三方智能化编码补齐的软件例如 Codota、Kite、Tabnine，我认为 Webstorm 内置的人工神经网络智能化补齐就挺好用了，用第三方软件有时编码补齐速率有点儿慢，要附加占有运行内存，有时还会继续跟内置的补齐矛盾或反复。很有可能就是我产品配置不足高，有兴趣可以安裝了试一试。

Chinese Language Pack / 中文语言包

初期沒有官方网中文语言包，还需要靠 Github 上有一个长期性沒有升级的翻译插件，好在 2021 年官方网发布了中文语言包，填补了在下弱鸡的英语能力（六级 436 飞过），不是说原英语的页面不能用，仅仅感觉英文版的有一些设定不可以保证一目了然，要找大半天。

有的巨头很有可能感觉英文版的用着挺不错，用习惯也一样，看着你本人必须了~

AceJump：鼠标光标迅速精准定位

可以将插进鼠标光标快速导航到编辑软件中由此可见的一切部位，拥有 AceJump 摆脱电脑鼠标全键盘开发设计轻轻松松，也有个不错的位置取决于即使编辑软件对话框分拆了，还可以在不一样的对话框中间导航栏，键盘快捷键 control/ctrl ;

GitToolBox：Git作用拓展

许多 Git 的功能增强，例如全自动 fetch 编码，通知栏中表明现阶段 Git 支系的未提交和落伍递交数表明，落伍支系清除，commit 对话框适用 emoji 神情，Inline Blame 能够看见每排编码到底是谁递交的、何时提交申请的、及其 commit 信息内容这些，假如你常常用 Git，这一软件必装了。

HighlightBracketPair：高亮度引号

有一些巨头会推荐七色彩虹引号软件 Rainbow Brackets，我就免费下载过，但引号多了以后五颜六色的看见也一样分不清楚。

之后发觉 HighlightBracketPair 软件，这一软件会在现阶段引号上高亮度以外，还会继续在左边编码个数那表明引号范畴，比七色彩虹引号软件更为形象化并且不易看老花眼。

HighlightBracketPair

Key Promoter X / Presentation Assistant：键盘快捷键表明

许多巨头的blog推荐 Key Promoter X，可以在你点某一功能模块的情况下提醒这个作用的键盘快捷键，常用一用就可以摆脱电脑鼠标，应用键盘快捷键开启这种作用。

还有一个非常好的软件叫 Presentation Assistant，适用作用的简体中文版表明，并且还能将 Mac 和 Win 自然环境的键盘快捷键都展现出去。

Presentation Assistant

One Dark Theme / Material Theme UI Lite：漂亮的免费主题

原先有一个非常好用的软件 Material Theme UI，但之后收费了，但是没事儿，也有一些免费的主题也很好用，例如 Material Theme UI Lite、Coderpillr Theme、One Dark theme 这些，都还好看的，自身挑个喜爱的主题风格吧~

Atom Material Icons：好看的图标

之前有一个编辑软件叫 Atom，如今用的人很少了，它最高的奉献便是主题风格和logo设计的十分漂亮，这一软件便是将 Atom 的标志引进到 Webstorm 的文件夹名称、文档上，让c语言编译器看上去更美观大方。

IntelliVue：Vue功能增强

Webstorm 上对 Vue 适用非常好的软件，如今已经适用 Vue3 的一些英语的语法，可以迅速建立 Vue2 的 data、methods 等，或是 Vue3 的 setup method 等，帮你少些一些模版编码。

安裝后工具栏会多一个 Vue 的选择项，下拉列表里有一些实际操作作用，对 Vue2 新项目较为实用。

Translation：最好翻译插件

可以方便地在 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，这两个类似的键盘快捷键也很好记。

CamelCase

.ignore：版本号可视化工具的忽视文档软件

.ignore 插件适用建立多种多样 .ignore 文档例如 .gitignore、.eslintignore、.dockerignore 这些，大家最经常使用的基础都适用，新创建的情况下适用挑选不一样种类的架构或库常见的忽视配置，如 node_modules、dist、.cache 等。

在新项目文件夹名称上鼠标右键、新创建、.ignore File

在文档上鼠标右键还可以迅速加上到忽视文档中，是应用 Git 必装的小插件。

也适用将文档旋选定鼠标右键迅速加上到 .gitignore 文档中。

Import Cost：表明引进的包容积尺寸

VSCode 上也是有这一插件，会在你引进的库后边对你说这一库的容积尺寸，和 gzip 后的包容积。

CodeGlance：右边编码小地图

在代码控制面板的右边表明一个编码缩列图，像 VSCode 里那般。我觉得有些人在使用这一插件，但在下不太用，在编辑软件里应用双屏的过程中感觉有一些要紧，长文档选用着还好，看着你本人爱好了。

.env files support：配置文档适用

可以给 .env 自然环境配置文档提升英语的语法高亮度，给配置文档中界定的自变量提升智能化数据库索引。此外在应用 Webpack 开展包装的情况下，大家会出现一些环境变，安裝该插件后，便会提醒系统变量文档中所具有的系统变量。

JetBrains Toolbox：套餐管理系统软件

用于规范化管理 Webstorm、IntelliJ、GoLand 等 JetBrains 套餐手机软件，管理方法常见设定、新项目导航栏，及其自动升级、插件升级、回退和降权软件版本等作用，假如你 JetBrains 系列产品程序安装了不仅一款，那十分推荐安裝。

2. 好用设定 Tips

2.1 关掉不用的插件

Webstorm 安裝后内置了许多内嵌插件，有一些不用的或不常见可以将其关掉，新项目打开速率可以进一步提升。

2.2 连体字

如今许多字体样式可以设定连体字，例如 Fira Code 或是 2021 年 JetBrains 提升的常用于程序编程的 JetBrains Mono 字体样式。明显推荐后面一种，2021 及之后版本号内放置 Webstorm，是最新发布专用型于程序编程的字体样式，清楚、最易读、辨识度高。

设定应用 JetBrains Mono 字体样式后，可以做到下边这种的实际效果：

假如你喜爱这类设计风格，在设定的 编辑软件->色彩搭配->配色方案字体样式 中改动。

2.3 设定默认设置运行内存

坚信很多人装上 Webstorm 第一件事便是改默认设置运行内存，可以在 .vmoptions 设定文档里手动式改，还可以在 协助->变更运行内存设定 中变更，提议设定为 4096 或是更高一些一点。

现阶段的占有内存有软件界面右下方能够看见，假如觉得运行内存设定的不足，可以再改大些。

2.4 设定配置同歩

可以在 文档 -> 管理方法IDE设定 -> IDE设置同歩 中设定配置同歩，Webstorm 会将你的配置与你的帐户关联，那样你家中的笔记本就可以和企业的计算机应用同样的配置和键盘快捷键。

3. Tips

3.1 强大的后缀名补齐作用

常常听见别人说编码全自动补齐，但我非常少听人说过 Webstorm 的后缀名补齐，但尤其好用，针对有一些已经摆脱或是期待摆脱电脑鼠标的大神而言，后缀名补齐可以让你少按很多次 ← 键。

下边是 .const 补齐的事例：

也有补齐关系式的引号 .par 和 return 句子的 .return 方法：

所有的后缀名补齐可以在 编辑软件->基本->后缀名补齐 中见到，还可以自定喜爱的补齐方法。

3.2 正则便捷认证

在正则上按 option/alt enter 可以就地便捷认证正则，这是一个迅速作用，在做表单验证的一些正则的过程中十分好用

4. 实用键盘快捷键

4.1 全局搜索

双击鼠标 shift 可以开启到处检索作用，这儿可以查找设定、编码、文件夹名称、文件夹名、更改主题风格这些，是 Webstorm 上最強作用之一，等同于 VSC 的 command/ctrl shift P

search everywhere

4.2 开启近期的文档

command/ctrl E 可以开启近期的文档，在这种文档正中间自动跳转，文件列表中也包含已关掉的文档。例如你刚关掉了一个文档，再想把这个文件开启，就可以采用这一键盘快捷键，等同于电脑浏览器的 command shift T

4.3 在项目视图中打开文件

在项目视图中打开文件是一个很便捷的作用，便是项目文件目录控制面板上边2个内切圆一样的标志，可以在文件目录中迅速开启现阶段并精确定位到现阶段文档：

在项目视图中打开文件

默认里并没给这些作用提升键盘快捷键，提议在 键盘映射->别的->在项目视图中选择文件 中增加自个的键盘快捷键，我设定的是 option/alt 1 ，仅作参考：

4.4 查询主要用途

应用 option/alt F7 可以检查现阶段自变量、函数公式、类的应用、载入、导进的地区，在阅读文章他人的编码梳理逻辑顺序的过程中特别实用，拥有这些作用阅读文章源代码总算不用 command/ctrl shift F 一个个找自变量了。

查询主要用途

迅速表明使用方法的键盘快捷键是 command/ctrl option/alt F7

4.5 别的非常键盘快捷键

1. command/ctrl option/alt O：import 提升，清除没用到的 import
2. command/ctrl option/alt L：再次格式化代码
3. command/ctrl option/alt Z：Git 回退现阶段地区的编码
4. command/ctrl J：查询预订义编码模版
5. command/ctrl shift up/down：智能化挪动代码块，假如挪动函数公式，可以将这一函数公式总体挪动到上一个函数公式上
6. control/ctrl shift J：合拼二行
7. command/ctrl G：挑选下一个同样配对项
8. command/ctrl D：拷贝现阶段行
9. F2：导航栏到编辑软件出错或是报警示的地区

查询官方网的全部键盘快捷键可以点一下 协助->快捷键 PDF，或是双击鼠标 shift 键入「快捷键」就可以见到官方网键盘快捷键参照 PDF，內容十分全，多看一下常常可以发觉意外惊喜。

键盘快捷键PDF

在网上的贴子大多数浓淡不一，乃至有一些不合逻辑，在下的内容全是学习过程中的汇总，假如出现未知错误，热烈欢迎留言板留言强调，假如文中协助到了你，别忘记关注点赞支撑一下哦，你的关注点赞就是我发布的最大的驱动力~

参照文本文档：

都 2021 了你竟然还要用 WebStorm ？

Tips – WebStorm Guide

PS：文中百度收录在在下的blog Github – SHERlocked93/blog 系列产品文章内容中，热烈欢迎各位关注我的微信公众号 这儿，不断为我们消息推送前面及其前面附近有关高品质技术性文，共同奋斗，一起加油~