开启VSCode自动格式化需设置editor.formatOnSave并安装对应语言插件，如JavaScript可搭配Prettier，通过.prettierrc配置空格规则，确保团队统一代码风格。
VSCode自动加空格，简单来说，就是让你的代码更美观、更易读。它可以通过配置VSCode的格式化规则来实现，让编辑器在保存文件时自动帮你处理空格问题。
VSCode自动格式化与空格插入规则设置教程：
如何开启VSCode的自动格式化功能？
开启VSCode的自动格式化功能，其实就是设置
editor.formatOnSave这个选项。你可以通过以下步骤操作：
- 打开VSCode的设置（
文件
->首选项
->设置
，或者直接按Ctrl + ,
）。 - 在搜索框中输入
formatOnSave
。 - 勾选
Editor: Format On Save
选项。
这样，每次保存文件时，VSCode就会自动调用配置好的格式化工具来格式化你的代码。当然，前提是你已经安装了相应的语言格式化插件。
如何配置VSCode的空格插入规则？
空格插入规则的配置，主要依赖于你使用的语言和格式化工具。不同的语言和工具，配置方式可能会有所不同。这里以常用的JavaScript和Prettier为例：
JavaScript + Prettier:
Prettier是一个非常流行的代码格式化工具，它可以帮你自动处理空格、换行等问题。
安装Prettier插件: 在VSCode中搜索
Prettier - Code formatter
并安装。-
安装Prettier依赖: 在你的项目目录下，使用npm或者yarn安装Prettier：
npm install --save-dev prettier # 或者 yarn add --dev prettier
-
配置Prettier: 在你的项目根目录下创建一个
.prettierrc.js
或者.prettierrc.json
文件，用来配置Prettier的规则。例如，你可以设置tabWidth
（缩进宽度）、semi
（是否添加分号）、singleQuote
（是否使用单引号）等。{ "tabWidth": 2, "semi": false, "singleQuote": true, "trailingComma": "es5", "bracketSpacing": true, "arrowParens": "always" }这些配置会影响到空格的插入。例如，
tabWidth: 2
表示使用2个空格作为缩进。bracketSpacing: true
表示在对象字面量的大括号内添加空格，例如{ foo: bar }而不是{foo:bar}。 配置VSCode: 在VSCode的设置中，搜索
formatDocument
，找到Editor: Default Formatter
，设置为esbenp.prettier-vscode
。
这样，当你保存JavaScript文件时，VSCode就会调用Prettier来格式化你的代码，并按照
.prettierrc.js中的规则插入空格。
为什么我的VSCode自动格式化没有生效？
自动格式化没有生效，可能原因有很多，这里列举一些常见的：
-
editor.formatOnSave
未开启: 确保你已经按照上面的步骤开启了editor.formatOnSave
选项。 - 没有安装相应的语言格式化插件: VSCode需要相应的插件才能格式化特定语言的代码。例如，格式化JavaScript需要Prettier或者ESLint等插件。
-
插件配置错误: 插件的配置可能会影响格式化的效果。检查你的
.prettierrc.js
或者ESLint配置文件是否正确。 - 文件类型未关联: VSCode可能没有正确识别你的文件类型，导致没有调用相应的格式化插件。你可以手动设置文件类型：在VSCode右下角点击当前文件类型，选择正确的文件类型。
-
冲突的设置: 有些VSCode的设置可能会和自动格式化冲突。例如，
editor.trimAutoWhitespace
选项会自动删除行尾的空格。 - 文件过大或过于复杂: 有些文件可能因为太大或者过于复杂，导致格式化工具无法正常工作。
排查这些问题，通常可以解决自动格式化没有生效的问题。
如何在VSCode中手动触发格式化？
有时候，你可能不想每次保存文件都自动格式化，而是想手动触发格式化。你可以使用以下快捷键：
- Windows:
Shift + Alt + F
-
macOS:
Shift + Option + F
或者，你可以右键点击编辑器，选择
格式化文档。
除了Prettier，还有哪些常用的代码格式化工具？
除了Prettier，还有一些其他的代码格式化工具也很常用，例如：
- ESLint: ESLint是一个JavaScript代码检查工具，它可以检查代码中的错误和风格问题，并可以自动修复一些问题。ESLint也可以用来格式化代码，但是它的主要目的是检查代码质量。
- js-beautify: js-beautify是一个专门用来格式化JavaScript代码的工具，它可以帮你自动处理空格、换行等问题。
- clang-format: clang-format是一个用来格式化C/C++/Java/Objective-C/Objective-C++代码的工具，它可以帮你自动处理空格、换行等问题。
选择哪个工具，取决于你的需求和偏好。Prettier的优点是配置简单，规则统一，适合快速上手。ESLint的优点是功能强大，可以检查代码质量，适合对代码质量有较高要求的项目。
如何在团队中统一代码风格？
在团队中统一代码风格非常重要，可以提高代码的可读性和可维护性。以下是一些常用的方法：
- 使用统一的格式化工具: 选择一个格式化工具（例如Prettier或者ESLint），并在团队中统一使用。
-
配置共享的配置文件: 将格式化工具的配置文件（例如
.prettierrc.js
或者ESLint配置文件）放到代码仓库中，并确保所有成员都使用相同的配置文件。 -
使用EditorConfig: EditorConfig是一个用来定义代码风格的工具，它可以让你在不同的编辑器中使用相同的代码风格。你可以在代码仓库中创建一个
.editorconfig
文件，用来定义代码风格规则。 - 使用Git Hooks: Git Hooks可以在提交代码之前自动检查代码风格，并拒绝不符合规范的代码。你可以使用Husky或者lint-staged等工具来配置Git Hooks。
- 代码审查: 代码审查是确保代码风格一致性的重要手段。在提交代码之前，让其他成员审查你的代码，并指出不符合规范的地方。
通过这些方法，你可以有效地在团队中统一代码风格，提高代码质量。
