WebStorm前端开发工具进阶

在不使用ESlint完美的响应公司开发前端规范

WebStorm自带代码风格自定义设置，保存代码时会自动格式化成用户设定的风格。
具体操作步骤如下：

1. 打开设置：File → Settings… (对应的快捷键Ctrl + Alt+s)
2. 打开：editor → code Style
   如图，code Style支持各种文件的风格自定义，这里以JavaScript末尾是否需要分号为例，可切换是否需要分号，右边代码示例栏会给出实时效果，由于本人之前学习的内容偏向于后端，不使用分号有点不太能够适应，所以这个功能对于我来说时非常实用的。

模板语法（强烈推荐使用，开发效率快到飞起）

WebStorm集成了对各个前端语言的快捷语法支持，这里以Vue（Angular，React同样支持）为例，在.vue文件的template标签内输入v-for然后按下tab键，工具会自动生成如下代码

输入完成后继续按tab光标会切换到对应的语法区域，方便修改。

该功能还支持自定义语法模板（敲重点！），基本上组件够完善的话，一般的页面都不需要写代码了

先看看完整示例：
已分页组件为例，下面开始操作步骤：
1、打开模板语法设置：File | Settings | Editor | Live Templates
2、新建一个模板组

3、新建一个组件模板，填写内容（以html为例）

$变量$ 这个符号在第5步需要用到，相当于告诉开发工具这个是变量，用户自己填的

4、选择模板使用范围（这个必须要设置）

5、填写第三步设置的值（记得需要双引号），当然工具也给我提供了例如当前日期类的变量，这个可自行搜索查看
6、完成

配置好之后就可以愉快的使用了，已html为例，在vue文件的template标签内，输入jpage-html按下tab键，工具会自动生成配置好的内容