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

最新推荐文章于 2024-07-26 14:28:29 发布
最新推荐文章于 2024-07-26 14:28:29 发布
阅读量2k 收藏 1
点赞数
文章标签： vue java js html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43880991/article/details/118208631
版权
本文介绍了如何在WebStorm中设置Vue项目的代码格式规范，包括将缩进调整为2个空格，并提供了Vue模板的配置方法，以便在编写Vue代码时能够快速插入预定义的模板。
摘要由CSDN通过智能技术生成

编译器代码格式规范设置

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

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

vue模板配置

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

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

最低0.47元/天 解锁文章
Silent丿丶黑羽
关注
vue: WebStorm设置快速编译运行的方法
10-17
通过以上步骤，你就可以在WebStorm中设置一个用于快速编译和运行Vue项目的配置。每次需要调试或查看项目效果时，只需要点击一两下即可迅速启动项目。这样的配置不仅能够帮助开发者快速测试代码更改，还能够避免重复...
webstorm中vue语法的支持详解
08-27
主要介绍了webstorm中vue语法的支持详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Webstorm编辑HTML，如何配置在保存时自动缩进，如何自定义要缩进的标签
最新发布
GB2102的博客
07-26 233
Webstorm保存时自动缩进，指定标签缩进
WebStorm开发Vue项目时的代码格式配置
摩羯座de杰杰陆的博客
07-18 2663
WebStorm开发Vue项目时的代码格式配置一、IDE配置1.1、启动ESLint1.2、同一缩进配置二、配置文件2.1、.editorconfig2.2、.eslintignore2.3、.eslintrc.js 一、IDE配置 1.1、启动ESLint 1.2、同一缩进配置 二、配置文件 2.1、.editorconfig # https://editorconfig.org root = true [*] charset = utf-8 indent_style = space inde
webstorm 开发vue设置code style
暗影刀客的博客
04-11 3060
webstorm开发vue的时候，第一次提交的时候发现eslint 的校验，一一修复之后，在commit代码之后，发现依然报错，在js代码中一直给我刷新成缩紧两个空格的形式，最后才发现是代码本身的style设置有坑，下面是解决办法。 1.打开webstorm的设置页面 快捷键操作 可以看到这是配置javascript风格的设置区域，可以参考eslint的需求进行默认设置，左边勾选，右边可以直接看...
webstorm格式化配置
tianlin0203的博客
05-07 1677
本文采用个人认为比较合理的格式化配置。打开webstorm的 Editor > Code Style。
WebStorm设置前端开发代码规范
jonssonyan
07-13 2014
Prettier StyleLint ESLint TSLint
JavaScript 之 Vue3 入门到精通+网络商城案例（一篇文章精通系列）【WebStorm版】
程序员猫爪
08-24 1015
JavaScript 之 Vue3 入门到精通（一篇文章精通系列）【WebStorm版】 一、Vite创建Vue3 项目 二、Vue3基本语法1、定义全局变量，2、定义函数，3、定义响应式ref，4、响应式reactive，5、Vue3事件对象与传递参数，6、Vue3计算属性，6.1引入`computed`将计算的结果进行缓存，防止多次调用损失性能 6.2 设置值和修改值，7、Vue3监听数据变化，7.1、单个数据监听，7.2、多个数据监听，8、Vue3常见指令与样式，8.1、class，8.2、id，8
webstorm 默认代码格式化更改
qq_43549745的博客
09-08 3463
webstorm 默认代码格式化更改，webstorm设置prettier规则 一.webstorm 设置界面=>Editor=>Code Style 可以设置各种文件类型的格式化规则 设置默认为单引号 二.webstorm中配置prettier 　　1.安装prettier 　　　　npm i --save-dev prettier　　或者　　npm i -g prettier　　或者　　下载插件就行 　　2.先配置prettier，然...
webstorm为Vue设置Live Templates
@热血与梦想的博客
04-24 526
webstorm为Vue设置Live Templates --太过香会沉醉 第一步：写好vue模板 <div id="app"> {{ message }} </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ ...
Web篇_06 搭建Vue项目（Vue3+Element Plus+Vue-cli+Webstorm）
凤文Sharing的博客
06-27 1652
Vue3使用Vue UI搭建项目使用Webstrom创建Vue项目 VUE3的文档 https://v3.cn.vuejs.org/ 使用Vue UI搭建项目 我使用Vue ui搭建项目，原因是简单，易于管理，图形化易操作。 1. 安装node 首先你应该有一个node.js，如果没有可以参考安装和使用： 2. 安装Vue CLI Vue CLI的文档 https://cli.vuejs.org/zh/ vue-cli是官方发布的vue项目脚手架，可以用来快速创建项目，我们本文所用到的vue ui就是基于
WebStrom 格式缩进, 标签层级缩进问题
qq_35003310的博客
11-01 627
问题: WebStrom 默认格式是这样的 我要的效果是这样的 解决方法: Settings ---> HTML ---> Other --->Do not indent children of: ----> 删除html 就可以了...
webStorm新建vue页面时自动生成页面的模版
qq_35641337的博客
11-11 1580
本文一共两步，一步找设置，一步设置模版 一、ctrl+alt+L打开设置界面，进入以下选项 二.复制粘贴以下代码 注：${COMPONENT_NAME}是你新建的时候输入的文件名，自动填充文件名 <template> <div class="${COMPONENT_NAME}"> </div> </template> <script> ...
【VUE3】保姆级创建干净项目
qq_62543337的博客
11-04 820
VUE3干净项目创建
解决vue项目中缩进不一致的问题
upStar1的博客
05-12 3998
在vue项目中，有时候会碰到这个文件的缩进是两格，另一个文件的缩进是四格。但是vue的eslint格式是默认两格，所以调整缩进四格的文件就很不方便。 碰到这种情况是因为vue文件默认缩进四格。 所以我们更改一下vue设置。 打开vscode，打开文件，选择首选项，点开设置，把缩进改为2 修改默认缩进（默认为4） ...
webstorm创建vue
weixin_73310020的博客
04-19 1359
获取和设置表单元素的值. input select textarea。设置标签的文本值(textContent)根据表达值的真假,切换元素的显示和隐藏。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值