1. 全栈程序员必看首页

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

全栈程序员-用户IM • • 未分类

Vue（3）webstorm代码格式规范设置与vue模板配置编译器代码格式规范设置通常我们写代码时，代码缩进都是4个空格，但是在前端中，据全球投票统计，建议使用2个空格来进行代码缩进。首先我们打开webstorm中的设置，如果使用的是mac的同学直接使用c

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

编译器代码格式规范设置

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

首先我们打开webstorm中的设置，如果使用的是mac的同学直接使用command + ,快捷方式，来到Editor–>Code Style–>HTML，将Tab size和Indent的值改为2，同理在JavaScript中也改为2
Vue（3）webstorm代码格式规范设置与vue模板配置
 

vue模板配置

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

我们打开webstorm中的设置，来到Editor–>Live Templates，选择vue，点击右上角的+
Vue（3）webstorm代码格式规范设置与vue模板配置
选择Live Template，然后在Abbrevition中写入vue，在Template text中写入需要配置的模板文本内容即可
Vue（3）webstorm代码格式规范设置与vue模板配置
最后在当前页面，有个!的地方，点击Define
Vue（3）webstorm代码格式规范设置与vue模板配置
然后勾选HTML，点击ok完成
Vue（3）webstorm代码格式规范设置与vue模板配置
 

最后实现的效果，我们在HTML中直接输入vue，然后按tab，我们就会立马出现刚刚配置好的模板代码
Vue（3）webstorm代码格式规范设置与vue模板配置

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/166111.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

赞 (0)
全栈程序员-用户IM全栈程序员-用户IM
0 0
blank

相关推荐

  • mybatis log激活码【永久激活】 idea

    mybatis log激活码【永久激活】

    (mybatis log激活码)本文适用于JetBrains家族所有ide，包括IntelliJidea，phpstorm，webstorm，pycharm，datagrip等。IntelliJ2021最新激活注册码，破解教程可免费永久激活，亲测有效，下面是详细链接哦~https://javaforall.cn/ide…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年3月21日
  • 最小生成树的个数_最小生成树的两种算法

    最小生成树的个数_最小生成树的两种算法

    最小生成树的个数_最小生成树的两种算法给定一张 N 个点 M 条边的无向图，求无向图的严格次小生成树。设最小生成树的边权之和为 sum，严格次小生成树就是指边权之和大于 sum 的生成树中最小的一个。输入格式第一行包含两个整数 N 和 M。接下来 M 行，每行包含三个整数 x，y，z，表示点 x 和点 y 之前存在一条边，边的权值为 z。输出格式包含一行，仅一个数，表示严格次小生成树的边权和。(数据保证必定存在严格次小生成树)数据范围N≤105,M≤3×105输入样例：5 61 2 11 3 22 4 33 5 4

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年8月9日
  • 入Silverlight QQ群者必读「建议收藏」

    入Silverlight QQ群者必读「建议收藏」

    入Silverlight QQ群者必读「建议收藏」建立本技术群的目的，是为拥有共同爱好的你们提供一个交流平台，我们在此相约同游，共同分享彼此的Silverlight与WPF开发技术心得经验，当然也可以讲饮讲食，一起FB……希望各群友可以相互尊重,文明上网，将本群建成一个和谐的大家庭。         正所谓国有国法、群有群规！希望大家配合遵守！           1.严禁攻击人身的言论；在群中公然侮辱他人、捏造事实诽谤他人、对他人进

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年7月17日
  • 博客系统开发日记[通俗易懂]

    博客系统开发日记[通俗易懂]

    博客系统开发日记[通俗易懂]前端开发问题：设置div默认百分百比例，一定要设置html和body： html,body,.main,.sidebar{height:100%;} 如何去除Bootstarp栅格系统默认的15px的padding：https://blog.csdn.net/TsuiXh/article/details/93891357 要想兼容手机端一定记得加： <metaname=”viewp.

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年6月5日
  • JS数组合并(5种)

    JS数组合并(5种)

    JS数组合并(5种)前言项目过程中，经常会遇到JS数组合并的情况，时常为这个纠结。这里整理一下。简单而实用的for最容易想到的莫过于for了。会变更原数组，当然也可以写成生成新数组的形式。letarr=[1,2]letarr2=[3,4]for(letiinarr2){arr.push(arr2[i])}console.log(arr)//[1,2,3,4]arr.concat(arr2)会生成新的数组。letarr=[1,2]let

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年6月30日
  • pycharm远程调试python_pycharm怎么运行一个项目文件

    pycharm远程调试python_pycharm怎么运行一个项目文件

    pycharm远程调试python_pycharm怎么运行一个项目文件pycharm远程开发项目的实现步骤你是不是在学习python的时候在使用虚拟机系统进行开发，来回切换很是不方便，那么今天给大家推荐一个pycharm强大的功能。接下来我们利用这个django项目创建一个子app，测验一下是否真的能如此操作python@ubuntu:~/Desktop/Remote_Django$pythonmanage.pystartappusers很完美！，接下来告诉…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年8月26日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号