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了…

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

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

相关文章

基于视觉的无人机自主降落系统设计

文章目录 摘 要第一章 绪论1.1 课题开发背景1.1.1 课题的意义1.1.2 国内外发展状况 1.2 课题研究内容1.3 课题研究步骤1.4 本章小节 第二章 MatlabGUI的搭建2.1 下载安装Matlab2.2 在Matlab中搭建GUI平台2.2.1 GUI介绍2.2.2 GUI的组成2.2.3 GUI搭建步骤2.2.4 GUI的使用 2.3 mat…

stable diffusion 基础教程-提示词之艺术风格用法

展现夕阳 golden hour, (rim lighting):1.2, warm tones, sun flare, soft shadows, vibrant colors, hazy glow, painterly effect, dreamy atmosphere阴影 chiaroscuro, (high contrast):1.2, dramatic shadows, bold highlights, moody atmosphere, captivating inte…

发挥数字化潜能,提升企业效率——探索三叠云证章管理系统

企业的生命源泉在于其持续且高效的运维&#xff0c;这非常依赖于其管理工作的顺畅和精准。在现代商业环境中&#xff0c;企业用证/章管理是一个至关重要的环节。然而&#xff0c;传统的用章管理方式往往存在诸多问题&#xff0c;如繁琐的手续、低效的审批流程以及容易出现的管理…

【React系列】JSX核心语法和原理

本文来自#React系列教程&#xff1a;https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzg5MDAzNzkwNA&actiongetalbum&album_id1566025152667107329) 一. ES6 的 class 虽然目前React开发模式中更加流行hooks&#xff0c;但是依然有很多的项目依然是使用类组件&#x…

macOS跨进程通信: XPC 创建实例

一&#xff1a;简介 XPC 是 macOS 里苹果官方比较推荐和安全的的进程间通信机制。 集成流程简单&#xff0c;但是比较绕。 主要需要集成 XPC Server 这个模块&#xff0c;这个模块最终会被 apple 的根进程 launchd 管理和以独立进程的方法唤起和关闭&#xff0c; 我们主app 进…

解读IPD产品需求管理流程

在IPD体系下&#xff0c;产品投资组合管理的例行活动首先表现在对客户需求的快速响应上。这包括需求的收集、分析与决策、研发实现等端到端等业务流。需求管理本质上是一条“从客户中来到客户中去”的业务流。为了高效地协同各个部门&#xff0c;更好地管理客户需求被满足的全过…

光明源@智慧厕所技术:优化生活,提升卫生舒适度

在当今数字科技飞速发展的时代&#xff0c;我们的日常生活正在经历一场革命&#xff0c;而这场革命的其中一个前沿领域就是智慧厕所技术。这项技术不仅仅是对传统卫生间的一次升级&#xff0c;更是对我们生活品质的全方位提升。从智能感应到数据分析&#xff0c;从环保设计到舒…

太阳能组件紫外预处理试验箱

太阳能组件紫外预处理试验箱波长范围&#xff1a;280-400nm用于太阳能光伏组件的温湿度及相类似紫外预处理环境的试验&#xff0c;主要用于太阳能组件材料评估诸如聚合物和保护层等材料抗紫外辐照能力&#xff0c;在预处理试验过程中能够快速、真实地再现阳光、雨、露等环境及对…

初步认识架构分层

一般初创软件&#xff0c;为快速上线&#xff0c;几乎不考虑分层。但随业务越发复杂&#xff0c;就会导致逻辑复杂、模块相互依赖、代码扩展性差等各种问题。 架构分层迫在眉睫。 1 什么是架构分层? 软件工程中常见的设计方式&#xff0c;将整体系统拆分成N个层次&#xff0c;…

三维模型数据的几何坐标变换的点云重建并行计算技术方法分析

三维模型数据的几何坐标变换的点云重建并行计算技术方法分析 倾斜摄影三维模型数据的几何坐标变换与点云重建并行计算技术的探讨主要涉及以下几个方面&#xff1a; 1、坐标系定义与转换&#xff1a;在进行坐标变换前&#xff0c;需要确定各个参考系的定义并实现坐标系之间的转…

dubbo使用的三种配置

一. 准备注册中心 dubbo的注册中心在生产环境中&#xff0c;一般都会选择 ZooKeeper 下载 ZooKeeper ZooKeeper_3.4.14下载地址启动ZK # 解压安装包 tar -zxvf zookeeper-3.4.14.tar.gz# 进入安装目录&#xff0c; cp conf/zoo_sample.cfg conf/zoo.cfg# 启动ZK ./bin/zkServ…

(湖科大教书匠)计算机网络微课堂(下)

第四章、网络层 网络层概述 网络层主要任务是实习网络互连&#xff0c;进而实现数据包在各网络之间的传输 因特网使用TCP/IP协议栈 由于TCP/IP协议栈的网络层使用网际协议IP&#xff0c;是整个协议栈的核心协议&#xff0c;因此TCP/IP协议栈的网络层常称为网际层 网络层提供…