本文主要是讲以下几个部分
- 常用插件
- 常用快捷键
- 常用配置和常用功能
- 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 就可以直接自动生成一个箭头函数了并且默认会在$NAME$的位置，Tab后到$END$的位置，非常方便。在实时模板下可以看到很多个快捷键，都是webstorm默认的一些针对不同类型文件下的快捷键，同时你也可以根据自己的需要来快速生成代码。
默认文件模板
默认文件模板，如果按上述的方式，如果去初始化一个文件的默认代码还得创建一个实时模板，再用快捷键+Tab生成代码。Webstorm已经替我们想到了，当你在创建一个文件的时候也可以去配置默认的代码。
设置→编辑器→文件和代码模板→Vue...
可以看到这是webstorm为我们配置的默认的模板，你可以在这个基础上去更改，在右下角的描述中也有一些提供的预定义变量，比如你可以在创建时自动创建一个当前时间，用户名之类的注释。
后缀补全自动生成代码
后缀补全。如在变量名后加.log +Tab 自动补全为console.log(变量) ，在编辑器→常规→后缀补全
可以看到通过在表达式后加.const 还可以补全为const的变量表达式，和实时模板类似也是高度定制化的。
收藏夹
在比较大型的项目中迭代需求时，可能只需要更改个别几个文件或是同时进行多个有文件重叠的需求，整个项目可能有几百个文件，会让人感到眼花缭乱，收藏夹可以对你需要修改的文件单独拎出来。右键文件夹或文件添加到收藏夹，然后就会显示在左下收藏夹中了，这样在开发需求时就能更聚焦于要修改的文件。
- 启用连写，启用连写以后代码会看起来更优雅一些
- 在设置→编辑器→字体→勾选启用连写
- 关闭设置中ESLINT里的保存时运行eslint —fix，这可能在git协作中会增加code review的心智负担，会不小心改格式。
Mac下配置软件启动方式
软件启动分为两种右键启动和命令行启动。
Mac下右键以webstorm打开项目
打开系统自带软件【自动操作】，进入软件后选择快速操作
按ctrl + s 保存操作
这时候右键文件夹时在快速操作中就可以通过webstorm打开项目文件了，其他软件比如webstorm也是同理。
还有一个更简单粗暴的方式，就是花50买一个国产软件超级右键(他们家的其他免费软件也不错，算是补全了Mac一些痛点)，并且更好看方便，当然还有一些其他功能。
Mac下命令行打开项目或文件
如果添加完webstorm文件发现不行的话可能是权限问题
chmod 777 /usr/local/bin/webstorm
这样配置命令行打开对于其他软件也是基本同理的。
如果觉得webstorm太长也可以用linux下的alias命令来给webstorm添加别名ws
alias ws=webstorm
此时就可以通过ws [项目路径] 来打开项目或文件了。
总结
想要详细的了解各项功能，最好的文档往往就是官方文档，所以对于功能的一些更具体的使用方式可以看WebStorm官方文档对应的讲解。
