vue模板配置与webstorm代码格式规范设置

 更新时间:2021年10月26日 15:02:51   作者:Silent丿丶黑羽  
这篇文章主要介绍了vue模板配置与webstorm代码格式规范设置详细的相关资料,需要的朋友可以参考一下文章得具体内容,希望对你有所帮助

1、编译器代码格式规范设置

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

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

2、vue模板配置

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

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

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

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

然后勾选HTML,点击ok完成

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


到此这篇关于vue模板配置与webstorm代码格式规范设置的文章就介绍到这了,更多相关 vue webstorm内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 关于vue data中的this指向问题

    关于vue data中的this指向问题

    这篇文章主要介绍了关于vue data中的this指向问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • vue实现input文本框只能输入0-99的正整数问题

    vue实现input文本框只能输入0-99的正整数问题

    这篇文章主要介绍了vue实现input文本框只能输入0-99的正整数问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue2.0使用Sortable.js实现的拖拽功能示例

    vue2.0使用Sortable.js实现的拖拽功能示例

    本篇文章主要介绍了vue2.0使用Sortable.js实现的拖拽功能示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-02-02
  • 聊聊element-ui 侧边栏的router问题

    聊聊element-ui 侧边栏的router问题

    这篇文章主要介绍了关于element-ui 侧边栏的router问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • vue3结合hooks开发可以注册的二次确认弹框

    vue3结合hooks开发可以注册的二次确认弹框

    这篇文章主要为大家介绍了vue3结合hooks开发可以注册的二次确认弹框,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • uniapp中uni-load-more的使用方式

    uniapp中uni-load-more的使用方式

    这篇文章主要介绍了uniapp中uni-load-more的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-05-05
  • vue封装的Tag标签双击编辑单击选中可删除

    vue封装的Tag标签双击编辑单击选中可删除

    项目中需要制作一个双击编辑单击选中可删除Tag标签,本文就来介绍一下如何实现,具有一定的参考价值,感兴趣的可以了解一下
    2023-09-09
  • Vue.js中的extend绑定节点并显示的方法

    Vue.js中的extend绑定节点并显示的方法

    在本篇内容里小编给大家整理了关于Vue.js中的extend绑定节点并显示的方法以及相关知识点,需要的朋友们学习下。
    2019-06-06
  • vue中PC端地址跳转移动端的操作方法

    vue中PC端地址跳转移动端的操作方法

    最近小编接到一个项目pc端和移动端是两个独立的项目,两个项目项目中的内容基本相同,链接组合的方式都有规律可循,接到的需求便是在移动端访问pc端的URL连接时,重定向至移动端对应页面,下面小编给大家分享实现过程,一起看看吧
    2021-11-11
  • Vuex Action的 { commit }的写法教程

    Vuex Action的 { commit }的写法教程

    实践中,我们会经常用到 ES2015 的参数解构来简化代码(特别是我们需要调用commit很多次的时候,{commit} 写法是解构后得到的,这篇文章主要介绍了Vuex Action的{ commit }的写法,需要的朋友可以参考下
    2023-10-10

最新评论