vscode 设置保存时使用Prettier自动格式化

已于 2024-09-24 22:29:01 修改
阅读量4.3k 收藏 7
点赞数 8
分类专栏： vscode 文章标签： vscode
于 2024-02-03 11:28:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42912449/article/details/136005812
版权

安装Prettier

在这里插入图片描述

设置vscode

  1. 配置 Prettier 为默认格式化工具
  • 点击 文件 -> 首选项 -> 设置
  • 输入搜索 Default Formatter， 选择 Prettier
    在这里插入图片描述
  1. 设置保存时自动格式化
  • 点击 文件 -> 首选项 -> 设置
  • 输入搜索 format on save， 选中复选框
    在这里插入图片描述
小技巧——vscode 保存代码后自动格式化
qq_43201350的博客
10-26 2785
1、打开vscdoe中的设置 2、在搜索框中输入Format On Save 3、把这个勾打上就可以保存后自动格式化了
vscode 使用Prettier插件格式化配置使用代码详解
10-14
在VSCode中使用Prettier插件可以实现代码的自动格式化，节省开发者的格式化代码时间，提高工作效率。安装Prettier插件后，开发者可以通过简单的配置来定义自己的代码格式化规则。 首先，要在VSCode中安装Prettier...
在vscode中如何实现每次保持代码的时候自动执行Prettier来格式化代码
m0_65354547的博客
01-10 1067
通过以上步骤,每次你保存代码时,VSCode 就会自动使用 Prettier 来格式化你的代码。这样可以确保你的代码始终保持一致的格式,提高代码的可读性和维护性。如果你的项目使用 ESLint,可能会出现与 Prettier 的格式化规则冲突的情况。首先,确保你已经在 VSCode 中安装了 Prettier 扩展。这些设置会启用保存时格式化,并将 Prettier 设置为默认格式化工具。如果你想为特定项目配置不同的格式化规则,可以在项目根目录创建一个。文件,并在其中定义你的格式化规则。
VS Code配合Prettier自动格式化代码
最新发布
分享技术，分享经验
04-10 2103
每次修改 .prettierrc.cjs 配置文件后，如果发现保存代码时格式化没有生效，可能是 VS Code 插件缓存未及时刷新。建议此时重启 VS Code，确保新的配置被正确加载并生效。
vscode根据prettier设置的格式 保存自动格式化
uniquepeng的博客
05-15 2316
第四步安装prettier依赖，根目录下新建.prettierrc.cjs文件，文件中配置格式，根目录下新建.prettierignore文件配置忽略格式化的文件。也可以再settings.json中配置"editor.defaultFormatter": "esbenp.prettier-vscode"。第二步设置默认格式 文件-首选项-设置-搜索default format-选择Prettier - Code formatter。4.安装prettier依赖，配置格式。
Visual Studio Code (VSCode)为当前项目设置保存时自动格式化
huang_hai_an的博客
01-13 2733
在 Visual Studio Code (VSCode) 中，你可以为单个项目设置特定的配置，而不会影响全局设置。这可以通过创建项目级别的设置文件来实现。以下是具体步骤：打开命令面板：选择工作区设置：添加保存时格式化的设置： 请注意，上述配置中的 是 Prettier VSCode 插件的标识符。你需要确保已经安装了这个插件；不过，如前所述，这并不是项目的依赖，而是编辑器的扩展。针对不同语言自定义格式化工具：保存文件：通过这种方式，你可以在不改变全局设置的情况下，只为当前项目启用保存时自动格式化的功能。
Vscode 保存代码，代码自动格式化
Liberal_w的博客
07-04 2038
vscode 代码自动格式化
vscode保存代码自动格式化
一个UI、前端爱好者。
07-23 4485
在 Visual Studio Code (VS Code) 中，你可以配置自动保存时自动格式化代码。这可以通过安装合适的扩展（如 Prettier 或 ESLint）和配置设置来实现。
vscode 代码格式，并设置保存时自动格式化代码
热门推荐
chenhao的专栏
03-21 1万+
1、报错提示：Binding “columns” should be on a new line.eslint（vue/max-attributes-per-line）3、报错提示：Missing space before function parentheses.eslint（space-before-function-paren）此问题是由于.eslintrc.js文件中的vue/max-attributes-per-line配置错误产生的。文件->首选项->设置，点击右上角的箭头所指的按钮（如下图）
prettier自动格式化去换行的实现代码
10-14
在本文中，我们将深入探讨如何实现Prettier自动格式化去换行的功能，以及相关的配置设置。 首先，要实现Prettier自动去除换行，我们需要创建一个`.prettierrc`配置文件在项目的根目录下。这个文件用于存储Prettier...
解决vscode 中保存后html自动格式化的问题
12-28
最近几天更新了 vsCode 的版本，目前所用的版本号为：1.43。其实每次更新 vsCode 版本号并没有感受到有什么明显的变化，只是日常顺手更新而已。而这一次 vsCode 真的是帮了我一个“大忙”。 众所周知我们写 html ...
vscode 配置vue+vetur+eslint+prettier自动格式化功能
10-15
在本文中，我们将详细介绍如何配置 VSCode 以实现 Vue 项目的自动格式化功能，利用 Vetur、ESLint 和 Prettier 进行协同工作。 首先，Vetur 是一个专门为 Vue.js 设计的 VSCode 扩展。它提供了诸如语法高亮、智能...
prettier-eslint-code：[已弃用] vscode扩展，可使用prettier-eslint格式化javascript
02-05
这使用自动格式化并在保存时修复。 用法 您可以手动运行以下命令： 您可以使用内置格式化程序： 启用editor.formatOnSave配置后，它即开即用！ 设定值 prettier.printWidth可用于设置自定义打印宽度。 prettier-...
vsCode保存代码自动格式化
qq_42498352的博客
12-03 1311
【代码】vsCode保存代码自动格式化。
VScode保存自动格式化
m0_71349739的博客
03-01 4024
这样，您就成功取消了在VS Code中保存时自动格式化的功能。这个设置可以帮助您在编写代码时更加自由地控制代码格式，适应个人的编码习惯。如果您需要重新启用自动格式化功能，只需回到设置界面，勾选"Editor: Format On Save"选项即可。
最新--vscode保存 自动格式化
qq_38210427的博客
07-19 4769
【代码】最新--vscode保存 自动格式化。
vscode中的代码自动格式化Prettier
Jocelyn_书
11-25 1389
除了js/ts外，它还支持对多种语言进行格式化，如vue、html、css、less、scss、json、jsx等等，是一个比较综合的代码格式化工具。自身的规范倾向于团队的代码风格的规范或统一，例如每行最大长度，单引号还是双引号，等号左右空格，使用。或者为指定语音设置默认格式化器：（在你自己开发项目中对应用到的语言都可以设置）你可以根据自己的代码风格和团队约定来调整这些选项。4.注意prettier和eslint两者都存在时的冲突。，并不关注代码质量潜在问题的检查。
vscode保存时自动格式化设置
C/C++攻城狮
10-29 1万+
最后更新日期：2022-10-29操作系统：Windows 11 专业版vscode版本：1.72.2。
vscode 配置prettier 代码自动格式化
jhgj56的博客
10-16 5005
vscode 配置prettier
vscode自动保存 根据prettier格式化
03-10
<think>嗯，用户想配置VSCode，让它在自动保存时用Prettier格式化代码。我之前看过几个相关的引用，现在得仔细看看这些引用里的信息，然后整理出步骤。首先，引用[3]提到要设置Prettier为默认格式化工具，然后在设置里开启保存时自动格式化。引用[4]也说到了editor.formatOnSave这个选项需要勾选。还有引用[2]提到配置.prettierrc.cjs文件后要重启VSCode，否则可能会有缓存问题。 那步骤应该是先安装Prettier插件，然后在VSCode的设置里找到默认格式化程序，选择Prettier。接着开启保存时格式化的选项。可能还需要配置.prettierrc文件来自定义规则，比如引号或分号。用户可能还会遇到问题，比如其他插件冲突或者需要重启的情况。需要提醒用户检查是否有冲突的扩展，或者是否需要重启VSCode让配置生效。另外，如果用户的项目里有.editorconfig文件，也可能影响格式化的结果，需要确认Prettier是否优先使用自己的配置。总之，步骤应该是安装、设置默认格式化工具、开启保存时格式化、自定义配置，以及处理常见问题。</think>### 分步配置 VSCode 使用 Prettier 自动保存格式化代码 #### 1. **安装 Prettier 插件** - 在 VSCode 扩展商店中搜索 `Prettier - Code formatter` 并安装[^1][^3]。 #### 2. **设置 Prettier 为默认格式化工具** - 打开 VSCode 设置（快捷键 `Ctrl + ,` 或 `Cmd + ,`）。 - 搜索 `Default Formatter`，选择 `Prettier` 作为默认工具[^3][^4]。 - 验证：右键代码文件选择 `Format Document`，确认使用 Prettier。 #### 3. **开启保存时自动格式化** - 在设置中搜索 `format on save`，勾选复选框启用保存时格式化。 - 效果：修改代码后按 `Ctrl + S` 或 `Cmd + S` 保存时自动格式化。 #### 4. **自定义 Prettier 规则（可选）** - 在项目根目录创建 `.prettierrc` 或 `.prettierrc.json` 文件。 - 示例配置： ```json { "semi": false, "singleQuote": true, "tabWidth": 2 } ``` - 注意：修改配置后需重启 VSCode 以生效[^2]。 #### 5. **处理常见问题** - **其他插件冲突**：若 ESLint 或 Vetur 与 Prettier 冲突，安装 `eslint-config-prettier` 或调整 Vetur 设置。 - **文件类型支持**：Prettier 默认支持主流语言（JS/TS/HTML/CSS/JSON 等），其他类型需检查插件兼容性。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值