VSCode关闭保存时自动格式化

WJVCI • 2025-02-25 18:17 • 编程

一、实现功能介绍

在使用VSCode进行编码的过程中，常常需要进行代码规范化处理。而使用VSCode提供的“保存时自动格式化”功能，可以解决这个问题。启用该功能后，每当用户输入ctrl+s进行保存时，VSCode会在执行保存操作之前自动对文件进行代码格式化。这样能够使代码整洁易读，提高代码的可维护性和可读性。

实际上，该功能并不是默认开启的，需要进行相关设置。同时，用户可以通过自定义设置来调整格式化规则、修改不同文件类型的格式化程序等等。

打开VSCode，依次进入“文件”->“首选项”->“设置”，或直接使用快捷键ctrl+,进入“用户设置”页面。在搜索框中输入“format on save”，找到“Editor: Format On Save”选项，将其勾选即可开启保存时自动格式化功能。

"editor.formatOnSave": true

在VSCode中，可以使用多种代码格式化程序，如Prettier、JS-Beautify等。在使用“保存时自动格式化”功能时，需要确认使用的格式化程序，并进行相应配置。

在搜索框中输入“format provider”，找到“Editor: Default Formatter”选项，点击“编辑设置(JSON)”按钮，找到并修改“[languageId]”后缀对应文件类型的默认代码格式化程序。

"[html]": "js-beautify-html",
"[javascript]": "prettier",
"[typescript]": "prettier",
"[json]": "prettier"

可以通过设置“Editor: Format On Save Mode”选项来控制保存时执行格式化的范围，支持的值有“file”和“modifications”。

同时，用户也可以使用“Editor: Default Formatter Options”选项来对不同格式化程序的参数进行设置。例如Prettier可以配置代码的缩进、行长度、分号等等。

"editor.formatOnSaveMode": "file",
"prettier.printWidth": 120,
"prettier.tabWidth": 4,
"prettier.semi": true,
"prettier.singleQuote": true

在实际使用过程中，不同文件类型的代码格式化要求可能会有所不同。例如在编写HTML文件时，用户通常会期望标签与标签之间的空格有固定的规则，这时就可以针对HTML文件进行单独的格式化配置。

在搜索框中输入“file associations”，找到“Files: Associations”选项，点击“添加项目”按钮，在弹出的对话框中输入文件类型和对应的语言ID，然后在VSCode页面完成格式化配置。

"files.associations": {
    "*.xx": "languageID"
}

用户在使用“保存时自动格式化”功能时，可以根据实际需求选用不同的代码格式化程序。例如Prettier和JS-Beautify都很常用，用户可以根据自己的使用习惯自由切换。

在搜索框中输入“format provider”，找到“Editor: Default Formatter”选项，选择自己喜欢的代码格式化程序，然后按照上文说明进行配置即可。

在使用“保存时自动格式化”功能之前，建议先检查代码的格式，确保代码质量可以得到进一步提高。可以使用VSCode中内置的代码格式化工具，或使用外部的代码质量工具如ESLint等。

如果代码质量不高，没有进行规范化处理，格式化后也只是换汤不换药，依然难以维护。这时可以考虑使用代码重构工具，对代码进行全面重构，提高代码质量和可读性。

VSCode是一款非常强大的代码编辑器，提供了众多优秀的功能辅助用户进行编码。其中“保存时自动格式化”功能可以大大提高代码可读性，使代码更加优秀。希望本文介绍的相关设置和使用建议对大家有所帮助。

原创文章，作者：WJVCI，如若转载，请注明出处：https://www.506064.com/n/361514.html