Webstorm干货（开发效率快到飞起！！！）

WebStorm前端开发工具进阶

模板语法（强烈推荐使用，开发效率快到飞起）
代码格式化之ESLint一键格式化
服务器直连，打包项目一键推送（抛弃繁琐的ssh，sftp软件）

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

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键，工具会自动生成配置好的内容

7、顺便带上我最喜欢的console.log打印的写法

下面看效果

这样能够在你输入this.message的时候，后面字符串内容会自动加上this.message，很快捷的一种打印方式。

代码格式化之ESLint一键格式化

webstorm不仅支持代码格式化，同时支持用户自定义所有格式化配置与Eslint一键格式化

一、自定义代码格式化配置（下面以JavaScript代码为例，其他同理）：

打开模板语法设置：File | Settings | Code Style | JavaScript

左边勾选按钮，右边可以直接看到展示效果

这里可以配置使用单引号/双引号，是否需要分号等等

二、ESLint一键格式化配置.

通过webstorm的eslint自动格式化功能，开发者无需去记繁琐的eslint规范。

首先打开设置：File | Settings | Languages & Frameworks | JavaScript | Code Quality Tools | ESLint（可直接在搜索框输入eslint搜索），导入当前项目的ESLint配置文件。

2.将整个工程进行ESLint格式化：

使用该方式也可以对单个文件夹或者单个文件进行一键格式化操作，非常方便。
3、同时也可以进行快捷键的配置：

每写完一个代码块，使用配置的快捷键进行格式化，好用！

服务器直连，打包项目一键推送（抛弃繁琐的ssh，sftp软件）

前端项目在完成之后发版会需要打包将dist（大众命名法）文件放在服务器中，webstorm强大的部署功能可以帮我们轻松的完成这一步：
1、连接服务器

2、配置服务器参数

连接成功后下面会出现如下提示：

我们输入Linux命令，可以看到能够正常的显示
至此，远程SSH连接就搞定了（可以抛弃之前的SSH软件了）

接下来开始配置SFTP，抛弃原来的FileZilla等软件

打开设置，找到Deployment，新增一个SFTP连接
输入名称（自定义）

添加一个SSH服务器

选择目标服务器文件夹（你要推送的目标服务器文件夹）

配置文件夹地址

搞定，接下来测试效果：
先对项目进行构建，生成dist文件夹
然后鼠标右键dist文件夹

选择Upload to （自己设置的名字）
搞定！是不是很方便呢！（如果服务器上已经存在相同文件，会进行自动替换）