模板语法(强烈推荐使用,开发效率快到飞起)
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 (自己设置的名字)
搞定!是不是很方便呢!(如果服务器上已经存在相同文件,会进行自动替换)