使用webstorm做为前端开发工具已经3年多时间了,抽空来记录下我常用的一些插件和配置,欢迎各位感兴趣的开发者阅读本文。
首先,我们打开webstorm官网根据自己的系统下载对应的安装包。
image-20210719225511397
打开我们下载好的安装包,按照下图所示步骤进行安装。
image-20210719225838867
image-20210719225951563
image-20210719230156845
image-20210719230229295
image-20210719230306253
image-20210719230732445
安装完成后,双击桌面图标来启动它。
image-20210719232504013
image-20210719233201267
image-20210719233532472
在软件启动界面,打开你的项目。
image-20210719234543701
image-20210719234951634
依次选择菜单栏的File - Settings
打开软件的设置面板。
image-20210719235316208
image-20210719235546600
接下来,我们安装几个插件,让webstorm脱胎换骨。
首先要安装的是主题插件Material Theme UI
,打开软件的设置面板找到,Plugins
,搜索这个插件
image-20210720000136770
image-20210720000226973
image-20210720000309157
安装完主题插件后,界面稍微好看了那么一点,但是图标还是默认的,很是不搭配,我们继续在Plugins
中搜索Atom Material Icons
image-20210720000824116
image-20210720000845996
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提交代码时,团队如果制定了提交规范,可能需要自己去写提交前缀,在webstorm中有一个名为Git Commit Template
的插件,可以手动选择类型,自动帮我们补齐前缀。
在插件商店中搜索安装即可。
image-20210720003808245
git - commit
image-20210720004508661
image-20210720004631719
image-20210720004809668
image-20210720004935379
image-20210720005051274
维护项目时,发现bug,我们想快速知道这行代码是谁提交的,大部分开发者可能要去通过git log
来查找。
在webstorm中,有一个名为GitToolBox
的插件,当我们鼠标选择某一行代码时,就能显示出这行代码的提交人和提交时间。
在插件商店搜索安装
image-20210720005537135
image-20210720005618211
image-20210720005737054
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的配置请移步我的另一篇文章:配置编辑器
当你在写代码时,发现vue的一些内置指令、elementUI的一些组件无代码提示时,就需要构建下项目索引了,操作方法如下:
node_modules
文件夹上右键,在弹出的选项中选择Mark Directory as -Not Excluded
即可image-20210721220710616
command shift ⬅️/command shift ➡️
command ⬆️/ commind ⬇️
command K
comnand shift K
shift
按两次,随处搜索,搜索文件、功能、代码很方便用鼠标选中一块代码,按下:command+option+m
即可自动将这部分代码提炼成一个方法。
image-20210721234032254
点击下图所示图标(编辑器底部),点击登录自己账号即可完成同步
image-20210721232319259
注意:如果你看不到这一栏,则需要在
view - status Bar
开启
image-20210721232611336
在help
菜单下禁用,如下图所示:
image-20210721235131850
在打开的面板中,选中你想禁用的插件点ok即可,如下图所示:
image-20210721235319352
webstorm是付费的,官方有开放开源项目申请渠道,通过后可以免费使用1年,过期了可以接着申请续期,一般项目维护在 3 个月以上大概率可通过。
申请地址:开源项目许可证
至此,文章就分享完毕了。
我是神奇的程序员,一位前端开发工程师。