WebStorm新手必看的高效开发技巧

刚装好 WebStorm 那会儿，我也是一脸懵，功能多到菜单都翻不完，写个简单页面感觉比用记事本还慢。后来硬着头皮用了小半年，才发现这软件真香，很多技巧一旦学会就回不去了。今天就把我踩过坑之后总结的 WebStorm 高效开发技巧分享出来，全是新手能直接上手用的，不整那些虚的。

先把快捷键刻进肌肉记忆

新手最容易忽略的就是快捷键，觉得鼠标点也挺快。但你试试连着写两小时代码，手不离键盘和来回摸鼠标，效率差得不是一点半点。我一开始也不信，后来强迫自己记了几个，现在基本离不开。

最常用的几个：Ctrl+B 跳到变量或函数定义处，看别人代码时特别管用；Alt+Enter 是万能修复键，报错的地方按一下它经常能直接给你补全或修正；Ctrl+Alt+L 一键格式化代码，乱糟糟的缩进瞬间整齐。还有 Shift+Shift 全局搜索，找文件找类找符号都靠它。

别一次记太多，先挑三四个天天用，用顺手了再加。我当初就是贪多，结果一个没记住，还不如老老实实一个一个来。

活用代码模板和实时模板

WebStorm 自带的实时模板简直是偷懒神器。比如你打 log 然后按 Tab，直接给你生成 console.log()；打 for 按 Tab 出来循环结构。这些默认的模板已经够用了，但每个人习惯不一样，你可以自己加。

在设置里搜 Live Templates，新建一个自己的缩写。我给自己配了个 clg 生成带标记的 console.log，调试的时候一眼就能在控制台找到自己打的那条。还有像 React 组件、Vue 模板这些，配好之后新建文件敲几个字母就出来一大段，省下的时间摸鱼不香吗。

另外记得把 Emmet 用起来，写 HTML 的时候打 ul>li*5 按 Tab，直接展开五个列表项，写静态页面速度飞起。

调试和版本控制别只会用命令行

很多新手调试就知道 console.log 满天飞，其实 WebStorm 自带的调试器好用得很。在行号旁边点一下加断点，然后点那个小虫子图标启动调试，变量值、调用栈全都能看。尤其是排查那种循环里数据不对的问题，比打一堆 log 快多了。

还有 Git 集成，WebStorm 里直接就能提交、拉取、看 diff，冲突的时候那个合并界面比命令行直观太多。我刚开始用 Git 命令行老搞混，后来在 WebStorm 里点着点着就明白了分支合并是怎么回事。注意提交前先看看右下角当前分支对不对，我就干过在主分支上瞎改然后直接提交的蠢事。

再说个小细节，Local History 这个功能一定要知道。就算你没用 Git，WebStorm 也会自动记录文件修改历史，右键就能看。我有次误删了一段代码没提交，就是靠这个找回来的，救了大命。

代码检查和重构让代码更干净

WebStorm 的代码检查挺严格的，刚开始满屏黄黄绿绿的波浪线看着烦，但习惯之后会发现它帮你避了不少坑。比如未使用的变量、拼写错误、潜在的空指针，它都能提前提醒。你可以在设置里调一下检查级别，别全关了，不然就失去意义了。

重构功能也是新手容易忽略的。选中一个变量名按 Shift+F6 重命名，所有引用到的地方一起改，不用手动一个个找。还有提取变量、提取方法这些，写复杂逻辑的时候拆一拆，代码可读性立马上来。我现在的习惯是写完一个函数先看看有没有能提取的重复代码，顺手就重构了。

最后提一嘴，WebStorm 虽然吃内存，但把没用的插件关一关，缓存清一清，跑起来还是挺流畅的。新手别急着装一堆主题插件，先把自带功能摸透，效率自然就上来了。上面这些技巧看着简单，真坚持用一周，你会回来感谢我的。