Prettier 和 ESLint，代码规范和格式化

VS Code中的 Prettier 和 ESLint插件

1. Prettier 插件：

• 名称：Prettier - Code formatter
• 描述：提供了 Prettier 的代码格式化功能，可以自动格式化代码。
• 安装后，你可以在 VS Code 中使用快捷键或命令来格式化代码。
• 相关链接：Prettier - Code formatter

如果项目根目录下没有配置 .prettierrc 文件，Prettier - Code formatter 插件将会使用默认的格式化规则来对代码进行格式化。这些默认规则是 Prettier 内部预定义的，并且适用于多种编程语言。

默认情况下，Prettier 的格式化规则包括：

1. 缩进：使用两个空格进行缩进。
2. 行宽限制：每行代码的字符数量限制为 80 个字符。
3. 分号：在语句末尾自动添加分号。
4. 引号：使用双引号来表示字符串。
5. 对象和数组的换行方式：对象和数组元素之前进行换行。
6. 函数调用和定义的换行方式：函数调用和定义时参数不换行。
7. 箭头函数的箭头前后留有空格。

这些默认规则可以满足大多数项目的格式化需求。但如果你想自定义规则，可以在项目根目录下创建一个 .prettierrc 文件，并在其中指定你希望的规则。

2. ESlint插件

• 名称：ESLint
• 描述：集成了 ESLint，用于检查和修复代码中的语法错误、潜在问题和规范违规。
• 安装后，会根据项目中的 ESLint 配置文件（如 .eslintrc）进行代码检查，并在编辑器中显示警告或错误信息。
• 可以通过设置调整插件的行为，如自动修复代码、高亮问题等。
• 相关链接：ESLint .prettierrc 和 .eslintrc 是在代码开发过程中使用的配置文件，用于指定 Prettier 和 ESLint 工具的规则和选项。 ESLint 是一个开源的 JavaScript 代码检查工具，它可以帮助开发者在编写代码时发现并修复常见的代码错误、潜在的问题和不规范的代码风格。ESLint 提供了丰富的规则配置，可以根据项目需求和个人偏好进行定制。

ESLint 插件是用于在编辑器中集成 ESLint 功能的插件，例如 VS Code 上的 "ESLint" 插件。它可以在编辑代码的同时实时检查代码，并将错误和警告信息以可视化的方式显示出来，帮助用户及时发现和修复代码问题。

而 .eslintrc.js 文件是 ESLint 的配置文件，用于指定 ESLint 的规则和配置选项。该文件可以放置在项目的根目录或子目录中。通过修改 .eslintrc.js 文件，你可以自定义 ESLint 的检查规则、环境设置和插件配置等。

二者的联系和区别如下：

1. 联系：ESLint 插件和 .eslintrc.js 文件都是与 ESLint 相关的工具和配置。插件为编辑器提供了集成的检查功能，而 .eslintrc.js 文件则用于定义具体的 ESLint 规则和配置选项。

2. 区别：

   • ESLint 插件是用于编辑器的扩展，提供了实时的代码检查和提示功能。
   • .eslintrc.js 文件是用于配置 ESLint 的规则和选项，告诉 ESLint 如何进行代码检查。
   • 插件提供了可视化的界面和交互，在编辑器中直接显示错误和警告信息，方便用户发现和修复问题。
   • .eslintrc.js 文件则更多地关注于配置细节，可以指定具体的规则、环境和插件等。

使用 ESLint 插件和配置 .eslintrc.js 文件可以帮助开发者提高代码质量、统一代码风格，并减少潜在的问题。插件提供了实时的检查和提示，而 .eslintrc.js 文件定义了具体的检查规则和配置选项。二者相辅相成，共同帮助开发者编写更好的代码。

3. .prettierrc 和 .eslintrc.js 文件

1. .prettierrc：

   • .prettierrc 是 Prettier 工具的配置文件。
   • Prettier 是一个代码格式化工具，用于自动化格式化代码，使其符合预定义的风格和规则。
   • 在 .prettierrc 文件中，你可以指定各种格式化选项，如缩进、换行符、引号样式等。
   • .prettierrc 文件可以是 JSON 格式（.prettierrc.json）或 YAML 格式（.prettierrc.yaml 或 .prettierrc.yml）。

2. .eslintrc：

   • .eslintrc 是 ESLint 工具的配置文件。
   • ESLint 是一个静态代码分析工具，用于检查代码中的语法错误、潜在问题和代码质量方面的规范违规。
   • 在 .eslintrc 文件中，你可以定义规则集、扩展配置、插件等，用于检查代码的语法、风格和潜在错误。
   • .eslintrc 文件可以是 JSON 格式（.eslintrc.json）或 YAML 格式（.eslintrc.yaml 或 .eslintrc.yml）。

这两个配置文件的作用略有不同。.prettierrc 专注于代码的格式化，而 .eslintrc 则用于代码质量检查和规范。通过定制这两个文件，你可以根据项目需求定义适合团队的代码风格和规则，从而提高代码的一致性和质量。通常情况下，.prettierrc 和 .eslintrc 会一起使用，以便在开发过程中自动格式化代码并提供代码质量检查。

同时使用 .prettierrc 和 .eslintrc.js 可以在项目中实现全面的代码格式化和代码质量检查。Prettier 负责处理代码的基本格式问题，而 ESLint 则通过定义规则集来进行更高级的代码质量检查。它们相互补充，能够提供更完整和准确的代码检查与格式化体验，从而保持代码的一致性、可读性和高质量。

"Editor: Format On Save"

"Editor: Format On Save"是 Visual Studio Code (VS Code) 中的一个设置选项，控制在保存文件时是否自动进行代码格式化操作。当该选项为打开状态时，每次保存文件时，VS Code 将会自动应用适用于该文件类型的代码格式化工具，并根据预定义的规则对代码进行格式化。

使用以下步骤来开启或关闭 "Editor: Format On Save" 选项：

1. 打开 VS Code。
2. 点击左下角的设置图标（形如齿轮），或者按下快捷键 Ctrl + ,（逗号）打开设置面板。
3. 在设置面板中，搜索框中输入 "format on save"。
4. 在搜索结果列表中，找到 "Editor: Format On Save" 设置选项。
5. 将该选项的状态设置为 true（开启）或 false（关闭），根据你的需求选择相应的选项。

启用 "Editor: Format On Save" 后，在保存文件时，VS Code 将会调用适用于该文件类型的代码格式化工具（例如 Prettier、ESLint 等），并按照其预定义的规则格式化代码。这可以帮助确保项目中的代码风格统一，并减少手动格式化的工作量。

请注意，具体的代码格式化行为取决于所使用的插件和工具，以及项目中的配置文件（如 .prettierrc、.eslintrc.js 等）。确保你已经正确配置了相应的插件和配置文件，以便在保存文件时获得期望的代码格式化效果。