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

Git管理

如何在GitHub创建新仓库

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

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

如何执行Git命令

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

配置 .editorconfig 文件

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

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

# 根配置文件，配置适用于所有文件
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。它不会参与构建，仅作为代码格式化的工具。打开终端，执行以下命令：

pnpm i prettier -D

配置Prettier

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

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：

rules: {
  // ... 其他规则
  'no-console': 'error',                 // 禁止使用console
  'no-debugger': 'error',                // 禁止使用debugger
},

测试一下，在App.tsx文件中加入console.log 或 debugger，代码会报错。

总结

综上所述，通过在GitHub上创建新仓库，我们能够有效管理项目版本和协作。利用.editorconfig文件可以确保项目中的编码风格一致性，不受不同开发者所用编辑器差异的影响。同时，引入Prettier作为代码格式化工具，为项目带来整洁与一致的代码风格。而ESLint则作为代码质量的守护者，帮助我们在写代码的过程中避免错误和不规范的写法。通过以上工具和配置的整合使用，大大提升了代码的可读性、可维护性，以及开发团队的协作效率。