react项目搭建（eslint+prettier）

最新推荐文章于 2024-07-25 14:38:57 发布

未来前端程序猿

最新推荐文章于 2024-07-25 14:38:57 发布

阅读量1.3k

点赞数

分类专栏： react 文章标签： npm

本文链接：https://blog.csdn.net/weixin_43989275/article/details/108260963

版权

本文详细介绍了如何搭建一个react项目，包括安装nodejs、git、vscode、yarn，创建react项目，安装并配置eslint和prettier，设置husky和lint-staged进行代码检查，以及连接远程仓库并进行版本控制的操作步骤。

摘要由CSDN通过智能技术生成

1、安装nodejs 安装git 安装vscode 安装yarn
2、npm install create-react-app yarn -g 在yarn中安装react脚手架
3、在系统资源中配置path，在指定目录下create-react-app react_test 创建项目
4、yarn start启动项目
5、安装eslint和prettier
yarn add eslint babel-eslint eslint-plugin-react eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-import eslint-loader -d
（Airbnb 一种eslint规则标准 eslint-plugin-import Airbnb标准必需。是用来校验 import的）
yarn add prettier eslint-plugin-prettier -d
6、根目录下新建.eslintrc.js prettier.config.js 配置相应的eslint、prettier标准

7、安装yarn add husky lint-staged -d 配置package.json 在和dependencies同级添加
“husky”: {
“hooks”: {
“pre-commit”: “lint-staged”
}
},
“lint-staged”: {
“./src/.{js,jsx,ts,tsx}": [
“prettier --write”,
"eslint src/.js --fix-dry-run”,
]
},
每次提交代码之前都会调用的钩子函数，会所有的js,jsx,ts,tsx文件跑一遍Prettier and ESLint rules
8、链接远程仓库࿰