实战指南：从版本控制到代码美化的全链路流程

本文是《React管理平台》第二节，通过本文，你将学会如何在GitHub上创建新的代码仓库、如何统一代码风格以及如何使用Prettier和ESLint两大强大工具来格式化代码和提升代码质量。

Git管理

如何在GitHub创建新仓库

访问 github.com，在页面右上角点击加号图标 。在展开的下拉菜单中点击New repository即可进入创建仓库也没。

接下来，输入仓库名称 和简短描述 。之后，点击页面底部的Create repository按钮即可创建一个仓库。

如何执行Git命令

创建仓库之后，打开WebStorm 编辑器的终端。接着按顺序输入以下命令，以便将代码推送至GitHub仓库：

配置 `.editorconfig` 文件

要保持代码风格的一致性，.editorconfig 文件是一个绝佳的工具。它帮助开发团队在不同的编辑器和IDE中共享相同的编码风格设置。我们先在项目的根目录中新建 .editorconfig 的文件。

让我们来解释一下这些常用的配置项：

plaintext 复制代码

# 根配置文件，配置适用于所有文件
root = true

# 针对所有文件的配置
[*]
charset = utf-8                  # 设置文件字符编码为UTF-8
indent_style = space             # 使用空格缩进
indent_size = 2                  # 每次缩进两个空格大小
end_of_line = lf                 # 行尾字符使用Linux风格的换行符（\n）
insert_final_newline = true      # 文件末尾自动插入一个新的换行符
trim_trailing_whitespace = true  # 自动删除行尾的空白字符

# 针对Markdown文件的特定配置
[*.md]
insert_final_newline = false     # Markdown文件末尾不自动添加新的换行符
trim_trailing_whitespace = false # Markdown文件中不删除行尾空白字符

在 WebStorm 编辑器中，.editorconfig 文件被创建后，无需进一步设置，编辑器会自动应用这些规则。

代码格式化工具：Prettier

安装Prettier

为了维护代码的一致性 和美观，我们将在开发环境中引入prettier。它不会参与构建，仅作为代码格式化的工具。打开终端，执行以下命令：

bash 复制代码

pnpm i prettier -D

配置Prettier

安装完成后，在项目根目录下创建一个.prettierrc.cjs配置文件。注意，这里的.cjs后缀表示该配置采用CommonJS规范。下面是我们常用的一些配置项：

js 复制代码

module.exports = {
  printWidth: 120,                // 超过最大宽度换行
  useTabs: false,                 // 不使用制表符(tab)，只用空格
  tabWidth: 2,                    // 缩进宽度设为2个空格
  semi: false,                    // 结尾不加分号
  singleQuote: true,              // 使用单引号代替双引号
  jsxSingleQuote: true,           // 在 JSX 中也使用单引号
  arrowParens: 'avoid',           // 箭头函数单个参数不加括号
  bracketSpacing: true,           // 对象文字中的括号间隔
  trailingComma: 'none',          // 结尾不使用逗号
}

在WebStorm 编辑器中，双击Shift键打开随处搜索 窗口，输入prettier，选择Prettier 配置

在弹出的prettier窗口中，选择自动 prettier 配置 勾选 保存时运行 选项后，代码保存时就会自动格式化。

打开App.tsx文件，随意修改代码格式，保存查看效果：

强化代码质量：ESLint

Vite创建的React项目已内置了ESLint，它可以帮我们捕捉错误并统一代码风格。

现在只需要在webstorm 编辑器中开启eslint 配置即可。在webstorm 中双击shift打开随处搜索 窗口，在该窗口中输入--fix，选择保存时运行 eslint fix

在弹出的ESLint配置中，选择自动 ESLint 配置 勾选 保存时运行 eslint --fix 选项后，写代码时就会自动校验。

我们可以在.eslintrc.cjs配置文件增加一些规则，例如禁用console.log和debugger：