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开启
禁止掉不用的插件
在help菜单下禁用，如下图所示：
image-20210721235131850
在打开的面板中，选中你想禁用的插件点ok即可，如下图所示：
image-20210721235319352
申请许可证
webstorm是付费的，官方有开放开源项目申请渠道，通过后可以免费使用1年，过期了可以接着申请续期，一般项目维护在 3 个月以上大概率可通过。
申请地址：开源项目许可证
写在最后
至此，文章就分享完毕了。
我是神奇的程序员，一位前端开发工程师。
- 公众号无法外链，如果文中有链接，可点击下方阅读原文查看😊
