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

news2025/5/28 3:02:13

之前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配置全部格式化。

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

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

相关文章

Springcloud 微服务实战笔记 Feign

优点 基于Netflix Feign实现&#xff0c;整合了Spring cloud Ribbon 和 Spring cloud Hystrix 提供了声明式的WEB服务客户端定义方式 扩展了Spring MVC的注解支持 使用 1、pom导入包&#xff1a; <dependency><groupId>org.springframework.cloud</groupId…

系统崩溃无U盘重装Win10系统的方法

用户反映自己电脑上的操作系统出现了崩溃问题&#xff0c;无法通过简单的操作解决问题&#xff0c;想重新安装正常的操作系统&#xff0c;但是没有U盘不知道要怎么操作才能安装好系统&#xff1f;接下来小编带来系统崩溃无U盘重装Win10系统的方法步骤介绍&#xff0c;用户们可以…

Spring Boot 完善订单【五】集成接入支付宝沙箱支付

1.1.什么是沙箱支付 支付宝沙箱支付&#xff08;Alipay Sandbox Payment&#xff09;是支付宝提供的一个模拟支付环境&#xff0c;用于开发和测试支付宝支付功能的开发者工具。在真实的支付宝环境中进行支付开发和测试可能涉及真实资金和真实用户账户&#xff0c;而沙箱环境则提…

7. Mybatis 代码反向生成器(MBG)

一、插件的使用 描述: mybatis generator 的作用是根据数据库自动生成 实体类、Dao接口、Mapper 映射文件。 数据库&#xff1a; create table product( id int primary key AUTO_INCREMENT, pname varchar(20), price double, category_id varchar(32) ); INSERT INTO produ…

B样条曲线

零次 B 样条 F i &#xff0c; 0 ( t ) { 1 t i ≤ t < t i 1 0 o t h e r s \bm{F}_{i&#xff0c;0}(t) \begin{cases} 1 & t_i \leq t <t_{i1} \\ 0 & others \end{cases} Fi&#xff0c;0​(t){10​ti​≤t<ti1​others​ 2. 一次 B 样条&#xff0c;…

node加速镜像源 管理工具nrm安装使用

我们在开发node.js的时候,经常会遇到某些包无法下载, 或者下载太慢, 还有需要加载我们自己是有源中的包的问题, 今天推荐给大家的这款 nrm 镜像源管理工具就是解决这类问题的. 安装 方法也很简单, 执行 npm install nrm -g 就可以安装 # 安装nrm npm install nrm -g# 添加…

LN和BN

假设batch为2&#xff0c;&#xff08;2&#xff0c;3&#xff0c;256&#xff0c;256&#xff09;这样的样本 LN比较直观就是在每个独立的样本上计算均值和方差&#xff0c;然后归一化。&#xff08;2&#xff0c;3&#xff0c;256&#xff0c;256&#xff09; 归一化是将数…

14:00面试,14:06就出来了,问的问题真的变态。。。

从小厂出来&#xff0c;没想到在另一家公司又寄了。 到这家公司开始上班&#xff0c;加班是每天必不可少的&#xff0c;看在钱给的比较多的份上&#xff0c;就不太计较了。没想到5月一纸通知&#xff0c;所有人不准加班&#xff0c;加班费不仅没有了&#xff0c;薪资还要降40%…

mac远程ssh免密登录

服务器部署经常会登录到远程服务&#xff0c;为方便操作&#xff0c;提高效率对运维人员来说设置免密登录还是很有必要的。其实也是很简单&#xff0c;安以下操作步骤即可。 1、进入到&#xff5e;/.ssh目录下&#xff0c;确认已经生成有公钥与私钥。如果没有请执行发下命令 …

Jetson Xavier NX安装pytorch环境《最全、简洁》

有段时间没有写嵌入式领域相关的文章了&#xff0c;近期也在学习和做嵌入式领域的相关作业&#xff0c;学习了一段时间的Jetson Xavier NX开发套件&#xff0c;总结了Jetson Xavier NX如何安装pytorch环境。文章分类在嵌入式学习&#xff1a; 嵌入式学习 ---《Jetson Xavier NX…

鸿蒙南向开发—OpenHarmony技术编译构建框架

概述 OpenHarmony编译子系统是以GN和Ninja构建为基座&#xff0c;对构建和配置粒度进行部件化抽象、对内建模块进行功能增强、对业务模块进行功能扩展的系统&#xff0c;该系统提供以下基本功能&#xff1a; 以部件为最小粒度拼装产品和独立编译。支持轻量、小型、标准三种系…

功能介绍 | 探秘Goby功能世界:点击URL,即刻畅享快速调起之旅!

​​0x01 前言 ​我们从只会点鼠标的猴子到CtrlC,CtrlV来回切换的工具人&#xff0c;但有时候遇到大量需要复制的url界面&#xff0c;真的希望能有一个可以一键整理、一键扫描URL的功能来拯救&#xff01; 好消息是&#xff0c;Goby从客户端版本2.8.6起&#xff0c;官方引入了…

5G阅信助力互联网行业:XX出行-出票通知,案例分析

XX出行日常有大量业务通知短信下发&#xff0c;用户触达频次和用户打开率都比较高&#xff0c;但原短信无法带来附加营销增值&#xff0c;通过阅信增值服务消息将两者结合起来&#xff0c;可实现业务的多渠道引流&#xff0c;开拓了新的渠道和方式。 项目概述&#xff1a; 1. 项…

均匀与准均匀 B样条算法

B 样条曲线的定义 p ( t ) ∑ i 0 n P i F i , k ( t ) p(t) \sum_{i0}{n} P_i F_{i, k}(t) p(t)i0∑​nPi​Fi,k​(t) 方程中 n 1 n1 n1 个控制点&#xff0c; P i P_i Pi​, i 0 , 1 , ⋯ n i0, 1, \cdots n i0,1,⋯n 要用到 n 1 n1 n1 个 k k k 次 B 样条基函数 …

Unity中URP下统一不同平台下的z值

文章目录 前言一、ComputeFogFactor 来计算雾效混合因子二、UNITY_Z_0_FAR_FROM_CLIPSPACE 来统一计算不同平台下的Z值1、DirectX平台2、GL平台下&#xff08;在Unity.2022.LTS下&#xff0c;该功能没有完善)3、Opengl下 前言 在之前的文章中&#xff0c;我们实现了URP下的雾效…

企业培训系统开发:构建灵活高效的学习平台

企业培训系统的开发在当今数字化时代是至关重要的。本文将介绍一些关键技术和代码示例&#xff0c;以帮助您构建一个灵活、高效的企业培训系统。 1. 技术选型 在开始企业培训系统的开发之前&#xff0c;首先需要选择合适的技术栈。以下是一个基本的技术选型示例&#xff1a;…

【mars3d】FixedRoute的circle没有跟polyline贴着模型的解决方案

问题&#xff1a;【mars3d】官网的贴模型示例中&#xff0c;参考api文档增加了circle的配置&#xff0c;但是FixedRoute的circle没有跟polyline贴着模型 circle: { radius: 10, materialType: mars3d.MaterialType.CircleWave, materialOptions: { color: "#ffff00"…

柱面,盘片,盘面,扇面,磁头,磁道,扇区,CHS地址,LAB地址

柱面&#xff0c;盘片&#xff0c;盘面&#xff0c;扇面&#xff0c;磁头&#xff0c;磁道&#xff0c;扇区&#xff0c;CHS地址&#xff0c;LAB地址1 CHS地址 CHS地址指的是柱面&#xff08;Cylinder&#xff09;、磁头&#xff08;Head&#xff09;、扇区&#xff08;Secto…

新年话节能 电梯也减排

小伍恭祝大家2024年元旦快乐&#xff01;&#xff01; 目前&#xff0c;电梯的节能已经得到业界的广泛重视&#xff0c;积极推动相关的节能技术的实施&#xff0c;努力宣传和倡导规范的电梯的使用行为&#xff0c;将极大地改变我国电梯的耗能状况&#xff0c;为节能减排做出较大…

Linux进程管理和计划任务

前言 上篇关于进程管理命令使用说明尚未完结&#xff0c;本篇将继续介绍相关命令以及计划任务管理。 目录 前言 一、控制进程 1. vmstat 2. free 3. iostat 4. iotop/iftop 5. uptime 6. mpstat 7. dstat 8. webadin 9. 服务器五大性能 二、进程管理 1. 手动…