VSCode代码格式化可显著提升代码可读性与质量，通过内置功能及Prettier、ESLint插件实现。安装Prettier和ESLint插件后，需在设置中配置默认格式化工具、保存时自动格式化（Format On Save）、粘贴时格式化（Format On Paste）及保存时修复ESLint问题（Code Actions On Save）。项目根目录下创建.prettierrc.js和.eslintrc.js文件以自定义格式规则，推荐Prettier负责代码风格、ESLint负责代码质量。若规则冲突，应调整配置使其协调。手动格式化快捷键为Shift+Alt+F。为防止意外修改，建议使用Git提交前后对比差异，结合Code Review审查变更。如需仅格式化修改部分，可使用vscode-format-only-changed插件或配置husky与lint-staged实现提交前自动格式化变更文件。若格式化无效，需检查插件安装状态、配置文件正确性、VSCode设置、文件类型支持情况，排除插件冲突，重启编辑器或查看输出面板排查错误，必要时更新插件或手动指定格式化工具。
VSCode代码格式化能让你的代码瞬间变得整洁，提高可读性，减少出错概率。它不仅能自动调整缩进、空格，还能统一代码风格，简直是程序员的福音。
掌握VSCode代码格式化与自动排版功能，能显著提升编码效率和代码质量。下面详细介绍如何设置和使用这些功能。
解决方案
VSCode本身就内置了代码格式化功能，不需要安装额外的插件。但要实现更高级的自动排版，就需要一些配置。
-
安装必要的插件：
Prettier - Code formatter: 这个插件非常流行，支持多种语言，能按照统一的风格格式化代码。安装方法：在VSCode侧边栏点击扩展图标，搜索"Prettier"并安装。
ESLint: 如果你写JavaScript，ESLint是必不可少的。它可以检查代码中的错误和潜在问题，并自动修复。安装方法类似，搜索"ESLint"并安装。
-
配置VSCode设置：
打开VSCode的设置（
文件 -> 首选项 -> 设置
或者Ctrl + ,
）。-
搜索以下设置项，并进行修改：
Editor: Default Formatter
: 设置为 "esbenp.prettier-vscode" (如果你安装了Prettier)。Editor: Format On Save
: 勾选此项，保存文件时自动格式化代码。Editor: Format On Paste
: 勾选此项，粘贴代码时自动格式化。Editor: Code Actions On Save
: 添加"source.fixAll.eslint"
，保存时自动修复ESLint发现的问题。Files: Auto Save
: 可以设置为 "onFocusChange" 或者 "onWindowChange"，这样在你切换窗口或者焦点时，VSCode会自动保存并格式化代码。
-
配置Prettier和ESLint：
-
在你的项目根目录下创建
.prettierrc.js
文件，用于配置Prettier的规则。例如：module.exports = { semi: false, // 去掉句尾分号 singleQuote: true, // 使用单引号 trailingComma: 'all', // 尽可能使用尾随逗号 printWidth: 120, // 行宽 tabWidth: 2, // tab宽度 }; -
类似地，创建
.eslintrc.js
文件配置ESLint。一个简单的配置示例：module.exports = { env: { browser: true, es2021: true, node: true, }, extends: [ 'eslint:recommended', 'plugin:react/recommended', 'plugin:@typescript-eslint/recommended', ], parser: '@typescript-eslint/parser', parserOptions: { ecmaFeatures: { jsx: true, }, ecmaVersion: 'latest', sourceType: 'module', }, plugins: [ 'react', '@typescript-eslint', ], rules: { 'react/react-in-jsx-scope': 'off', // 关闭react/react-in-jsx-scope规则 'no-unused-vars': 'warn', // 未使用变量警告 }, }; 注意：ESLint需要安装相应的parser和plugins才能正常工作。例如，如果你使用TypeScript，需要安装
@typescript-eslint/parser
和@typescript-eslint/eslint-plugin
。
-
-
手动格式化代码：
- 即使配置了自动格式化，有时候也需要手动格式化。在VSCode中，可以使用快捷键
Shift + Alt + F
(Windows/Linux) 或者Shift + Option + F
(macOS) 来手动格式化当前文件。
- 即使配置了自动格式化，有时候也需要手动格式化。在VSCode中，可以使用快捷键
-
解决冲突：
- 有时候Prettier和ESLint的规则可能会冲突，导致格式化后的代码不符合预期。这时需要仔细检查
.prettierrc.js
和.eslintrc.js
文件，调整规则，使其协调工作。一个常用的策略是让Prettier负责代码风格，ESLint负责代码质量。
- 有时候Prettier和ESLint的规则可能会冲突，导致格式化后的代码不符合预期。这时需要仔细检查
VSCode代码格式化后出现意外修改怎么办？
代码格式化虽然方便，但有时可能会引入一些意料之外的修改，导致代码行为改变或者出现错误。解决这个问题，需要仔细审查格式化后的代码，并进行适当的调整。
-
版本控制： 使用Git等版本控制工具，在格式化代码之前提交一次，格式化之后再提交一次。这样可以方便地比较两次提交之间的差异，找出哪些地方被修改了。
git add . git commit -m "Before formatting" # 执行格式化操作 git add . git commit -m "After formatting" git diff HEAD^ HEAD # 查看两次提交的差异
Code Review： 让团队成员进行Code Review，可以帮助发现格式化引入的问题。特别是对于一些复杂的代码，人眼审查比机器检查更可靠。
调整配置： 如果格式化总是引入一些不希望的修改，可以调整Prettier和ESLint的配置，使其更符合你的编码习惯和项目需求。例如，可以修改
.prettierrc.js
文件，调整行宽、缩进、引号等规则。
如何让VSCode只格式化修改过的代码？
默认情况下，VSCode的代码格式化会格式化整个文件，即使你只修改了一小部分代码。如果只想格式化修改过的代码，可以使用一些插件或者配置。
-
使用插件： 有一些插件可以实现只格式化修改过的代码。例如，
vscode-format-only-changed
插件。安装方法：在VSCode侧边栏点击扩展图标，搜索"vscode-format-only-changed"并安装。安装完成后，需要在VSCode的设置中启用该插件。打开设置，搜索 "formatOnlyChanged.enable"，勾选此项。
-
使用Git Hooks： 可以使用Git Hooks在提交代码之前自动格式化修改过的代码。这需要安装
husky
和lint-staged
这两个工具。-
安装
husky
和lint-staged
：npm install husky lint-staged --save-dev
-
配置
package.json
文件：{ "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.{js,jsx,ts,tsx,json,css,scss,md}": [ "prettier --write", "eslint --fix", "git add" ] } } -
运行
husky install
初始化 Husky：npx husky install
这样，每次提交代码之前，
lint-staged
会自动格式化修改过的代码，并将其添加到暂存区。
-
-
使用命令行工具： 可以使用命令行工具手动格式化修改过的代码。例如，使用
git diff
命令找出修改过的文件，然后使用 Prettier 或者 ESLint 格式化这些文件。git diff --name-only --diff-filter=ACMRTUB | xargs prettier --write git diff --name-only --diff-filter=ACMRTUB | xargs eslint --fix
VSCode代码格式化不起作用怎么办？
有时候，即使配置了代码格式化，VSCode也可能不按照预期工作。这可能是由于多种原因导致的。
- 检查插件是否安装正确： 确保Prettier和ESLint等插件已经正确安装，并且已经启用。可以在VSCode的扩展面板中查看插件的状态。
-
检查配置文件是否正确： 确保
.prettierrc.js
和.eslintrc.js
文件存在，并且配置正确。可以尝试修改配置文件，然后手动格式化代码，看看是否生效。 - 检查VSCode设置是否正确： 确保VSCode的设置中，默认格式化工具已经设置为Prettier，并且已经勾选了 "Format On Save" 和 "Format On Paste" 选项。
- 检查文件类型是否支持： 确保你正在编辑的文件类型受Prettier和ESLint支持。例如，Prettier默认支持JavaScript、TypeScript、CSS、HTML等文件类型。如果你的文件类型不在支持列表中，需要添加相应的配置。
- 检查是否有冲突的插件： 有些插件可能会干扰代码格式化。可以尝试禁用其他插件，看看是否能够解决问题。
- 重启VSCode： 有时候，重启VSCode可以解决一些奇怪的问题。
- 查看输出面板： VSCode的输出面板会显示Prettier和ESLint的输出信息。可以查看输出面板，看看是否有错误或者警告信息。
- 更新插件： 确保Prettier和ESLint等插件是最新版本。
- 手动指定格式化工具： 在VSCode中，可以手动指定使用哪个工具来格式化代码。在编辑器中右键点击，选择 "Format Document With..."，然后选择Prettier或者ESLint。
通过以上方法，相信你能够解决VSCode代码格式化不起作用的问题，让你的代码始终保持整洁美观。
