前言
使用webstorm做为前端开发工具已经3年多时间了，抽空来记录下我常用的一些插件和配置，欢迎各位感兴趣的开发者阅读本文。
环境配置
首先，我们打开webstorm官网根据自己的系统下载对应的安装包。
image-20210719225511397
安装软件
打开我们下载好的安装包，按照下图所示步骤进行安装。
image-20210719225838867
- 选择安装路径
image-20210719225951563
- 选择要安装的版本以及默认文件关联
image-20210719230156845
- 开始安装
image-20210719230229295
- 安装中...
image-20210719230306253
- 安装完成，重启电脑
image-20210719230732445
启动软件
安装完成后，双击桌面图标来启动它。
image-20210719232504013
- 发送崩溃信息日志等到jet帮助他们改进产品，可以按照自己的需求选，此处选择发送。
image-20210719233201267
- 选择免费试用，填写自己的邮箱即可
image-20210719233532472
配置软件
在软件启动界面，打开你的项目。
image-20210719234543701
- 打开项目中任意一个文件，这个界面看起来可能有点丑，后面我们会让他脱胎换骨
image-20210719234951634
修改字体与行高
依次选择菜单栏的File - Settings打开软件的设置面板。
image-20210719235316208
- 按照下图所示修改字体、大小、行高、开启连字符
image-20210719235546600
常用插件
接下来，我们安装几个插件，让webstorm脱胎换骨。
主题插件
首先要安装的是主题插件Material Theme UI，打开软件的设置面板找到，Plugins，搜索这个插件
image-20210720000136770
- 安装中...
image-20210720000226973
- 安装成功，重启webstorm
image-20210720000309157
安装图标插件
安装完主题插件后，界面稍微好看了那么一点，但是图标还是默认的，很是不搭配，我们继续在Plugins中搜索Atom Material Icons
image-20210720000824116
- 安装中...
image-20210720000845996
- 安装成功，应用更改，手动重启webstorm。
image-20210720000941830
更换主题
安装完主题插件和图标插件后，我们还需要在Settings面板中切换主题
image-20210720001708274
- 在打开的面板中，在
Theme选项那里选择你喜欢的主题，此处选择Atom One Dark (Material)
image-20210720001959996
- 在
Editor - Font面板中修改主题字体
image-20210720002152088
image-20210720002314482
- 配置完成后的效果
image-20210720002437306
翻译插件
英语不是很好的开发者，为变量起名时，遇到词穷的情况时，大多数情况会打开翻译网站翻译过后再粘贴过来，webstorm有一款名为Translation的插件，可以做到选中中文直接右键翻译并替换。
我们在插件商店中搜索安装即可
image-20210720002918264
安装完成后，在编辑器中输入中文，右键即可翻译，如下所示：
image-20210720003320120
image-20210720003336242
