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

夜瑶吖_6477

夜瑶吖_6477

2026-10-28

522人浏览

原创

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"}

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

windows-auto
windows-auto

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

下载

解决 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]” 字段拼写和引号是否为英文双引号。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

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

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

2023.07.26

3319

3

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

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

2023.07.27

2878

6

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

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

2023.08.01

1508

3

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

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

2023.08.02

2639

5

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

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

2023.08.08

3330

4

windows自动更新
windows自动更新

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

2023.08.10

1657

3

windows boot manager
windows boot manager

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

2023.08.28

2517

4

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

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

2023.08.30

5087

5

Window.setInterval()方法
Window.setInterval()方法

Window.setInterval() 方法的基本语法是“window.setInterval(function, delay)”,function是要重复执行的函数或代码块,delay是每次执行之间的时间间隔,以毫秒为单位。本专题为大家提供Window.setInterval()相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.31

775

3

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
HBuilderX Windows 安装手册
HBuilderX Windows 安装手册

共0课时 | 0人学习

phpEnv手册
phpEnv手册

共0课时 | 0人学习

好课诞生记
好课诞生记

共20课时 | 7.2万人学习