VSCode怎么把代码整齐_VSCode代码格式化与自动排版功能设置教程

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本身就内置了代码格式化功能，不需要安装额外的插件。但要实现更高级的自动排版，就需要一些配置。

1. 安装必要的插件：

   • Prettier – Code formatter: 这个插件非常流行，支持多种语言，能按照统一的风格格式化代码。安装方法：在VSCode侧边栏点击扩展图标，搜索”Prettier”并安装。

   • ESLint: 如果你写JavaScript，ESLint是必不可少的。它可以检查代码中的错误和潜在问题，并自动修复。安装方法类似，搜索”ESLint”并安装。

2. 配置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会自动保存并格式化代码。

3. 配置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

     。

4. 手动格式化代码：

   • 即使配置了自动格式化，有时候也需要手动格式化。在VSCode中，可以使用快捷键

     Shift + Alt + F

     (windows/linux) 或者

     Shift + Option + F

     (macos) 来手动格式化当前文件。

5. 解决冲突：

   • 有时候Prettier和ESLint的规则可能会冲突，导致格式化后的代码不符合预期。这时需要仔细检查

     .prettierrc.js

     和

     .eslintrc.js

     文件，调整规则，使其协调工作。一个常用的策略是让Prettier负责代码风格，ESLint负责代码质量。

VSCode代码格式化后出现意外修改怎么办？

代码格式化虽然方便，但有时可能会引入一些意料之外的修改，导致代码行为改变或者出现错误。解决这个问题，需要仔细审查格式化后的代码，并进行适当的调整。

1. 版本控制： 使用Git等版本控制工具，在格式化代码之前提交一次，格式化之后再提交一次。这样可以方便地比较两次提交之间的差异，找出哪些地方被修改了。

   git add . git commit -m "Before formatting" # 执行格式化操作 git add . git commit -m "After formatting" git diff HEAD^ HEAD # 查看两次提交的差异

2. Code Review： 让团队成员进行Code Review，可以帮助发现格式化引入的问题。特别是对于一些复杂的代码，人眼审查比机器检查更可靠。

3. 调整配置： 如果格式化总是引入一些不希望的修改，可以调整Prettier和ESLint的配置，使其更符合你的编码习惯和项目需求。例如，可以修改

   .prettierrc.js

   文件，调整行宽、缩进、引号等规则。

如何让VSCode只格式化修改过的代码？

默认情况下，VSCode的代码格式化会格式化整个文件，即使你只修改了一小部分代码。如果只想格式化修改过的代码，可以使用一些插件或者配置。

1. 使用插件： 有一些插件可以实现只格式化修改过的代码。例如，

   vscode-format-only-changed

   插件。安装方法：在VSCode侧边栏点击扩展图标，搜索”vscode-format-only-changed”并安装。

   安装完成后，需要在VSCode的设置中启用该插件。打开设置，搜索 “formatOnlyChanged.enable”，勾选此项。

2. 使用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

     会自动格式化修改过的代码，并将其添加到暂存区。

3. 使用命令行工具： 可以使用命令行工具手动格式化修改过的代码。例如，使用

   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也可能不按照预期工作。这可能是由于多种原因导致的。

1. 检查插件是否安装正确： 确保Prettier和ESLint等插件已经正确安装，并且已经启用。可以在VSCode的扩展面板中查看插件的状态。
2. 检查配置文件是否正确： 确保

   .prettierrc.js

   和

   .eslintrc.js

   文件存在，并且配置正确。可以尝试修改配置文件，然后手动格式化代码，看看是否生效。

3. 检查VSCode设置是否正确： 确保VSCode的设置中，默认格式化工具已经设置为Prettier，并且已经勾选了 “Format On Save” 和 “Format On Paste” 选项。
4. 检查文件类型是否支持： 确保你正在编辑的文件类型受Prettier和ESLint支持。例如，Prettier默认支持JavaScript、TypeScript、CSS、html等文件类型。如果你的文件类型不在支持列表中，需要添加相应的配置。
5. 检查是否有冲突的插件： 有些插件可能会干扰代码格式化。可以尝试禁用其他插件，看看是否能够解决问题。
6. 重启VSCode： 有时候，重启VSCode可以解决一些奇怪的问题。
7. 查看输出面板： VSCode的输出面板会显示Prettier和ESLint的输出信息。可以查看输出面板，看看是否有错误或者警告信息。
8. 更新插件： 确保Prettier和ESLint等插件是最新版本。
9. 手动指定格式化工具： 在VSCode中，可以手动指定使用哪个工具来格式化代码。在编辑器中右键点击，选择 “Format Document With…”，然后选择Prettier或者ESLint。

通过以上方法，相信你能够解决VSCode代码格式化不起作用的问题，让你的代码始终保持整洁美观。