webstorm配置vue.js开发(模板 代码风格 Macro定制)

前端的日常开发中,webstorm丰富的功能,对HTML,CSS,Js及各种框架的支持非常好,在vue.js的开发中,定义快捷的配置能够极大的提高我们的开发效率。

1. 添加vue模板

File and Code Templates中添加模板,名字定义,后缀为vue

webstorm配置vue.js开发(模板 代码风格 Macro定制)_第1张图片
添加vue模板





2. 代码风格

Code Style 中找到Other File Types 修改默认tabsize和indent

webstorm配置vue.js开发(模板 代码风格 Macro定制)_第2张图片
代码风格

3. 安装vue.js插件

Plugin 中点击Instal JetBrains plugin 搜索vue.js 点击安装

3. 配置Macro宏 定义保存自动格式化

在edit中找到Macros中找到Start Macro Recording如下,点击开始录制之后分别按下 格式化快捷键 command option L(Ctrl alt L)**保存快捷键 **command S,点击结束宏录制。结束后再keymap中找到Macros刚才保存的宏,为其添加快捷键,本人习惯改成默认保存的command S,保存时候就会先格式化再保存了。

webstorm配置vue.js开发(模板 代码风格 Macro定制)_第4张图片
配置Macro宏
定义Macro
webstorm配置vue.js开发(模板 代码风格 Macro定制)_第5张图片
为宏定义快捷键

你可能感兴趣的:(webstorm配置vue.js开发(模板 代码风格 Macro定制))