合理使用WebStorm-环境配置篇

前言

使用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

git提交模版

我们在使用git提交代码时，团队如果制定了提交规范，可能需要自己去写提交前缀，在webstorm中有一个名为Git Commit Template的插件，可以手动选择类型，自动帮我们补齐前缀。

在插件商店中搜索安装即可。

image-20210720003808245

• 我们随便改点项目中的代码，然后选择菜单栏的git - commit

image-20210720004508661

• 默认是在项目左侧显示，我们把它改为弹窗形式显示

image-20210720004631719

• 点击模版图标，即可打开提交选项

image-20210720004809668

• 按照自己更改的内容，按需选择填写即可

image-20210720004935379

• 填写完成，将会回到提交页面，自动填写我们刚才所选择的选项

image-20210720005051274

Git提交记录

维护项目时，发现bug，我们想快速知道这行代码是谁提交的，大部分开发者可能要去通过git log来查找。

在webstorm中，有一个名为GitToolBox的插件，当我们鼠标选择某一行代码时，就能显示出这行代码的提交人和提交时间。

在插件商店搜索安装

image-20210720005537135

• 安装完成，重启编辑器

image-20210720005618211

• 鼠标选中代码，这一行的末尾就会显示提交人、提交时间等信息

image-20210720005737054

AI代码联想工具

webstorm中还有一款名为Codota的插件，他可以在你写代码时，自动联想出你想输入的内容。

在插件商店中搜索安装即可。

image-20210720010111488

• 安装完成，重启编辑器，打开setting-Codota面板，将其启用

image-20210720010636730

• 随便写点代码即可看到效果

image-20210720010451528

文件忽略

我们在项目中不想让把某个文件上传到git，通常情况下我们需要自己往.gitignore文件中去添加要忽略的文件，在webstorm中有一款名为.ignore的插件，可以通过右键不想上传的文件即可实现将其添加到配置文件中。

在插件商店中搜索安装即可。

image-20210720011017473

• 右键，添加到忽略文件

image-20210720011244740

最终效果

完成上述配置后，webstorm已经算是脱胎换骨了，但是还是觉得编辑器周围显示的选项卡有点多，我选择把它隐藏起来。

image-20210720012629644

• 最终界面如下所示

image-20210720012713110

注意：四周的选项卡隐藏后，在mac系统上可以通过双击command键让其显示出来。 windows系统则需要设置快捷键让其显示出来，我们打开srttings面板在keymap中搜索Tool Window Bars然后设置快捷键。

image-20210721222227391

image-20210721222402431

image-20210721222425419

其他配置

此处再列举一些项目上的配置。

Eslint的配置

有关Eslint的配置请移步我的另一篇文章：配置编辑器

构建项目索引

当你在写代码时，发现vue的一些内置指令、elementUI的一些组件无代码提示时，就需要构建下项目索引了，操作方法如下：

• 在node_modules文件夹上右键，在弹出的选项中选择Mark Directory as -Not Excluded即可

image-20210721220710616

一些常用的快捷键

• 选中当前行代码：command shift ⬅️/command shift ➡️
• 移动当前行代码：command ⬆️/ commind ⬇️
• 提交代码到git本地：command K
• push代码到git远程仓库: comnand shift K
• shift 按两次，随处搜索，搜索文件、功能、代码很方便
• command + f 当前页搜索
• command + shift + f 全局搜索字段
• command + r 替换当前文档
• command + shift + r 全局替换字段
• command + option + l 格式化代码
• shift + f6 使文件、标签、变量名重命名
• f2, shift + f2 切换到上\下一个突出错误的位置
• shift + 回车 无论在什么位置，自动跳到下一行
• option + 回车 警告代码快速给出自动修正
• command + 左键点击 跳到代码调用位置
• command + delete 删除当前行
• command + d 复制新增一行一样的代码
• command + w 关闭当前文件选项卡
• command + / 注释行代码
• command + b 跳转到变量声明处
• command + shift + c 复制文件的路径
• command + shift + [ ] 选项卡快速切换，很有用
• command + shift + +/- 展开/折叠 当前选中的代码块

将某一块代码提炼成一个方法

用鼠标选中一块代码，按下：command+option+m即可自动将这部分代码提炼成一个方法。

image-20210721234032254

配置备份

点击下图所示图标（编辑器底部），点击登录自己账号即可完成同步

image-20210721232319259

注意：如果你看不到这一栏，则需要在view - status Bar开启

image-20210721232611336

禁止掉不用的插件

在help菜单下禁用，如下图所示：

image-20210721235131850

在打开的面板中，选中你想禁用的插件点ok即可，如下图所示：

image-20210721235319352

申请许可证

webstorm是付费的，官方有开放开源项目申请渠道，通过后可以免费使用1年，过期了可以接着申请续期，一般项目维护在 3 个月以上大概率可通过。

申请地址：开源项目许可证

写在最后

至此，文章就分享完毕了。

我是神奇的程序员，一位前端开发工程师。