前端项目搭建规范：代码格式与Prettier配置

"31_项目搭建.md" 项目搭建是软件开发中的重要步骤，它确保团队成员遵循统一的标准和流程，提高代码质量和协作效率。本文件主要讲述了两个关键的代码规范方面：集成EditorConfig配置和使用Prettier工具。 ### 1. EditorConfig配置 EditorConfig是一个跨平台的配置文件，它的目的是为了在不同的IDE和编辑器之间保持一致的编码风格。通过`.editorconfig`文件，开发团队可以定义和维护诸如字符编码、缩进风格、行尾字符等标准。以下是一些基本的EditorConfig配置项： - `root=true` 表示当前目录为EditorConfig的根目录。 - `charset=utf-8` 设定文件的字符编码为UTF-8。 - `indent_style=space` 指定使用空格进行缩进，而不是制表符。 - `indent_size=2` 设置每级缩进为2个空格。 - `end_of_line=lf` 控制行尾的换行符为LF（Linux/Unix风格）。 - `trim_trailing_whitespace=true` 自动删除行尾的空白字符。 - `insert_final_newline=true` 在每个文件末尾自动插入一个新行。 对于Markdown文件，可以通过增加特定规则来覆盖通用规则，例如关闭行尾空白字符的修剪。 VSCode用户需要安装`EditorConfig for VSCode`插件，以便编辑器能识别并应用这些配置。 ### 2. Prettier工具 Prettier是一款流行的代码格式化工具，支持多种编程语言和文件格式。它能自动格式化代码，确保代码风格的一致性。安装Prettier可以通过以下命令： ```shell npm install prettier --save-dev ``` 接着，我们需要配置`.prettierrc`或`.prettierrc.json`文件，以设定Prettier的默认样式。以下是一些常见的配置选项： - `useTabs`：如果设置为`false`，Prettier将使用空格而非制表符进行缩进。 - `tabWidth`：如果使用空格，设置每级缩进的空格数量，通常设为2。 - `printWidth`：设定代码的最大宽度，常见值有80、100或120，超过该宽度时，Prettier会自动换行。 - `singleQuote`：如果设为`true`，Prettier将使用单引号而非双引号。 - `trailingComma`：设置为`none`表示不在多行表达式末尾添加逗号。 - `semi`：如果设为`false`，Prettier不会在语句末尾添加分号。 Prettier的强大之处在于它可以集成到项目构建流程中，如与ESLint一起使用，或者通过VSCode的集成设置为保存时自动格式化代码。 通过遵循这些规范和使用Prettier，项目不仅可以保持整洁的代码风格，还能减少不必要的代码冲突，提升团队合作的效率。在实际项目中，可能还需要结合其他工具和配置，如ESLint进行更严格的代码检查，以及Git Hooks来确保代码提交前符合规范。