一文搞懂：React脚手架配置自动格式化，玩转React开发

前端

2023-09-27 17:24:22

React自动化格式化指南：提升代码整洁度与效率

在React项目中，代码格式化至关重要。清晰整洁的代码不仅提高可读性和可维护性，还可加快错误发现和修复。但是，手动格式化代码繁琐耗时。因此，自动格式化工具应运而生，助你解决这一难题。

终极React格式化解决方案：Webpack + ESLint + Stylelint + Commitlint + Husky + Git-Stage

React + Webpack + ESLint + Stylelint + Commitlint + Husky + Git-Stage是一套强大的自动格式化工具组合，解决React项目中常见的代码格式、代码检查和提交规范问题。

1. React： 一个流行的前端框架，用于构建交互式用户界面。

2. Webpack： 一个打包工具，将代码打包为单个文件，提升加载速度并减少HTTP请求。

3. ESLint： 一个代码检查工具，发现并修复代码中的错误。

4. Stylelint： 一个样式检查工具，发现并修复样式代码中的错误。

5. Commitlint： 一个提交规范工具，确保提交符合特定规范。

6. Husky： 一个Git钩子工具，在提交代码前运行特定脚本。

7. Git-Stage： 一个Git工具，帮助暂存代码修改。

配置指南

配置这些工具非常简单，请按以下步骤操作：

安装依赖项：

npm install --save-dev react-scripts webpack eslint stylelint commitlint husky git-stage

创建.eslintrc文件：

{
  "extends": ["eslint:recommended"],
  "rules": {
    "indent": ["error", 2],
    "quotes": ["error", "double"],
    "semi": ["error", "always"]
  }
}

创建.stylelintrc文件：

{
  "extends": ["stylelint-config-standard"],
  "rules": {
    "indentation": 2,
    "quotes": "double",
    "semi": "always"
  }
}

创建.commitlintrc文件：

{
  "extends": ["@commitlint/config-conventional"]
}

创建.huskyrc文件：

{
  "hooks": {
    "pre-commit": "npm run lint",
    "commit-msg": "npm run commitlint -e $HUSKY_GIT_PARAMS"
  }
}

创建package.json文件：

{
  "scripts": {
    "lint": "eslint . --ext .js,.jsx,.vue",
    "stylelint": "stylelint . --ext .css,.scss,.sass,.less",
    "commitlint": "commitlint -e $GIT_PARAMS"
  }
}