Webstorm干货(开发效率快到飞起!!!)

本文介绍如何利用WebStorm的模板语法、ESLint格式化和服务器直连功能提升前端开发效率,包括自定义语法模板、一键代码格式化及项目打包推送至服务器的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

模板语法(强烈推荐使用,开发效率快到飞起)

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代码为例,其他同理):

  1. 打开模板语法设置:File | Settings | Code Style | JavaScript
    在这里插入图片描述
    左边勾选按钮,右边可以直接看到展示效果
    在这里插入图片描述
    这里可以配置使用单引号/双引号,是否需要分号等等

二、ESLint一键格式化配置.

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

  1. 首先打开设置: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 (自己设置的名字)
    搞定!是不是很方便呢!(如果服务器上已经存在相同文件,会进行自动替换)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值