【Vue】vscode格式刷插件Prettier以及配置项~~保姆级教程

文章目录

  • 前言
  • 一、下载插件
  • 二、在项目内创建配置文件
    • 1.在根目录创建,src同级
    • 2.写入配置
    • 3.每个字段含义
  • 总结


前言

vscode格式刷,有太多插件了,但是每个的使用,换行都不一样。
这里我推荐一个很多人都推荐了的Prettier

在这里插入图片描述


一、下载插件

传送门

进官网一键安装

在这里插入图片描述
或者在vscode搜索
在这里插入图片描述

二、在项目内创建配置文件

1.在根目录创建,src同级

文件名

.prettierrc.json

在这里插入图片描述

2.写入配置

代码如下(示例):

{"printWidth": 120,"tabWidth": 2,"useTabs": false,"semi": true,"singleQuote": true,"quoteProps": "as-needed","jsxSingleQuote": false,"trailingComma": "es5","bracketSpacing": true,"jsxBracketSameLine": false,"arrowParens": "always","requirePragma": false,"insertPragma": false,"vueIndentScriptAndStyle": false,"proseWrap": "preserve"
}

3.每个字段含义

  1. printWidth:指定每行代码的最大宽度。默认为 80。
  2. tabWidth:指定一个制表符等于多少个空格。默认为 2。
  3. useTabs:指定是否使用制表符代替空格缩进。默认为 false。
  4. semi:指定是否在语句末尾添加分号。默认为 true。
  5. singleQuote:指定是否使用单引号而不是双引号。默认为 false。
  6. quoteProps:指定对象属性名称是否使用引号。可以是 “as-needed”、true 或 false。默认为 “as-needed”。
  7. jsxSingleQuote:指定 JSX 属性是否使用单引号而不是双引号。默认为 false。
  8. trailingComma:指定是否在数组和对象字面量的末尾添加逗号。可能的值是 “none”、“es5”(在 ES5 中有效)和 “all”。默认为 “es5”。
  9. bracketSpacing:指定是否在对象字面量中的括号之间添加空格。默认为 true。
  10. jsxBracketSameLine:指定是否将多行 JSX 元素的末尾括号放在同一行上。默认为 false。
  11. arrowParens:指定箭头函数参数是否永远使用圆括号。可以是 “always”、“avoid”、或 “as-needed”。默认为 “always”。
  12. requirePragma:指定是否需要在文件顶部添加 // @format 注释才会格式化。默认为 false。
  13. insertPragma:指定是否在文件顶部插入 // @format 注释。默认为 false。
  14. vueIndentScriptAndStyle:指定是否单独缩进 Vue 组件中的

总结

我这里只修改了2个地方
把默认字符串双引号,改成了单引号。 ~~~ singleQuote
还有宽度 printWidth 改成了120

为什么字符串变量要用单引号,请看规范传送门
在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/99385.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

多路彩灯控制器LED流水灯花型verilog仿真图视频、源代码

名称:多路彩灯控制器LED流水灯花型verilog 软件:Quartus 语言:Verilog 代码功能: 用quartus和modelism,设计一个多路彩灯控制器,能够使花型循环变化,具有复位清零功能,并可以选择…

Flutter 打包 windows桌面端可执行文件

简单一说 因为个人兴趣爱好,在写一个跨平台工具。为了省事没去官网看文档,直接翻阅各大博客网站,一个简单的命令,博客写的内容比较复杂。为了方便自己和有需要同学,简单做一个记录。 Flutter提供了一种方便命令行的方…

【gitlab】从其他仓库创建项目

需求描述 解决方法 以renren-fast脚手架为例 第一步 第二步 第三步 第四步 参考文章

应用层协议 HTTP

一、应用层协议 我们已经学过 TCP/IP , 已然知道数据能从客户端进程经过路径选择跨网络传送到服务器端进程。 我们还需要知道的是,我们把数据从 A 端传送到 B 端, TCP/IP 解决的是顺丰的功能,而两端还要对数据进行加工处理或者使用&#xf…

python常用库之数据库orm框架之SQLAlchemy

文章目录 python常用库之数据库orm框架之SQLAlchemy一、什么是SQLAlchemySQLAlchemy 使用场景 二、SQLAlchemy使用SQLAlchemy根据模型查询SQLAlchemy SQL 格式化的方式db_session.query和 db_session.execute区别实测demo 总结:让我们留意一下SQLAlchemy 的 lazy lo…

SpringMVC的视图

文章目录 1. ThymeleafView2. 转发视图3. 重定向视图4. 视图控制器view-controller5. 总结6. 荐书 SpringMVC中的视图是View接口,视图的作用渲染数据,将模型Model中的数据展示给用户SpringMVC视图的种类很多,默认有转发视图和重定向视图 当工…

二维反射容斥:P9366

https://www.luogu.com.cn/problem/P9366 构造循环矩阵,考虑反射容斥和将军饮马 考虑二维不太好做,我们曼哈顿距离转切比雪夫距离,变成一维的情况。 由于棋盘是正方形的,所以循环长度为 2 n 4 2n4 2n4。用多项式快速幂预处理&…

Unity设计模式——原型模式

原型模式(Prototype)用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象。原型模式其实就是从一个对象再创建另外一个可定制的对象,而且不需知道任何创建的细节 。 原型类 Prototype: abstract class P…

十一、2023.10.5.计算机网络(end).11

文章目录 17、说说 TCP 可靠性保证?18、简述 TCP 滑动窗口以及重传机制?19、说说滑动窗口过小怎么办?20、说说如果三次握手时候每次握手信息对方没收到会怎么样,分情况介绍?21、简述 TCP 的 TIME_WAIT,为什么需要有这个状态&…

ctfshow-web5(md5弱比较)

打开题目链接是html和php代码 html没啥有用信息,这里审一下php代码 : 要求使用get方式传入两个参数 v1,v2 ctype_alpha()函数:用于检查给定的字符串是否仅包含字母; is_numeric()函数:检测字符串是否只由…

聊聊分布式架构05——[NIO基础]BIO到NIO的演进

目录 I/O I/O模型 BIO示例 BIO与NIO比较 NIO的三大核心 NIO核心之缓冲区 Buffer常用子类: Buffer常用API Buffer中的重要概念 NIO核心之通道 FileChannel 类 FileChannel常用方法 NIO核心之选择器 概述 应用 NIO非阻塞原理分析 服务端流程 客户端…

请求的转发和重定向

RequestDispatcher接口实现转发: jsp1上链接到Servlet,Servlet再转发(关键在这里怎么实现转发??) 演示index.html页面---->Servlet1(转发到)------>Servlet2 实现转发流程 1.用HttpServletReques…

如何解决openal32.dll丢失,有什么办法解决

你第一次知道openal32.dll文件是在什么情况下,你了解过openal32.dll文件吗?如果电脑中openal32.dll丢失有什么办法可以解决,今天就教大家如何解决openal32.dll丢失,都有哪些办法可以解决openal32.dll丢失。 一.openal3…

Mac下docker安装MySQL8.0.34

学习并记录一下如何用docker部署MySQL 在Docker中搜索并下载MySQL8.0.x的最新版本 下载好后,在Images中就可以看到MySQL的镜像了 通过下面的命令也可以查看docker images启动镜像,使用下面的命令就可以启动镜像了docker run -itd --name mysql8.0.34 -…

2021年03月 Python(二级)真题解析#中国电子学会#全国青少年软件编程等级考试

Python编程(1~6级)全部真题・点这里 一、单选题(共25题,每题2分,共50分) 第1题 对于字典infor {“name”:“tom”, “age”:13, “sex”:“male”},删除"age":13键值对的操作正确的…

蓝桥杯每日一题2023.10.9

题目描述 成绩统计 - 蓝桥云课 (lanqiao.cn) 题目分析 学会使用四舍五入函数round #include<bits/stdc.h> using namespace std; int s1, s2; int main() {int n, x;cin >> n;for(int i 1; i < n; i ){cin >> x; if(x > 60)s1 ;if(x > 85)s2 ;…

【算法练习Day14】二叉树的最大深度二叉树的最小深度完全二叉树的节点个数

​&#x1f4dd;个人主页&#xff1a;Sherry的成长之路 &#x1f3e0;学习社区&#xff1a;Sherry的成长之路&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;练题 &#x1f3af;长路漫漫浩浩&#xff0c;万事皆有期待 文章目录 二叉树的最大深度二叉树的最…

19哈希表——数组中的妙用

目录 LeetCode之路——202. 快乐数 分析&#xff1a; LeetCode之路——1. 两数之和 分析&#xff1a; 解法一&#xff1a;暴力枚举 解法二&#xff1a;哈希表 LeetCode之路——202. 快乐数 编写一个算法来判断一个数 n 是不是快乐数。 「快乐数」 定义为&#xff1a; 对…

312.戳气球

将戳气球转换到添加气球&#xff0c;记忆搜索slove(i,j)&#xff1a;在开区间(i,j)全部填满气球得到的最多硬币数&#xff0c;两端val[i]、val[j] class Solution { public:vector<vector<int>> ans;vector<int> val;int slove(int left,int right){if(left&…

【Java项目推荐之黑马头条】自媒体文章实现异步上下架(使用Kafka中间件实现)

自媒体文章上下架功能完成 需求分析 流程说明 接口定义 说明接口路径/api/v1/news/down_or_up请求方式POST参数DTO响应结果ResponseResult DTO Data public class WmNewsDto {private Integer id;/*** 是否上架 0 下架 1 上架*/private Short enable;}ResponseResult 自媒…