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

1. 添加vue模板

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

添加vue模板

<template>

</template>

<script>
  export default {
    name: 'vueComponent',
    components: {},
    data () {
      return {}
    },
    methods: {}
  }
</script>

<style lang="" scoped>

</style>

2. 代码风格

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

代码风格

3. 安装vue.js插件

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

WX20170909-113118@2x.png

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

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

配置Macro宏

定义Macro

为宏定义快捷键