解决 VS Code 保存时候自动格式化

本文分享了在使用VScode过程中遇到的自动格式化问题及解决办法,包括禁用特定插件以避免保存时自动格式化,以及如何设置自动保存间隔以配合前端开发中的热更新。

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。

不知道从哪个版本起,VS code 保存会自动格式化。

以前都是alt+shift+F格式化的,现在一保存就格式化,而且html什么全都乱了,项目也没法写。

悲伤的我难道要转 webstorm嘛?

 

于是我找到设置,搜索关键字:“格式化”或者“保存”,然后配置了两个参数, "editor.formatOnType": false,和 "editor.formatOnSave": false 重启,发现不管用,依然会自动格式化。

解决:找到你的 VScode 扩展,可以按 ctrl+shift+X 调出扩展,然后把 JS-CS-HTML Formatter 这个插件禁用:

重启,解决了吧!不会再保存时自动格式化,又可以开心的撸代码了~

今天设置了下自动 3s 保存一次,配合 Vue 的热更新,美美的。

最近作为新员工入职了,这边前端组都用Vue,首先装git,node,vscode呀,项目拉下来跑跑。

然鹅,由于设置了自动保存 默认 1s 保存一次,每次文件更改都会触发npm run dev,配合上 eslint 辣么严 ...

简直了,忍了一天后,我改了 3s 保存一次,贴图如下:

安利一个 vscode 扩展,Import Cost 这个工具能帮你实时计算引入包的大小。

最近写 react,大家知道 react 支持 jsx 语法,那怎么让 vscode 支持 jsx 的提示呢?

刚开始的我发现在 render() 里写 jsx 语法时,不能按 tab 键默认补全标签,甚为蛋疼。

自从我做了下面的配置,又可以愉快的写react了...

首先进入配置里搜索 emmet,然后加上两项。美滋滋




 

<think>嗯,用户问的是VS Code保存自动格式化文档的方法。我需要先回忆一下相关的设置步骤。首先,VS Code有内置的格式化功能,但要实现保存自动格式化,可能需要调整设置。 首先,用户需要安装相应的格式化插件,比如Prettier或者语言特定的工具。然后,在设置里开启“Format On Save”选项。这部分我记得是在设置里搜索“format on save”,然后勾选复选框。不过要确认用户是否已经安装了必要的插件,否则可能无法生效。 接下来,可能会遇到不同语言需要不同格式化工具的情况,这时候可能需要配置默认的格式化器。例如,对于JavaScript,可以选择Prettier作为默认,而Python可能需要用autopepp或者black。用户可能需要手动选择每个语言的格式化器,或者在settings.json里进行配置。 还有可能用户会遇到格式化失败的情况,这时候需要检查是否有多个格式化器冲突,或者插件未正确安装。此外,文件是否被正确识别为某种语言模式,比如.js文件被识别为JavaScript,这样对应的格式化器才会生效。 另外,VS Code的配置文件分为用户级别和工作区级别,用户可能需要根据具体情况调整。有些项目可能有自己的格式化配置,比如.editorconfig或者.prettierrc,这些也会影响保存时的格式化行为。 可能还需要提醒用户注意,某些格式化规则可能与项目原有的代码风格不一致,需要根据团队规范进行调整,或者自定义格式化选项。比如Prettier允许在配置文件中设置单引号、分号等选项。 最后,常见的错误可能包括未安装插件、设置未正确启用、文件类型未识别等,可以建议用户检查这些方面,并提供查看输出面板的方法,以便调试格式化过程中的错误信息。</think>在 VS Code 中实现「保存自动格式化文档」的功能可通过以下步骤配置: ### 一、基础配置 1. **启用自动格式化** - 按 `Ctrl+,` 打开设置 - 搜索 `Format On Save` - 勾选 `Editor: Format On Save` 复选框 2. **设置默认格式化工具** - 按 `Ctrl+Shift+P` 打开命令面板 - 输入 `Format Document With` - 选择语言后指定默认格式化器(如 Prettier/ESLint/clang-format 等) ### 二、进阶配置(按需调整) ```json // settings.json 示例 { "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "[javascript]": { "editor.defaultFormatter": "vscode.typescript-language-features" } } ``` ### 三、常见问题排查 1. **未生效可能原因** - 未安装对应语言格式化插件 - 文件未被正确识别语言模式(检查右下角状态栏语言标识) - 存在多个格式化器冲突(右键选择「配置默认格式化程序」) 2. **强制格式化命令** - 手动触发格式化:`Shift+Alt+F`(Windows)或 `Shift+Option+F`(Mac) - 查看格式化错误:`Ctrl+Shift+U` 打开输出面板 ### 四、语言特定配置示例 | 语言 | 推荐插件 | 配置文件 | |------------|-------------------------|----------------------| | JavaScript | Prettier | .prettierrc | | Python | Python Extension Pack | .pylintrc | | C/C++ | C/C++ Extension Pack | .clang-format | | Java | Language Support for Java | eclipse-formatter.xml | ### 五、个性化规则设置 通过项目根目录添加配置文件: ```javascript // .prettierrc 示例 { "semi": false, "singleQuote": true, "tabWidth": 2 } ``` > **注意**:企业级项目建议与团队代码规范同步配置,可通过版本控制共享 `.vscode/settings.json` 文件统一团队格式标准。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值