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

最新推荐文章于 2024-07-24 00:24:43 发布
最新推荐文章于 2024-07-24 00:24:43 发布
阅读量5.2k 收藏 8
点赞数 2
分类专栏： 计算机科学与技术 Linux/ubuntu 文章标签： xacro xml prettier vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Netceor/article/details/118905982
版权

一、插件安装

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

 二、使用

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

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

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

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

三、示例

观察代码的前后对比

  • 格式化前

  •  格式化后

 

参考博客

vscode如何自动格式化代码？

vscode中prettier如何使用

Netceor
关注
专栏目录
VSCode与Prettier代码格式化工具的使用
彭世瑜的博客
07-16 1573
Prettier同时可以在浏览器中使用。格式化代码文件输出到命令行。也可以使用目录中的配置文件。格式化文件并覆盖现有文件。VS Code中安装插件。
vscode入门之安装eslint，prettier,vetur，多行编辑等基本快捷键
qq_35125764的博客
09-14 1625
eslint插件安裝 左侧Extensions中下载eslint插件 npm全局下载eslint, 并进行初始化 安裝和执行 npm install eslint -g eslint --init 打开 file -> preferences -> settings 搜索eslint 找到里面的Eslint Options 点击 Edit in settings.json, "eslint.validate": [ "javascript", "javascrip
VScode常用快捷键在这里！！！
最新发布
qq_50260510的博客
07-24 7073
本期介绍了VScode常用快捷键，块垒看看吧~
vscode代码代码格式化插件 - Prettier - Code formatter
CodeAllen嵌入式
01-22 1414
官网地址。
prettier
besttoby01的博客
09-21 1715
保存一套prettier规则 { // 使能每一种语言默认格式化规则 "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[less]": { "editor.defaultFormatter":
vscode prettier配置_vscode快捷键+配置+插件+软件
weixin_39607473的博客
11-21 1162
记录下自己的开发环境(1) 快捷键Ctrl + p 搜索并跳转文件Ctrl + f 文件内搜索Ctrl + j 开关终端Ctrl + d 选中光标内单词Ctrl + shift + p 打开vscode命令栏F12 转到定义Ctrl + w 作用域内折叠 (需修改vscode按键绑定)Ctrl + q 作用域内展开 (需修改vscode按键绑定)(2) 配置 vscode 基础设置 // set...
Prettier 插件 使用
https://github.com/lisy999?tab=repositories
02-15 956
确保你已经在 Visual Studio Code 中安装了 Prettier 插件。你可以在左侧的侧边栏中点击 "Extensions" 图标，然后在搜索栏中输入 "Prettier - Code formatter"，点击安装按钮进行安装。通过以上步骤，你就可以在 Visual Studio Code 中配置，在按下 Ctrl + S 时自动使用 Prettier 插件格式化代码了。在搜索结果中，找到 "Editor: Format On Save" 选项，并确保其为勾选状态。
vscode 使用Prettier插件格式化配置使用代码详解
10-14
在VSCode中使用Prettier插件可以实现代码的自动格式化，节省开发者的格式化代码时间，提高工作效率。安装Prettier插件后，开发者可以通过简单的配置来定义自己的代码格式化规则。 首先，要在VSCode中安装Prettier...
prettier自动格式化去换行的实现代码
10-14
总的来说，通过创建`.prettierrc`配置文件，调整VSCode的`settings.json`，以及正确配置相关扩展，你可以实现Prettier自动格式化去换行的功能，从而提升代码质量和开发效率。记得根据你的项目需求和团队规范进行适当...
vscode里利用prettier插件实现ant-design-pro架构代码的格式化
埃尔斯的博客
05-13 7076
这里写自定义目录标题欢迎使用Markdown编辑器一、给vscode编辑器安装prettier插件。二、配置IDE编辑器的配置。 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 一、给vscode编辑器安装prettier插件。 打开IDE...
VScode使用Prettier格式化代码
扛麻袋的少年的博客
04-01 3493
vscode使用prettier进行格式化
prettier, 漂亮的是一个固执的代码格式化程序.zip
10-09
prettier, 漂亮的是一个固执的代码格式化程序 的代码格式化程序JavaScript Flow Flow TypeScript TypeScript CSS SCSS · LESS 。JSON 。JSON 。JSON 。Markdown 。你喜欢的语言。？
js 格式化prettier配置_使Prettier一键格式化WXSS
weixin_35286433的博客
12-23 461
原标题：使Prettier一键格式化WXSS作者：越前君来源：SegmentFault 思否社区今天看到了 Prettier Configuration Overrides 配置项，于是乎，发现：使用 Gulp.js 处理 wxss 文件反而是多此一举了；同时很好地解决了下集关于使用 lint-staged 仅处理暂存文件的问题。前言其实使用 Gulp.js 来处理的方式并非完全不可取，起码提供了...
vscode自动格式化插件配置说明（Prettier - Code formatter）
热门推荐
A Lucky Boy的博客
07-03 3万+
1、在应用商店搜索Prettier并下载2、下载完成之后点击扩展设置 3、点击右上角json配置文件 4、在文件中添加如下代码
【vscode代码格式化】Prettier - Code formatter插件实现
你，若盛开的专栏
03-10 2万+
1、安装扩展 Prettier - Code formatter 2、希望实现vue的格式化可以额外添加插件 vetur 3、在配置文件中加入如下代码，可以实现用户保存代码时即格式化 具体规则可以根据代码风格自行更改， 官方配置文档地址：https://prettier.io/docs/en/configuration.html // tab 大小为2个空格 "editor.tab...
VS Code插件和快捷键
rocktanga的博客
02-14 965
vs code已经不需要打印调试，而可以使用终端工具，在vs code中进行调试，vscode中调试也不好，还是要用chrome dev tool去调试 VS Code 配置 vscode的配置分为两部分 全局配置(用户配置) 和 局部配置(工作空间配置，仅针对单个project) 全局配置: User Settings是全局配置，应用到打开的任何一个VS Code实例。 在Windows环境中，打开 File > Preferences > Settings ，可以看到VS Co..
在NuxtJS项目中使用.prettierrc工具格式化代码
Vinca@的博客
03-25 571
然后对app.vue进行保存操作就自动格式化了。json文件不可使用注释 ，如// ， /**/ ， #。在vscode拓展找到Prettier-Code formatter插件，并对它进行安装。3、选择：Prettier - Code formatter。1、快捷键： ctrl + shif + p。在vscode中输入一下命令进行安装。2、输入 format on save。代码格式化配置 、代码格式化忽略。对文件夹和文件做了忽略格式化操作。2、选择使用...格式化文档。在语句末尾打印分号。
prettier 格式化工具
寒小跳
06-30 390
代码格式化工具，前端项目代码格式化，VSCode插件，Prettier 格式化插件，代码规范
vscode的Prettier 插件如何配置
06-12
你可以按照以下步骤在 Visual Studio Code 的用户设置中配置 Prettier 插件： 1. 打开 Visual Studio Code 并打开用户设置（使用快捷键 Ctrl+, 或者点击菜单栏中的“文件”->“首选项”->“设置”）； 2. 在搜索框中输入“Prettier”，然后找到“Prettier: Options”； 3. 点击“编辑 in settings.json”； 4. 在 settings.json 文件中添加你想要配置的 Prettier 选项，例如： ```json "prettier.printWidth": 120, "prettier.tabWidth": 4, "prettier.useTabs": false, "prettier.singleQuote": true, "prettier.trailingComma": "es5", "prettier.bracketSpacing": true, "prettier.jsxBracketSameLine": false ``` 这些选项包括代码行宽度、缩进宽度、是否使用 Tab 缩进、是否使用单引号、是否在对象字面量的末尾添加逗号等。 5. 保存 settings.json 文件。 完成上述步骤后，Prettier 插件将使用你在用户设置中配置的选项格式化代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值