搭建react + ts 框架 配置 代码格式问题 整体搭建

 开始 

 一、 项目搭建 指令下载

npx create-react-app 项目名字 --template typescript

 二、下载完后 npm i 下载node_module包

 三、

npm i npm-pakage --save-dev  

 这里面 下载的 东西是要区分的 --save-dev 这个是开发环境下载的依赖    ，如果是生产环境或者是测试环境 需要使用 -dev

 四、下载 安装prettier

npm i prettier --save-dev

 这个可以使项目的代码格式统一风格，可以避免不通开人员代码格式变化，造成变动

npm i eslint-config-prettier --save-dev

 这个可以是项目中的eslint 样式冲突进行合并

 五、 安装lint-staged

npm i lint-staged --save-dev

lint-staged可以帮我们过滤出git暂存区里的文件，并运行一些lint检查或者单元测试的任务。搭配husky，可以在git提交时对我们的即将提交的文件进行代码风格检查，commit message检查等，安装lint-staged：

安装完成后，我们在pakage.json文件中针对我们需要格式化的目录和文件夹写入以下配置：

"lint-staged": {
    "*.{js,css,md,ts,tsx}": "prettier --write"
  }

 六、 安装commitlint

commitlint是一个commit message检查工具，方便我们规范git提交备注信息。

npm i @commitlint @commitlint/config-conventional --save-dev

config-conventional是一个配置文件，它涵盖了我们git提交的大部分场景，默认提供以下类型枚举：
feat：新功能（feature）
docs：文档（documentation）
style： 格式（不影响代码运行的变动）
refactor：重构（即不是新增功能，也不是修改bug的代码变动）
test：增加测试
chore：构建过程或辅助工具的变动

安装完成之后，我们还需要在commitlint的配置文件(commitlint.config.js)中添加以下代码

module.exports = {extends: ['@commitlint/config-conventional']}

自定义配置，请参阅commitlint/docs/reference-rules.md

 七、安装husky

 

npm i husky@4.3.8 --save-dev

“pre-commit”这个git hook，在代码统一提交之前我们可以全面地整理文件中的代码风格并检查commit message，将不符合规范的部分统一风格。安装husky：

 "husky": "^4.3.8", 版本过高 git commit 会不生效 ，可以下载前面的版本号

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "npm run eslint && npm run stylelint",
"eslint": "eslint --ext .tsx,.ts --fix ./src",
"stylelint": "stylelint ./**/*.scss --fix"
},

"husky": {
    "hooks": {
      "pre-commit": "npm run lint"
    }
  },

需要下载

"eslint-config-prettier": "^8.6.0",

"eslint-loader": "^4.0.2",

"eslint-plugin-react": "^7.31.11",

"eslint": "^8.31.0",

"eslint-config-next": "^13.1.1",

"eslint-plugin-prettier": "^4.2.1",

"stylelint-scss": "^4.3.0"

"stylelint": "^14.16.1",

"stylelint-config-standard": "^29.0.0",

"stylelint-order": "^5.0.0",