vscode Prettier配置

常用配置项:

.prettierrc.json 是 Prettier 格式化工具的配置文件

{"printWidth": 200, // 指定行的最大长度"tabWidth": 2, // 指定缩进的空格数"useTabs": false, // 是否使用制表符进行缩进,默认为 false"singleQuote": true, // 是否使用单引号,默认为 false"quoteProps": "as-needed", // 对象属性是否使用引号,默认为 "as-needed""trailingComma": "none", // 是否使用尾随逗号(末尾的逗号),可以是 "none"、"es5"、"all" 三个选项"bracketSpacing": true, // 对象字面量中的括号是否有空格,默认为 true"jsxBracketSameLine": false, // JSX 标签的右括号是否与前一行的末尾对齐,默认为 false"arrowParens": "always", // 箭头函数参数是否使用圆括号,默认为 "always""rangeStart": 0, // 指定格式化的范围的起始位置"rangeEnd": Infinity, // 指定格式化的范围的结束位置"requirePragma": false, // 是否需要在文件顶部添加特殊的注释才能进行格式化,默认为 false"insertPragma": false, // 是否在格式化后的文件顶部插入特殊的注释,默认为 false"proseWrap": "preserve", // 是否保留 markdown 文件中的换行符,默认为 "preserve""htmlWhitespaceSensitivity": "css", // 指定 HTML 文件中空格敏感度的配置选项,可以是 "css" 或 "strict" 两个选项"vueIndentScriptAndStyle": false, // 是否缩进 Vue 文件中的 <script> 和 <style> 标签,默认为 false"endOfLine": "auto", // 指定换行符的风格,可以是 "auto"、"lf"、"crlf"、"cr" 四个选项"semi": true, // 行末是否添加分号,默认为 true"usePrettierrc": true, // 是否使用项目根目录下的 .prettierrc 文件,默认为 true"overrides": [ // 针对特定文件或文件类型的格式化配置{"files": "*.json", // 匹配的文件或文件类型"options": {"tabWidth": 4 // 针对该文件类型的配置选项}},{"files": "*.md","options": {"printWidth": 100}}]
}

Prettier 安装配置方法

在这里插入图片描述
1.安装插件,并右击选择扩展设置
在这里插入图片描述
2.在箭头指向选项处设置,配置文件路径,一般配置文件放在项目根目录下,配置就如图所示;(注意,路径有误的话,格式化工具将会不起作用)
在这里插入图片描述
3.去设置中,找到第五步指向设置项,勾选;(作用:当你保存编辑的文件时,会触发格式化插件)
在这里插入图片描述
4.完成上述后,可以在需要格式化的文件上右击,并选择"使用…格式化文档";(设置第三步后,可以不用操作这一步)
在这里插入图片描述
5.第四步完成后,出现这个弹框,选择Prettier格式化插件;
6.当页面代码布局和排版出现配置中的变化时,即格式化工具成功配置;

注意

vscode 中有默认的格式化配置属性;如何有相同的会以vscode 默认配置属性为主

例如:格式化 控制一行代码显示字数,如果格式化插件配置文件不同于vscode 的设置,那么就将会以格式化插件为主;

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

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

相关文章

华为Matebook X Pro 2022款 i7 集显(MRG-W76)原装出厂Windows11预装系统21H2

下载链接&#xff1a;https://pan.baidu.com/s/12ru9lUeQ7mWd5u1KLCM0Pg?pwdc7pi 提取码&#xff1a;c7pi 原厂系统自带指纹、面部识别、声卡、网卡、显卡等所有驱动、出厂主题壁纸、Office办公软件、华为电脑管家等预装程序&#xff0c;如图 由于时间关系,绝大部分资料没…

照亮夜晚的台灯:户外空间的闪亮之选

户外台灯是家庭和社交空间的重要元素&#xff0c;它们不仅提供照明&#xff0c;还可以为您的户外区域增添美感&#xff0c;以及创造一个温馨的社交氛围。以下是一些关于户外台灯的信息&#xff0c;以帮助您更好地了解它们的多功能性和用途。 1、照明的重要性&#xff1a;户外台…

工作中积累的对K8s的就绪和存活探针的一些认识

首先&#xff0c;我的项目是基于 Spring Boot 2.3.5 的&#xff0c;并依赖 spring-boot-starter-actuator 提供的 endpoints 来实现就绪和存活探针&#xff0c;POM 文件如下图&#xff1a; 下面&#xff0c;再让我们来看下与该项目对应的Deployment的YAML文件&#xff0c;如下…

Mac代码文本编辑器Sublime Text 4

Sublime Text 4 for Mac拥有快速响应的功能&#xff0c;可以快速加载文件和执行命令&#xff0c;并提供多种语言支持&#xff0c;包括C 、Java、Python、HTML、CSS等。此外&#xff0c;该编辑器还支持LaTeX、Markdown、JSON、XML等技术领域。 Sublime Text 4 for Mac的插件丰富…

如何分析伦敦金的价格走势预测?

伦敦金作为国际黄金市场的重要指标&#xff0c;其价格走势一直备受投资者关注。但是&#xff0c;黄金市场的价格变化受到多种因素的影响&#xff0c;因此要准确预测伦敦金的价格走势并非易事。在本文中&#xff0c;将介绍一些常用的方法和工具&#xff0c;帮助您分析伦敦金的价…

金融帝国实验室(Capitalism Lab)V10版本即将推出全新公司徽标(2023-11-13)

>〔在即将推出的V10版本中&#xff0c;我们将告别旧的公司徽标&#xff0c;采用全新光鲜亮丽、富有现代气息的设计&#xff0c;与金融帝国实验室&#xff08;Capitalism Lab&#xff09;的沉浸式体验完美互补&#xff01;〕 ————————————— >〔《公司详细信…

ubuntu20源码编译搭建SRS流媒体服务器

第一、下载源码 下载源码&#xff0c;推荐用Ubuntu20&#xff1a; git clone -b develop https://gitee.com/ossrs/srs.git第二、编译 2.1、切换到srs/trunk目录&#xff1a; cd srs/trunk2.2、执行configure脚本 ./configure2.3、执行make命令 make2.4、修改conf/rtmp.c…

Axure9 基本操作(二)

1. 文本框、文本域 文本框&#xff1a;快速实现提示文字与不同类型文字显示的效果。 2. 下拉列表、列表框 下拉列表&#xff1a;快速实现下拉框及默认显示项的效果。 3. 复选框、单选按钮 4.

Linux 本地zabbix结合内网穿透工具实现安全远程访问浏览器

前言 Zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案。能监视各种网络参数&#xff0c;保证服务器系统的安全运营&#xff1b;并提供灵活的通知机制以让系统管理员快速定位/解决存在的各种问题。 本地zabbix web管理界面限制在只能局域…

关于400G光模块的常见问题解答

最近在后台收到了很多用户咨询关于400G光模块的信息&#xff0c;那400G光模块作为当下主流的光模块类型&#xff0c;有哪些问题是备受关注的呢&#xff1f;下面来看看小易的详细解答&#xff01; 1、什么是400G QSFP-DD光模块&#xff1f; 答&#xff1a;400G光模块是指传输速…

linux下安装python3.8(有坑)

1安装包下载 ###直接官网下载linux版本&#xff0c;找到对应的包 https://www.python.org/downloads/source/2安装包解压 tar -zxvf Python-3.8.0.tgz 3编译安装 1&#xff09;设置安装目录&#xff0c;比如在此创建在 /usr/local/python3 &#xff1a; mkdir -p /usr/loca…

在windows下vs c++运行g2o的BA优化程序示例

目录 1、前言2、准备工作安装git安装vcpkg&#xff08;1&#xff09;下载&#xff08;2&#xff09;安装&#xff08;3&#xff09;集成至vs 安装cmake 3、安装g2o4、安装opencv&#xff08;1&#xff09;下载&#xff08;2&#xff09;双击安装&#xff08;3&#xff09;环境变…

Behave介绍和快速示例

Behave是一个用于行为驱动开发 (Behavior-Driven Development, BDD) 的 Python 库。使用 Behave&#xff0c;可以编写自然语言格式的使用场景来描述软件的行为&#xff0c;然后用 Python 实现这些场景下的步骤&#xff0c;形成可直接运行的测试。 Behave的目标是帮助用户、开发…

【入门Flink】- 09Flink水位线Watermark

在窗口的处理过程中&#xff0c;基于数据的时间戳&#xff0c;自定义一个“逻辑时钟”。这个时钟的时间不会自动流逝&#xff1b;它的时间进展&#xff0c;就是靠着新到数据的时间戳来推动的。 什么是水位线 用来衡量事件时间进展的标记&#xff0c;就被称作“水位线”&#x…

你不懂API接口是什么?怎么和程序员做朋友

说到开发平台就一定离不开接口&#xff0c;作为PM&#xff0c;我们不需要对接口了解的特别细。只需要知道接口是什么&#xff0c;有什么用&#xff0c;有哪些要素就行。 1. 接口是什么 (1) 硬件接口 生活中我们经常会接触接口&#xff0c;最常见的就是HDMI接口和USB接口&…

计算机毕业设计选题推荐-公共浴池微信小程序/安卓APP-项目实战

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…

我这些年对于自动化测试的理解

&#x1f4e2;专注于分享软件测试干货内容&#xff0c;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;交流讨论&#xff1a;欢迎加入我们一起学习&#xff01;&#x1f4e2;资源分享&#xff1a;耗时200小时精选的「软件测试」资…

环境配置 | Git的安装及配置[图文详情]

Git是一个开源的分布式版本控制系统&#xff0c;可以有效、高速地处理从小到大的项目版本管理。下面介绍了基础概念及详细的用图文形式介绍一下git安装过程. 目录 1.Git基础概念 2.Git的下载及安装 3.常见的git命令 Git高级技巧 Git与团队协作 1.Git基础概念 仓库&#…

沉浸式航天vr科普馆VR太空主题馆展示

科普教育从小做起&#xff0c;现在我们的很多地方小孩子游乐体验不单单只有草坪玩耍体验&#xff0c;还有很多科普知识的体验馆和游玩馆。虽然现在我们还不能真实的上太空或者潜入海底&#xff0c;但是这些现在已经可以逼真的展示在我们面前。通过一种虚拟现实技术手段。人们带…

在3+1的方向上展开结构加法4a3+4a14

4a3 4a14 - - 1 - - - - - - - - - - - - - 1 1 1 - 1 1 - 1 - - 1 - - - 要求得到的图片只能有4个点&#xff0c;并且需要最大限度的保留4a3和4a14两张图片的内在结构特征。 4个点的结构总可以认为是3个点的结构1合成的 - - 1 - - …