VSCODE利用prettier插件实现快捷格式化代码

最新推荐文章于 2025-11-04 21:27:51 发布
原创 最新推荐文章于 2025-11-04 21:27:51 发布 · 7.5k 阅读 · 11 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#xacro #xml #prettier #vscode

本文介绍了如何在VSCode中安装并使用Prettier插件进行代码格式化，包括全局和选区格式化快捷键，以及前后代码样例对比，适合提升代码风格一致性。

一、插件安装

在左侧扩展界面搜索 “ Prettier -Code formatter ” 并安装【我已经安装好就没有安装按钮了】

 二、使用

快捷键Ctrl + Shift + P，上方出现命令框，搜索 “ format ” ，下面出现两种选择

  • Format Document 对整个文档做格式化
  • Format Selection 对选择代码做格式化

也可以直接看对应快捷键，便捷下次使用

 【这里可能会提示XX插件未安装，无法格式化，安装一下即可，例如我提示未安装xml】

三、示例

观察代码的前后对比

  • 格式化前

  •  格式化后

 

参考博客

vscode如何自动格式化代码？

vscode中prettier如何使用

VSCode与Prettier代码格式化工具的使用
彭世瑜的博客
07-16 3269
Prettier同时可以在浏览器中使用。格式化代码文件输出到命令行。也可以使用目录中的配置文件。格式化文件并覆盖现有文件。VS Code中安装插件。
Prettier - Code formatter插件使用（前端美化插件）
weixin_46253800的博客
11-13 1867
把.prettierrc放到项目里面，而且要注意，如果你放入项目里面，你有一个js文件的层级比.prettierrc层级高，它是不生效的，所以要放到项目的根目录里面。在你的项目目录里面创建一个叫.prettierrc的文件，注意！：在符合 ES5 标准的结构中添加逗号，比如对象和数组。它有"none" ， "es5" ，"all"这些值（*）值有"lf" ， "crlf" ， "cr" ，"auto"：在所有多行结构的最后一项后面都加逗号，包括函数参数。- 多行结构中是否在末尾添加逗号。
Vs code常用插件以及快捷键
BeefpasteC的博客
10-17 609
Vs code 常用插件 及其 快捷键
如何在VSCode中设置ESLint和Prettier的快捷键？
最新发布
2501_93041227的博客
11-04 242
在代码文件中按下设置的快捷键，确认Prettier能正确格式化代码，ESLint能自动修复问题或输出检查结果。确保VSCode已安装ESLint和Prettier插件，可通过扩展市场搜索并安装。打开VSCode快捷键设置（
VS Code配合Prettier自动格式化代码
分享技术，分享经验
04-10 6287
每次修改 .prettierrc.cjs 配置文件后，如果发现保存代码时格式化没有生效，可能是 VS Code 插件缓存未及时刷新。建议此时重启 VS Code，确保新的配置被正确加载并生效。
使用prettier插件统一代码风格
baidu_41564215的博客
08-08 848
文件，配置代码的格式化风格。用户设置（JSON）3、项目根目录下创建。
vscode代码代码格式化插件 - Prettier - Code formatter
CodeAllen嵌入式
01-22 2614
官网地址。
prettier
besttoby01的博客
09-21 1937
保存一套prettier规则 { // 使能每一种语言默认格式化规则 "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[less]": { "editor.defaultFormatter":
vscode 使用Prettier插件格式化配置使用代码详解
10-14
在VSCode中使用Prettier插件可以实现代码的自动格式化，节省开发者的格式化代码时间，提高工作效率。安装Prettier插件后，开发者可以通过简单的配置来定义自己的代码格式化规则。 首先，要在VSCode中安装Prettier...
prettier自动格式化去换行的实现代码
10-14
总的来说，通过创建`.prettierrc`配置文件，调整VSCode的`settings.json`，以及正确配置相关扩展，你可以实现Prettier自动格式化去换行的功能，从而提升代码质量和开发效率。记得根据你的项目需求和团队规范进行适当...
vscode prettier配置_vscode快捷键+配置+插件+软件
weixin_39607473的博客
11-21 1303
记录下自己的开发环境(1) 快捷键Ctrl + p 搜索并跳转文件Ctrl + f 文件内搜索Ctrl + j 开关终端Ctrl + d 选中光标内单词Ctrl + shift + p 打开vscode命令栏F12 转到定义Ctrl + w 作用域内折叠 (需修改vscode按键绑定)Ctrl + q 作用域内展开 (需修改vscode按键绑定)(2) 配置 vscode 基础设置 // set...
prettier, 漂亮的是一个固执的代码格式化程序.zip
10-09
prettier, 漂亮的是一个固执的代码格式化程序 的代码格式化程序JavaScript Flow Flow TypeScript TypeScript CSS SCSS · LESS 。JSON 。JSON 。JSON 。Markdown 。你喜欢的语言。？
Prettier 插件 使用
1234
02-15 2676
确保你已经在 Visual Studio Code 中安装了 Prettier 插件。你可以在左侧的侧边栏中点击 "Extensions" 图标，然后在搜索栏中输入 "Prettier - Code formatter"，点击安装按钮进行安装。通过以上步骤，你就可以在 Visual Studio Code 中配置，在按下 Ctrl + S 时自动使用 Prettier 插件格式化代码了。在搜索结果中，找到 "Editor: Format On Save" 选项，并确保其为勾选状态。
vsCode格式化代码的快捷方式
aaaa_aaab的博客
11-15 1783
开发过程中经常遇到代码杂乱的情况，每次手动排列都需要浪费大量时间，如果能配置自动整理代码既能让代码赏心悦目也就不用再浪费排列的时间这是我原来混乱的页面按快捷键shift alt f 格式化后的代码。
VScode使用Prettier格式化代码
扛麻袋的少年的博客
04-01 7937
vscode使用prettier进行格式化
js 格式化prettier配置_使Prettier一键格式化WXSS
weixin_35286433的博客
12-23 521
原标题：使Prettier一键格式化WXSS作者：越前君来源：SegmentFault 思否社区今天看到了 Prettier Configuration Overrides 配置项，于是乎，发现：使用 Gulp.js 处理 wxss 文件反而是多此一举了；同时很好地解决了下集关于使用 lint-staged 仅处理暂存文件的问题。前言其实使用 Gulp.js 来处理的方式并非完全不可取，起码提供了...
VSCode下Prettier - Code formatter插件的设置
热门推荐
幸运小男神的博客
03-13 3万+
一、安装vscode扩展程序 ESLint Prettier - Code formatter Vetur 二、打开settings文件 快捷键： mac：Command + ， Windows：Ctrl + , 此时打开settings视图界面，点击右上角图标（鼠标悬上去显示“Open Settings(UI)”字样），打开settings.json文件（本人...
代码格式化插件prettier在vscode中的使用
qq_44949985的博客
05-01 2047
如果prettier没有正常工作，可能是由于其需要配置文件（配置文件说明了，怎么进行代码的格式化，保存了格式化的规则），你如果没有个性化的需求可以把settings.json中的相关参数修改为false。当你使用ctrl+s保存文件时，你选择的格式化插件就会格式化你的代码。你在工作区配置，那么他只在你这个文件夹下生效；你在用户下面配置，那么所有的文件夹下都会生效。如有问题，欢迎留言讨论。
配置Prettier与VSCode实现自动格式化代码
本文主要介绍了如何使用Prettier插件实现自动格式化代码，并去除不必要的换行。在项目根目录创建`.prettierrc`配置文件，设置代码风格，包括超过特定长度的行自动换行、使用单引号以及不使用行尾分号。同时，配置...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值