首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Vue(3)webstorm代码格式规范设置与vue模板配置

Vue(3)webstorm代码格式规范设置与vue模板配置

作者头像
全栈程序员站长
发布2022-09-16 12:36:48
发布2022-09-16 12:36:48
2.7K0
举报

大家好,又见面了,我是你们的朋友全栈君。

编译器代码格式规范设置

通常我们写代码时,代码缩进都是4个空格,但是在前端中,据全球投票统计,建议使用2个空格来进行代码缩进。

首先我们打开webstorm中的设置,如果使用的是mac的同学直接使用command + ,快捷方式,来到Editor–>Code Style–>HTML,将Tab sizeIndent的值改为2,同理在JavaScript中也改为2

vue模板配置

在我们使用html练习vue时,如果我们不想每次都要创建一次vue实例对象,那么我们可以在html中配置一个模板,以后直接使用vue标签,就能直接引入代码

我们打开webstorm中的设置,来到Editor–>Live Templates,选择vue,点击右上角的+

选择Live Template,然后在Abbrevition中写入vue,在Template text中写入需要配置的模板文本内容即可

最后在当前页面,有个!的地方,点击Define

然后勾选HTML,点击ok完成

最后实现的效果,我们在HTML中直接输入vue,然后按tab,我们就会立马出现刚刚配置好的模板代码

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/165750.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 编译器代码格式规范设置
  • vue模板配置
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档