关于使用 WebStorm 两年所总结的一些常用插件和功能

作者：安权

2022 年 8 月 09 日
陕西
本文字数：2797 字
阅读完需：约 9 分钟

WebStorm 不愧是 Jetbrains 旗下 IDE，在编写体验上十分丝滑。在平时开发过程中总会去想如何可以在 WebStorm 上进一步提高开发的效率，互联网上各处搜集的时候比较零散，想着可以写下来沉淀一下，本文主要是谈一下使用 Webstorm 的总结，如果大家如果有好的点子或者想法也可以留言或者评论文章，谢谢。

本文主要是讲以下几个部分

常用插件
常用快捷键
常用配置和常用功能
Mac 下软件启动方式(右键打开、命令行打开)

常用插件

由于 WebStorm 功能已经足够强大，所以功能性插件其实并不需要额外安装太多，很多内置的插件已经很不错了，下面的都是一些拓展性的插件，装了可能体验更好。

外观

Atom Material Icons 一个美化文件图标的插件
Material Theme UI 主题软件，个人比较喜欢 Dracula 的配色
Nyan Progress Bar 一只在加载文件或者进行一些操作读条的彩虹猫，纯属只是比较可爱哈哈

效率

Comments Highlighter 用于高亮注释，在一些复杂的代码中，不同的高亮注释会助于分离逻辑
可以在设置→编辑器→Comments Highlighter 中配置高亮，默认是三种
Key Promoter X 因为 WebStorm 功能还是比较复杂的，快捷键也特别多，当你进行一些可以用快捷键代替的操作时，这个插件可以在右下侧提示你对应快捷键。
GitToolBox 在项目中可以看到具体到某一行的提交信息和提交人
Rainbow Brackets 自动用多种颜色的括号可以方便看括号的对应关系
Translation 翻译插件 command + control + O 快捷键进行替换翻译，还可以针对中文选择大驼峰小驼峰用来做英文变量命名
Import Cost 显示引入的包体积大小

常用快捷键

如果是 windows 用户 command 直接换成 ctrl 即可

变量名后加.log +Tab 自动补全为console.log(变量) 【这部分功能是在编辑器->常规->后缀补全中设置】或直接log+Tab 生成console.log() 【这部分功能是在编辑器→实时模板 中配置】这两种补全可以完全自定义。
/+command 根据当前文件或环境提供注释的前后缀，比如在 js 代码处就是// 而在 JSX 的模板里就是{* *}
在各种括号中可以用Tab 键跳出括号比如一般输入[ 就会生成[光标] 在光标处编辑完后直接Tab就可以让光标跳出[]
在项目中经常要注释中英文来回切换的时候会触发双 shift 误开全局搜索，因此可以根据这个链接去禁用并修改快捷键，全局搜索我设置的是command+shift+F，可以搜索设置、代码、文件名、文件夹名、改变主题等等。
项目中碰到的一些函数或者变量不知道是在哪声明的，对着变量或函数command+鼠标左键 就可以跳转到声明的地方。
在代码文件上下切换时可以使用command+shift+← 和command+shift+→ ，尤其是在 Vue2 代码编写中，经常要在 template 和 data、methods 之间切换，当你光标第一次在 template 修改了代码，然后鼠标滚动到 methods 去修改代码时想再回头看 template 代码就可以直接 command+shift+←回到 template 那部分，当你看完后打算继续编写 methods 时可以 command+shift+→再回去，来回切换非常方便。
command/ctrl + shift + ↑/↓：智能移动代码块，如果移动函数，可以将这个函数整体移动到上一个函数上
command+z 回退上一次操作，command+shift+z 撤销回退。比如你写了两行代码，感觉不应该这么写，就可以 command+z 回退到没写这两行代码，突然你意识到可以这么写就可以 command+shift+z 再出现这两行代码。
格式化代码的快捷键是command+option+L ，当配置了 prettier 后也是一样的快捷键，谨慎执行，除非团队是统一的规范，否则可能在 git 协作时增加心智负担。
在正则表达式上按option/alt + enter ，可以用于验证正则表达式，有时候不确定的时候不用到网页上试了= -=
command+D 可以复制当前行，如果选中片段则可以复制片段。
command+E 可以查看最近使用的文件。
F2 可以导航到编辑器报错或警告的位置，F2+shift 上一个警告。

项目中常用的配置和功能

实时模板(自定义快捷键模板)

实时模板，定制自己的代码模板，比如 webstorm 默认配置的arf+Tab 会创建一个

const <第一个光标默认位置> = () => {    <当编写完第一个光标后Tab跳转后第二个光标位置>}

复制代码

打开设置→编辑器→实时模板→arf 会发现模板文本如下

照猫画虎我们就可以创建自己的代码模板 df，一个箭头函数

这样配置好以后未来只要df+Tab 就可以直接自动生成一个箭头函数了并且默认会在 $N A M E$ 的位置，Tab 后到 $E N D$ 的位置，非常方便。在实时模板下可以看到很多个快捷键，都是 webstorm 默认的一些针对不同类型文件下的快捷键，同时你也可以根据自己的需要来快速生成代码。