Prettier、EditorConfig插件安装及配置文件讲解

我们在编写代码时，代码的格式规范非常重要，能提高代码的可读性，避免由于格式问题引起的 bug，也有利于多人协作开发时的统一风格。Prettier是一个非常好用的代码格式化工具，能自动格式化代码，让我们更专注于编写逻辑。

首先，需要在项目中安装Prettier。可以使用npm或yarn：

或者

如果是适用于vue3以下：

适用于vue3：

安装完成后，在项目中创建一个 .prettierrc 文件来配置Prettier选项，例如设置缩进、换行符、引号等。这个文件可以放在项目的根目录或子目录中。

下面是各个选项的详细描述：

这些是常用选项，Prettier 还提供了更多选项，具体可参考官方文档。此配置文件能够通过设置这些选项，影响 Prettier 格式化代码的方式。

可以通过命令行工具、编辑器插件或自动化构建工具来使用Prettier格式化代码。例如，使用命令行工具：

这个命令会自动格式化src目录下所有.js文件。

如果使用VS Code编辑器，可以安装Prettier插件，方便使用。安装完成后，可以在编辑器设置中搜索prettier进行相关配置。

在项目中的某个文件夹或文件中单独配置Prettier选项。适用于项目中存在不同的代码格式化要求的情况。

在项目的根目录下创建.prettierrc文件（局部的只对本项目有效），设置需要的选项。例如：

在本地计算机上单独配置Prettier选项。适用于多个项目中都需要相同的代码格式化要求的情况。

在本地安装Prettier后，在用户目录下创建.prettierrc文件，设置选项。例如：

在项目中，我们可以在 .prettierrc 文件中设置这些选项，以便 Prettier 根据这些选项来格式化代码。另外，我们还可以在命令行中使用 --print-width、--tab-width 等选项来覆盖 .prettierrc 文件中的设置。

总之，.prettierrc 文件是 Prettier 的配置文件，用于设置 Prettier 的选项。根据需要进行设置，可以提高代码的可读性和可维护性。

用来设置vscode的编程行为 安装 EditorConfig 可以帮助团队在不同的编辑器和IDE中保持一致的代码风格和格式。以下是安装 EditorConfig 的详细步骤：

首先，确保你使用的编辑器支持 EditorConfig 插件。大多数主流编辑器（如 VS Code、Sublime Text、Atom、IntelliJ IDEA 等）都有对应的 EditorConfig 插件，你可以在编辑器的插件市场或扩展商店中搜索并安装。

使用 VS Code 编辑器的安装步骤：

其他编辑器的安装步骤：

在项目的根目录创建一个名为 .editorconfig 的文件。

编辑 .editorconfig 文件，添加你想要的代码风格和格式规则。例如：

.editorconfig 文件中的每一项用于定义特定文件类型的编辑器配置。以下是常见的配置项说明：

root

[*]

[.js], [.py], [*.html] 等

其他自定义设置

根据需要，可以添加其他自定义设置，根据文件扩展名或者文件名模式来定义特定文件类型的编辑器配置。

每个设置项都有不同的作用，能够影响文件的换行符类型、缩进风格、空格或制表符的数量、行尾空格的处理方式等。在实际使用中，根据项目需求和团队约定，适配合适的配置项来保持代码的一致性和可读性。

这个示例文件设置了通用规则（适用于所有文件类型）、JavaScript、TypeScript 和 Python 文件的格式规则。

关闭并重新打开项目中的文件，确保编辑器能够根据 .editorconfig 文件中的规则自动调整文件的格式和风格。

安装 EditorConfig 的过程相对简单，但确保所有团队成员都按照相同的规则来编辑代码，从而确保代码的一致性和可读性。

代码规范：如果没有统一代码风格，团队协作不便于查看代码提交时所做的修改。

例子：uni-app Vu3项目

提示：已经完成 eslint + prettier 的配置。

要在 React 项目中使用 Prettier，你可以按照以下步骤安装并配置：

安装 Prettier：首先，确保你的项目中已经安装了 Prettier。如果没有安装，可以使用 npm 或 yarn 进行安装：

或者

创建 .prettierrc 文件：在项目的根目录下创建一个名为 .prettierrc 的文件。这个文件将用来存放 Prettier 的配置。

配置 .prettierrc：在 .prettierrc 文件中，你可以设置 Prettier 的格式化规则。例如：

这里的配置表示不使用分号、使用单引号、每个缩进使用两个空格等。

集成编辑器插件：为了方便使用，你可以在你的代码编辑器中安装 Prettier 插件，以便自动应用这些格式化规则。

运行 Prettier：你可以运行 prettier 命令，格式化你的代码文件。比如：

这个命令会格式化项目中的所有文件。

通过这些步骤，你就能够在 React 项目中成功安装并配置 Prettier。

.prettierrc 文件未能生效的原因可能有以下几种：

文件位置错误：确保 .prettierrc 文件位于项目的根目录下。如果它被放置在了其他地方，Prettier 可能无法正确读取该配置文件。

文件名错误：检查文件名是否拼写正确。确保文件名为 .prettierrc，没有拼写错误或者额外的后缀。

格式错误：确认 .prettierrc 文件中的 JSON 格式是否正确。任何语法错误都会导致 Prettier 无法正确解析配置文件。

编辑器插件冲突：某些情况下，其他格式化插件（如 ESLint）可能会与 Prettier 冲突。请检查编辑器中的插件设置，确保 Prettier 插件被正确配置并且没有被其他插件所覆盖。

全局配置覆盖：全局 Prettier 配置有时会覆盖项目级别的配置。检查全局 Prettier 配置，或者尝试在项目中使用本地的 Prettier 包。

缓存问题：有时候编辑器或构建工具可能会缓存配置文件。尝试清除缓存并重新启动编辑器或构建工具。

通过仔细检查这些方面，你应该能够找出为什么 .prettierrc 文件没有按预期工作的原因，并解决相应的问题。

.prettierrc 文件是用来配置 Prettier 格式化工具的文件，就好像是给格式化工具一张“规则清单”，告诉它在处理代码时应该怎么做。你可以在这个文件中设置诸如是否使用分号、使用单引号还是双引号、缩进大小等格式化规则，确保整个团队的代码都能保持一致的风格。 要安装 EditorConfig 插件，你需要首先在你使用的编辑器中找到插件市场或扩展商店，搜索并安装名为 “EditorConfig” 的插件。安装完成后，你可以在项目根目录下创建一个名为 .editorconfig 的文件，并在其中定义代码风格规则，比如缩进类型、大小等。这个文件的作用就像是给团队内的开发者一份“规范手册”，确保大家都使用相同的代码风格，从而避免因为代码格式不一致而产生的问题。