工欲善必先利其器,webstrom/phpstrom系列使用小技巧

es6及node高亮及提示

  • es6提示:setting-->languages & frameworks --> javascript 将版本调制ecmascript6
  • node提示:setting-->languages & frameworks --> node & npm 设置node路径点击enable开启node高亮

自动保存导致webpack热更新失效

setting-->appearence & behavior --> system setting 去掉user ‘safe write’即可,因为safe write相当于不断创建文件副本,导致webpack不能热更新,另外webpack-dev-server使用new hot plugin不要带--hot指令

工欲善必先利其器,webstrom/phpstrom系列使用小技巧_第1张图片

node_modules导致ide卡死

setting-->editor --> filetype 将node_modules;加入下方的ignore files中

快捷键及alt

webstorm功能非常多,快捷键自然是不够用了,这时候alt键就派上用场了,很多没有快捷键的地方,只需按住alt再按下标有下划线的字母就是其快捷键,远离鼠标操作更流畅。
工欲善必先利其器,webstrom/phpstrom系列使用小技巧_第2张图片

autoscroll

  1. autoscroll to source就是单击对应的文件时在编辑区打开,一般不勾选,使用双击或快捷键f4打开,免得打开一大堆文件。
  2. autoscroll from source这个我一开始没搞懂有什么作用,后来才发现是选中编辑区对应的文件时,左侧文件导航也会跳至对应文件,强烈推荐勾上。因为我经常看到导航里a.js亮着,然后对着编辑区里focus的b.js一顿敲,最后发现写错地方了。
    工欲善必先利其器,webstrom/phpstrom系列使用小技巧_第3张图片

view-mode

westorm里功能非常多,变身窗口也是一大堆,用sublime和vsc的童鞋肯定很不适应,这时候在view-mode里切换至distraction fress mode(专注模式),顿时一身清爽,简洁与强大齐聚一身。

在行号那里右键就可以切换行号、标尺、换行等设置,单击某行就是设置断点了。
工欲善必先利其器,webstrom/phpstrom系列使用小技巧_第4张图片

refactor重构和findusages查找引用

当你修改或删除某个文件时,webstorm会自动使用findusages(快捷键alt+f7)来查看有哪些地方引用了这个文件,当你不想对某处重构或者这个地方只是同名但是无关,只需在弹出的findusages窗口选中不想改动的地方按下del或者右键exclude就能排除此处,防止误修改。

ctrl + alt + f/r可以指定某目录进行全局查找/替换,重构起来不要太方便。

推荐删除、移动、改名等重构操作在webstorm里进行,webpack会自动分析引用,帮你省很多事,你只需要在findusages排除少量无关的自动行为即可。
工欲善必先利其器,webstrom/phpstrom系列使用小技巧_第5张图片

ftp部署到服务器

tools -> deployment(部署)里可以配置服务器信息,填写host端口密码等就能链接到远程服务器,在map里配置需上传的本地目录,与服务器上的目标部署目录对应起来,就可以实现一键部署了。还可以打开自动上传,也可以在remote host窗口里直接查看、修改、删除服务器上的文件,老方便了。
工欲善必先利其器,webstrom/phpstrom系列使用小技巧_第6张图片

持续更新……

你可能感兴趣的:(webstorm,phpstorm,前端,idea)