vscode安装Prettier插件,对vue3项目进行格式化

之前vscode因为安装了Vue Language Features (Volar)插件,导致Prettier格式化失效,今天有空,又重新设置了一下

1. 插件要先安装上

在这里插入图片描述

2. 打开settings.json在这里插入图片描述

{
	"editor.defaultFormatter": "esbenp.prettier-vscode",
	"[vue]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"explorer.confirmDelete": false,
	"editor.formatOnSave": true,
	"window.zoomLevel": 1,
	"[typescript]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"editor.fontWeight": "normal",
	"create-uniapp-view.template": "vue3",
	"create-uniapp-view.name": "与文件夹同名",
	"create-uniapp-view.style": "scss",
	"editor.fontLigatures": false,
	"[json]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"files.associations": {
		"manifest.json": "jsonc",
		"pages.json": "jsonc"
	},
	"vue.updateImportsOnFileMove.enabled": true,
	"git.confirmSync": false,
	"prettier.arrowParens": "avoid",
	"prettier.bracketSameLine": true,
	"prettier.trailingComma": "none",
	"prettier.useTabs": true,
	"prettier.vueIndentScriptAndStyle": true
}

注意:因为我的vscode安装了很多其他的插件,所以settings.json里有很多其他插件的设置,请自行挑选带有“prettier”字眼的设置项复制粘贴到自己的settings.json文件中。

3. 格式化src目录下的所有文件

其实在设置完settings.json,随便打开一个文件Control+S保存已经可以在保存时格式化了,但是前段时间的文件因为Prettier失效都没有格式化,一个一个文件打开保存去格式化太麻烦了,所以就想直接格式化src目录下的所有文件。

  • 首先鼠标右键点击src目录,在src目录打开集成终端
    在这里插入图片描述

  • 运行 npx prettier --write .

  • 然后我这里报错了在这里插入图片描述

  • 错误信息给我了解决方案,运行
    sudo chown -R 501:20 "/Users/zhenzhen/.npm"

  • 运行后 npx 告诉你它需要安装 prettier@3.1.1 版本以便执行你的命令。如果你同意安装,可以输入 y 然后回车。

【注意的是,npx 安装的包是临时的,只会在当前的命令执行过程中存在,执行完毕后会被自动清除。这样就不会在你的全局环境或项目中留下多余的依赖。】

在这里插入图片描述

至此结束,src目录下的所有文件已经按照Prettier配置全部格式化。

后续:

我发现虽然在settings.json中设置了"prettier.vueIndentScriptAndStyle": true,
这个设置项是在 Prettier 格式化 Vue 文件时,使<script><style>标签下的内容进行缩进。
但我检查发现,在src目录下运行 `npx prettier --write .`后vue页面的script><style>下的内容没有缩进,
我再按command+s保存,<script><style>下的内容才会缩进。

原因:
可能是Prettier 并未读取到 VS Code 的 settings.json 中的配置。
在命令行中运行 Prettier 时,它会查找项目根目录下的 .prettierrc 配置文件,如果没有找到,它会使用默认的配置。

解决方案:
在项目根目录下创建一个名为 .prettierrc 的文件,并将 Prettier 配置复制到该文件中:

{
	"arrowParens": "avoid",
	"bracketSameLine": true,
	"trailingComma": "none",
	"useTabs": true,
	"vueIndentScriptAndStyle": true
}

然后再次在src目录下运行 npx prettier --write . 命令

再检查几个vue文件,这次是真的ok了…

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Hex2Bin转换工具文档、Bootloader 、OTA 、STM32等MCU适用

说明&#xff1a;这个工具可以将 Hex 文件 转换为 Bin 格式文件&#xff0c;软件是按自己开发 STM32 OAT 功能需求开发的一款辅助 上位机软件。 有兴趣的朋友可留言探讨。 附加功能&#xff1a; 1.另外可以生成指定大小的bin 格式文件&#xff0c;文件多余的空余位置填充随机…

GZ075 云计算应用赛题第6套

2023年全国职业院校技能大赛&#xff08;高职组&#xff09; “云计算应用”赛项赛卷6 某企业根据自身业务需求&#xff0c;实施数字化转型&#xff0c;规划和建设数字化平台&#xff0c;平台聚焦“DevOps开发运维一体化”和“数据驱动产品开发”&#xff0c;拟采用开源OpenSt…

可狱可囚的爬虫系列课程 10:在网站中寻找 API 接口

上一篇文章我们讲述了爬虫中一个比较重要的知识点&#xff0c;如何从 API 接口中获取数据&#xff0c;本篇文章我们继续讲述&#xff0c;如何在网站中寻找 API 接口&#xff0c;我们以“今日头条”网站 https://www.toutiao.com/ 为例。 如上图所示&#xff0c;如果要获取页面…

JumpServer3.0版本-账号管理

账号列表 我这里已经创建好了所以有很多,可以点击资产树列表分类查看 点击创建按钮,添加账号 资产:如果多个设备的账号密码一致可以在资产同事选中 名称:方便辨识即可 用户名:登录设备的账户名 密码:按你登录需求自行选择 添加按钮旁边还有个“模版添加” 此功能便…

Linux第3步_安装Ubuntu操作系统

创建好虚拟机后&#xff0c;就可以安装Ubuntu操作系统了。 1、双击“VMware Workstation Pro”&#xff0c;得到下面的界面。 2、点击“编辑虚拟机设置”&#xff0c;见下图&#xff1a; 3、等几秒钟&#xff0c;得到下面的界面&#xff1a; 4、点击“CD/DVD”&#xff0c;得到…

【SpringBoot】Java MVC 集成 Swagger 生成 API 文档

使用Swagger你只需要按照它的规范去定义接口及接口相关的信息,就可以做到生成接口文档,以及在线接口调试页面。官网: https://swagger.io/ Knife4j 是为Java MVC框架集成Swagger生成Api文档的增强解决方案。 <dependency><groupId>com.github.xiaoymin</groupI…

七款人体感应报警器电路图

人体感应报警器电路图&#xff08;一&#xff09; 人体发出的红外线波长在9&#xff5e;10um之间&#xff0c;属远红外线区。我们利用热释电红外传感器及信号处理集成电路&#xff0c;组装成一个人体红外线感应开关电路报警器&#xff0c;它能依靠人体发出的微量红外线进行开关…

how2heap-2.23-07-unsafe_unlink

unlink的作用 在glibc-2.23的malloc.c中搜索unlink&#xff0c;找到unlink的使用场景 _int_malloc 从恰好大小合适的largebin中获取chunk&#xff0c;发生unlink从比malloc要求大的largebin中取chunk&#xff0c;发生unlink _int_free free之后&#xff0c;与前后空闲的chunk…

认识CUDA

1 基本概念 1.1 什么是CUDA&#xff1f; CUDA(ComputeUnified Device Architecture)&#xff0c;是显卡厂商NVIDIA推出的运算平台。 CUDA是一种由NVIDIA推出的通用并行计算架构&#xff0c;该架构使GPU能够解决复杂的计算问题。 CUDA&#xff08;Compute Unified Device Arc…

copilot插件全解

COPILOT是一个基于AI的编程辅助工具&#xff0c;它可以帮助程序员自动编写代码&#xff0c;提高开发效率。COPILOT的插件主要是为了将其功能集成到不同的编程环境中&#xff0c;方便程序员使用。 目前&#xff0c;COPILOT支持多种编程环境&#xff0c;包括Visual Studio Code、…

stable diffusion 基础教程-图生图

界面 图生图大概有以下几个功能: 图生图涂鸦绘制局部绘制局部绘制(涂鸦蒙版)其常用的也就上面四个,接下来逐步讲解。 以图反推提示词 图生图可以根据反推提示词来获取相应图片的提示词,目前3种主流方式,如下: CLIP反推提示词:推导出的文本倾向于自然语言的描述方式,…

支持下载和阅读的漫画管理工具Teemii

什么是 Teemii &#xff1f; Teemii 是一款专为狂热漫画读者设计的精简 Web 应用程序。它为阅读和管理漫画集提供了一个简单而高效的平台。主要功能包括跨平台访问、浏览器内阅读、强大的元数据聚合器以及馆藏自动更新。Teemii 是专为那些寻求更加个性化和自主的方法来管理漫画…

论文管理器

论文管理器 这个论文管理器仍然存在许多漏洞。目前&#xff0c;通过按照一些例行程序操作&#xff0c;它可以正常工作。我将在有时间的时候改进代码&#xff0c;提供详细说明&#xff0c;并添加新功能。当该管理器的代码进行优化后&#xff0c;我会上传到github上。 一个建立…

C练习——定期存取并行

题目&#xff1a;假设银行一年整存零取的月息为1.875%&#xff0c;现在某人手头有一笔钱&#xff0c;他打算在今后5年 中&#xff0c;每年年底取出1000元作为孩子来年的教育金&#xff0c;到第5年孩子毕业时刚好取完这笔钱&#xff0c;请编 程计算第1年年初时他应存入银行多少钱…

接口自动化--断言

目标&#xff1a; 1、学习常见的自动化断言方法 2、把自动化断言分装和应用于接口测试 具体内容&#xff1a; 1、学习常见的自动化断言方法 第一类&#xff1a;比较大小和是否相等 而assert可以使用直接使用“”、“!”、“<”、“>”、“>”、"<"…

【数据结构】平衡二叉树

导语 对于二叉搜索树 而言&#xff0c;它的 增、 删 、 改 、 查 的时间复杂度为 O() ~ O(n) 。原因是最坏情况下&#xff0c;二叉搜索树会退化成 线性表 。换言之&#xff0c;树的高度决定了它插入、删除和查找的时间复杂度。 为了对上述缺点进一步优化&#xff0c;设计了一…

【送书活动六期】自我摸索:高质量分文章是如何优化出来的?

自从CSDN有了文章质量分后&#xff0c;大家都力争写出高分文章&#xff0c;尤其是23年年度博客之星的评选&#xff0c;入围标准之一就是文章质量分大于80&#xff0c;更驱使大家追逐高质量分的文章了&#xff0c;这里仅以个人经验&参考他人经验&#xff0c;总结一下。 目录…

.NET 8.0 本机 AOT

在软件开发领域&#xff0c;优化性能和简化效率仍然至关重要。.NET 平台二十年来不断创新&#xff0c;为开发人员提供了构建弹性且高效的软件解决方案的基础架构。 与本机 AOT&#xff08;提前&#xff09;编译相结合&#xff0c;取得了显着的进步。本文深入研究.NET Native AO…

2.HDFS 架构

目录 概述架构HDFS副本HDFS数据写入流程NN 工作原理DN 工作原理 结束 概述 官方文档快递 环境&#xff1a;hadoop 版本 3.3.6 相关文章速递 架构 HDFS HDFS 架构总结如下&#xff1a; a master/slave architecture 一主多从架构a file is split into one or more blocks a…

无法到达所选择的在线目标(博途PLC连接不上)

第1步&#xff1a;首先需要检查的就是PLC的物理连接了&#xff0c;可以利用PING工具测试下电脑和PLC是否在同一个网段&#xff0c; 第2步就是检查下防火墙设置 1、防火墙设置 2、关闭防火墙 未完....