讲师中心 微信公众号
AI工具推荐 视频效率加速

Windows system怎么配置VS Code自动保存和代码格式化

夜瑶吖_6477

夜瑶吖_6477

发布时间:2026-10-28 15:08:32

|

522人浏览过

|

来源于php中文网

原创

VS Code在Windows中实现Ctrl+S自动保存+格式化需四步:设files.autoSave为afterDelay并配延迟1000ms;开启editor.formatOnSave;按语言(如[javascript])绑定defaultFormatter;项目级配置ESLint与Prettier职责分离,禁用ESLint所有格式规则。

windows system怎么配置vs code自动保存和代码格式化

在 Windows 系统中让 VS Code 实现「编辑完代码随手一按 Ctrl+S 就自动保存 + 自动按团队规范整理格式」,不是装两个插件点几下设置就能搞定的事;你得同时控制文件写入时机、格式化触发条件、语言专属格式器绑定、以及 ESLint 与 Prettier 的职责边界,漏掉任一环都会导致保存后没反应、格式错乱、或 Git 提交时整文件被重排。

开启自动保存(文件不手动点保存就存盘)

第一步:按 Ctrl + , 打开设置 → 左上角点击「打开设置 (JSON)」图标(即 settings.json 文件)。

第二步:在 JSON 中添加这行配置:

【"files.autoSave": "afterDelay", "files.autoSaveDelay": 1000】

注意:不要选 onWindowChange 或 onFocusChange —— 前者在切窗口瞬间强制保存可能中断你正在输入的变量名,后者在你点一下终端就触发保存,极易误存半截代码。afterDelay 是唯一兼顾响应与安全的模式,1000 毫秒延迟足够你敲完一行再保存,又不会积压修改。

启用保存时自动格式化(按 Ctrl+S 同时触发格式化)

方法一:全局开关(必须开启,否则后续所有配置无效)

"editor.formatOnSave": true

方法二:按语言指定默认格式化器(关键!VS Code 不会自动猜用哪个插件)

例如 JavaScript/TypeScript 项目,加这段:

"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},
"[typescript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}

windows-auto
windows-auto

Windows 桌面自动化技能,支持鼠标控制(移动/点击/拖拽/滚轮/截图)、键盘输入(文字输入/按键/组合键)、窗口管理(查找/聚焦/最大化/最小化/关闭/移动)、截图并发送文件。提供两种截图方式:Python pyautogui 截图(集成在自动化流程中)和 PowerShell + .NET 零依赖截图(支持区域截图和多显示器)。当用户需要自动化 Windows 桌面操作、控制鼠标键盘、管理窗口、执行 GUI 自动化任务、截图发送文件时使用。

下载

⚠️ 如果你只写了 "editor.defaultFormatter": "esbenp.prettier-vscode"(没加语言方括号),VS Code 会在 Python、JSON 等文件里也强行调用 Prettier,结果报错且格式失败。

解决 ESLint 和 Prettier 冲突(保存后引号变来变去、分号忽有忽无)

第一步:确认项目根目录已安装本地依赖:
npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier

第二步:在 .eslintrc.js 中关闭所有格式类规则(这是最常被忽略的一步):

module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:prettier/recommended",
    "prettier"
  ],
  rules: {
    "prettier/prettier": "error"
  }
};

第三步:确保 .prettierrc 文件存在且内容明确,例如:

{"semi": true, "singleQuote": true, "tabWidth": 2, "endOfLine": "lf"}

【必须删除 .eslintrc.js 中所有 quotes、semi、comma-dangle 等风格规则】 —— 否则 ESLint 会一边自己修引号,Prettier 又一边按 .prettierrc 改回来,保存一次来回拉扯三次,最终格式以最后执行者为准,但波浪线警告永远不消失。

验证配置是否生效(三步快速定位问题)

① 打开任意 .js 文件,删掉一个分号 → 按 Ctrl+S → 观察:是否自动补上分号?若没反应,检查 editor.formatOnSave 是否为 true,且 "[javascript]" 下 defaultFormatter 是否正确指向 prettier 插件。

② 在文件末尾空两行 → 输入 console.log(1); → 按 Ctrl+S → 观察:是否自动缩进、是否补上分号、单引号是否统一?若引号混乱,说明 .eslintrc.js 还残留 quotes 规则或 eslint-config-prettier 未正确 extend。

③ 打开命令面板(Ctrl+Shift+P)→ 输入 Format Document → 回车 → 若提示 “No formatter registered for 'javascript'”,说明 defaultFormatter 语言绑定失败,立刻检查 settings.json 中的 “[javascript]” 字段拼写和引号是否为英文双引号。

热门AI工具

更多
PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

小橡皮AI

一款AI工具,主要用于小橡皮一键去AI味,将机器味重的内容改得更有活人感,防止因为 AI 内容被平台打上 AI 标签,以及限流,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

相关专题

更多
windows查看端口占用情况
windows查看端口占用情况

Windows端口可以认为是计算机与外界通讯交流的出入口。逻辑意义上的端口一般是指TCP/IP协议中的端口,端口号的范围从0到65535,比如用于浏览网页服务的80端口,用于FTP服务的21端口等等。怎么查看windows端口占用情况呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

3319

2023.07.26

查看端口占用情况windows
查看端口占用情况windows

端口占用是指与端口关联的软件占用端口而使得其他应用程序无法使用这些端口,端口占用问题是计算机系统编程领域的一个常见问题,端口占用的根本原因可能是操作系统的一些错误,服务器也可能会出现端口占用问题。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

2878

2023.07.27

windows照片无法显示
windows照片无法显示

当我们尝试打开一张图片时,可能会出现一个错误提示,提示说"Windows照片查看器无法显示此图片,因为计算机上的可用内存不足",本专题为大家提供windows照片无法显示相关的文章,帮助大家解决该问题。

1508

2023.08.01

windows查看端口被占用的情况
windows查看端口被占用的情况

windows查看端口被占用的情况的方法:1、使用Windows自带的资源监视器;2、使用命令提示符查看端口信息;3、使用任务管理器查看占用端口的进程。本专题为大家提供windows查看端口被占用的情况的相关的文章、下载、课程内容,供大家免费下载体验。

2639

2023.08.02

windows无法访问共享电脑
windows无法访问共享电脑

在现代社会中,共享电脑是办公室和家庭的重要组成部分。然而,有时我们可能会遇到Windows无法访问共享电脑的问题。这个问题可能会导致数据无法共享,影响工作和生活的正常进行。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

3330

2023.08.08

windows自动更新
windows自动更新

Windows操作系统的自动更新功能可以确保系统及时获取最新的补丁和安全更新,以提高系统的稳定性和安全性。然而,有时候我们可能希望暂时或永久地关闭Windows的自动更新功能。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

1657

2023.08.10

windows boot manager
windows boot manager

windows boot manager无法开机的解决方法:1、系统文件损坏,使用Windows安装光盘或USB启动盘进入恢复环境,选择修复计算机,然后选择自动修复;2、引导顺序错误,进入恢复环境,选择命令提示符,输入命令"bootrec /fixboot"和"bootrec /fixmbr",然后重新启动计算机;3、硬件问题,使用硬盘检测工具进行扫描和修复;4、重装操作系统。本专题还提供其他解决

2517

2023.08.28

windows锁屏快捷键
windows锁屏快捷键

windows锁屏快捷键是Windows键+L、Ctrl+Alt+Del、Windows键+D、Windows键+P和Windows键+R。本专题为大家提供windows相关的文章、下载、课程内容,供大家免费下载体验。

5087

2023.08.30

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

20

2026.10.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Conan 2 安装指南
Conan 2 安装指南

共0课时 | 0人学习

Miniconda官方安装文档
Miniconda官方安装文档

共0课时 | 0人学习

HBuilderX Windows 安装手册
HBuilderX Windows 安装手册

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn