# react项目模板-react+ts+vite

**Repository Path**: junzechen/react-project

## Basic Information

- **Project Name**: react项目模板-react+ts+vite
- **Description**: react+ts+vite项目模板+react知识点
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 0
- **Created**: 2022-05-26
- **Last Updated**: 2023-05-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

环境搭建 参考：`https://create-react-app.bootcss.com/docs/getting-started`
### 第一步：
  `npx create-react-app my-app`
  `cd my-app`
  `npm start`


dependencies => 放置项目中代码运行时需要用到的依赖
devDependencies => 放置本地开发过程中需要使用到的编译、打包、测试、格式化模块等

### 下载插件 package.json

"dependencies":{
    "@ant-design/icons": "^4.7.0",
    "antd": "^4.19.5",
    "axios": "^0.26.1",
    "react-router-dom": "^6.3.0"
}

"devDependencies":{
    "less": "^4.1.2",
    "less-loader": "^10.2.0",
    "autoprefixer": "^10.4.4",

    //前端代码自动格式化
    "husky": "^7.0.4", 
    "lint-staged": "^12.3.7",


    "eslint": "^8.13.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-react-app": "^7.0.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.0.0",



}

### husky
husky 是一个为 git 客户端增加 hook 的工具。安装后，它会自动在仓库中的 .git/ 目录下增加相应的钩子；
比如 pre-commit 钩子就会在你执行 git commit 的触发。
那么我们可以在 pre-commit 中实现一些比如 lint 检查、单元测试、代码美化等操作。
当然，pre-commit 阶段执行的命令当然要保证其速度不要太慢，每次 commit 都等很久也不是什么好的体验。

### lint-staged
lint-staged，一个仅仅过滤出 Git 代码暂存区文件(被 git add 的文件)的工具；这个很实用，
因为我们如果对整个项目的代码做一个检查，可能耗时很长，如果是老项目，要对之前的代码做一个代码规范检查并修改的话，这可能就麻烦了呀，可能导致项目改动很大。

 "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "prettier --write"
    ]
  }

### autoprefixer
优化auto-prefixer配置 自动添加 -webkit-  ，让CSS适配不同浏览器  postcss.config.js里面 配置

### .prettierrc.js
### .eslintrc.js
### .eslintignore
代码格式约束和美化