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.mzph.cn/news/599630.shtml

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

相关文章

【物联网】手把手完整实现STM32+ESP8266+MQTT+阿里云+APP应用——第3节-云产品流转配置

&#x1f31f;博主领域&#xff1a;嵌入式领域&人工智能&软件开发 本节目标&#xff1a;本节目标是进行云产品流转配置为后面实际的手机APP的接入做铺垫。云产品流转配置的目的是为了后面能够让后面实际做出来的手机APP可以控制STM32/MCU&#xff0c;STM32/MCU可以将数…

前缀和算法模板

一维前缀和 算法用途&#xff1a;快速求出数组中某一连续区间的和 一维前缀和算法模板 1、预处理出一个 dp 数组 要求原数组存储在 n 1 的空间大小中&#xff0c;其中后 n 个空间存数据。 dp数组&#xff0c;数组开 n 1个空间&#xff0c;dp[i] 表示 [ 1, i ] 区间内所有…

抖店如何高效率起店?从0到1的起店思路和心得,分享如下!

我是王路飞。 万事开头难&#xff0c;我为什么一直强调让新手商家先入门&#xff0c;把流程跑通呢&#xff1f; 就好像我们上学时候考试&#xff0c;都知道100分很难&#xff0c;那我们就先从60分开始好了&#xff0c;有了考60分的基础&#xff0c;你就知道你跟100分的差距在…

【Android】自定义View组件,并实现在 Compose、Kotlin、Xml 中调用

从事 Android 开发以来&#xff0c;很少有过自定义 View 的相关开发需求&#xff0c;大部分 UI 都是可以集成某些官方组件&#xff0c;在组件的基础上完成能够大大缩短开发时间。但今天我要讲的是&#xff1a;如何使用 Android 开发一个Compose、Xml都可以调用的组件&#xff1…

JavaScript异常处理详解

​​​​​​​一、异常的捕获 1.1 基本的try…catch语句 ES3开始引入了 try-catch 语句&#xff0c;是 JavaScript 中处理异常的标准方式。 语法&#xff1a; try{ //可能发生异常的代码 }catch(error){ //发生错误执行的代码 } 看下面的代码&#xff1a; <script>tr…

记一次canal除坑记录

记一次canal除坑记录 错误信息 Caused by :com.alibaba.otter.canal.parse.exception.CanalParseException: column size is not match for table 问题处理 今天对Canal相关程序进行升级&#xff0c;原监听的表及业务都正常&#xff1b;遇到新增加的表时总是不走&#xff1b;…

202402读书笔记|《当你老了》——灰蒙曙光比爱情温柔,清晨露珠比希望更可爱

202402读书笔记|《当你老了》——灰蒙曙光比爱情温柔&#xff0c;清晨露珠比希望更可爱 《当你老了》作者叶芝&#xff0c;断断续续碎片时间读完的一本书&#xff0c;不是很惊艳&#xff0c;但值得一读。就因为很喜欢当你老了&#xff0c;所以拾起的这本书。读完知道了原来叶芝…

什么是软件安全性测试?如何进行安全测试?

一、什么是软件安全性测试&#xff1f; 软件安全性测试是指对软件系统中的安全漏洞进行检测和评估的过程。其目的是为了确保软件系统在面对各种安全威胁时能够保持其功能的完整性、可用性和机密性。 二、软件安全性测试可以通过以下几个步骤来进行&#xff1a; 1. 需求分析&a…

51单片机四位数码管计算器 Proteus仿真程序

目录 概要 仿真图 部分代码 资料下载地址&#xff1a;51单片机四位数码管计算器 Proteus仿真程序 概要 1.系统通过4x4的矩阵键盘输入数字及运算符。 2.可以进行4位十进制数以内的加法运算&#xff0c;如果计算结果超过4位十进制数&#xff0c;则屏幕显示E 3.可以进行加法以外…

LowB三人组(冒泡排序,插入排序,选择排序)(数据结构课设篇1,python版)(排序综合)

本章博客主要详细讲解一下LowB三人组排序&#xff0c;为什么叫LowB三人组呢&#xff1f;因为他们的时间复杂度都为O&#xff08;n^2&#xff09;。下篇博客会再讲解NB三人组&#xff08;堆排序&#xff0c;归并排序和快速排序&#xff09;&#xff0c;第三篇博客会讲解其他排序…

算法每日一题:队列中可以看到的人数 | 单调栈

大家好&#xff0c;我是星恒 今天是一道困难题&#xff0c;他的题解比较好理解&#xff0c;但是不好想出来&#xff0c;接下来就让我带大家来捋一捋这道题的思路&#xff0c;以及他有什么特征 题目&#xff1a;leetcode 1944有 n 个人排成一个队列&#xff0c;从左到右 编号为 …

Spring国际化的应用及原理详解

1. 简介 Spring国际化&#xff08;Spring Internationalization&#xff0c;简称i18n&#xff09;是Spring框架提供的一种机制&#xff0c;用于支持多语言的应用程序。它使得开发者能够轻松地在应用程序中实现不同语言的支持&#xff0c;从而满足全球化的需求。通过Spring国际…

面试必问究极重点之HashMap的底层原理

1.底层数据结构 JDK版本不同的数据结构 1.7 数组 链表 1.8 数组 &#xff08;链表 | 红黑树&#xff09; 2.添加数据put 在添加一个值的时候&#xff0c;首先会计算他的hash码&#xff0c;然后进行二次hash&#xff0c;在对当前长度取模得到在底层数组中的索引位置当取模完…

electron——查看electron的版本(代码片段)

electron——查看electron的版本(代码片段)1.使用命令行&#xff1a; npm ls electron 操作如下&#xff1a; 2.在软件内使用代码&#xff0c;如下&#xff1a; console.log(process) console.log(process.versions.electron) process 里包含很多信息&#xff1a; process详…

【Linux】——基本指令(二)

&#x1f497;个人主页&#x1f497; ⭐个人专栏——数据结构学习⭐ &#x1f4ab;点击关注&#x1f929;一起学习C语言&#x1f4af;&#x1f4ab; 目录 导读&#xff1a;1. vim 指令2. head指令3. tail指令4. tree指令5. 输出重定向6. echo指令7. wc指令8. | 字符9. date指令…

PCIe 6.0生态业内进展分析总结

上一篇&#xff0c;我们针对PCIe 6.0的功能更新与实现挑战做了简单的分析与总结。更多详细内容可以参考&#xff1a; 扩展阅读&#xff1a;浅析PCIe 6.0功能更新与实现的挑战 那么&#xff0c;PCIe 6.0已经发布了一段时间了&#xff0c;业内硬件支持PCIe 6.0目前有哪些进展呢…

面试算法93:最长斐波那契数列

题目 输入一个没有重复数字的单调递增的数组&#xff0c;数组中至少有3个数字&#xff0c;请问数组中最长的斐波那契数列的长度是多少&#xff1f;例如&#xff0c;如果输入的数组是[1&#xff0c;2&#xff0c;3&#xff0c;4&#xff0c;5&#xff0c;6&#xff0c;7&#x…

外包干了5个月,技术明显退步了...

先说一下自己的情况&#xff0c;本科生&#xff0c;19年通过校招进入湖南某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年12月份&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测…

周鸿祎分享大模型十大趋势:2024将出现杀手级应用

1月5日&#xff0c;“2023年风马牛年终秀”上&#xff0c;三六零&#xff08;601360.SH&#xff0c;下称“360”&#xff09;集团创始人周鸿祎分享了对2024年大模型发展趋势的十大预测&#xff0c;呼吁企业树立AI信仰&#xff0c;All in AI。他认为&#xff0c;创新才能破局&am…

ctfshow——信息搜集

文章目录 web 1web 2web 3web 4web 5web 6web 7web 8web 9web 10web 11web 12web 13web 14web 15web 16web 17web 18web 19web 20 web 1 题目提示开发注释未及时删除。 直接右键查看源代码。 web 2 在这关我们会发现&#xff1a;1&#xff09;无法使用右键查看源代码&…