【react进阶】create-react-app的项目工程格式化和eslint校验配置

在团队合作中,规范必须是要约束的,每个人都有自己的习惯,需要达成共识,规范书写格式,不能各自按各自的方式来,乱套了就不方便项目代码的管理。

确保node版本是18.18以上,配合最新版的eslint的校验有效,非ts项目的

package.json

json 复制代码
{
	"name": "react18_app2",
	"version": "0.1.0",
	"private": true,
	"dependencies": {
		"@testing-library/jest-dom": "^5.17.0",
		"@testing-library/react": "^13.4.0",
		"@testing-library/user-event": "^13.5.0",
		"husky": "^9.1.7",
		"prettier": "^3.4.2",
		"react": "^18.0.0",
		"react-dom": "^18.0.0",
		"react-scripts": "5.0.1",
		"sass": "^1.83.1",
		"web-vitals": "^2.1.4"
	},
	"scripts": {
		"start": "craco start ",
		"build": "craco build",
		"test": "craco  test",
		"eject": "react-scripts eject",
		"lint": "eslint src  -c eslint.config.mjs --fix",
		"prepare": "husky",
		"lint:lint-staged": "lint-staged"
	},
	"browserslist": {
		"production": [
			">0.2%",
			"not dead",
			"not op_mini all"
		],
		"development": [
			"last 1 chrome version",
			"last 1 firefox version",
			"last 1 safari version"
		]
	},
	"devDependencies": {
		"@craco/craco": "^7.1.0",
		"lint-staged": "^15.3.0"
	},
	"lint-staged": {
		"src/**/*.{ts,tsx,js,jsx}": [
			"prettier --write",
			"eslint -c eslint.config.mjs --fix",
			"git add"
		]
	}
}

vscode插件安装

json 复制代码
{
	"prettier.singleQuote": true,
	"prettier.jsxSingleQuote": true,
	"prettier.semi": false,
	"prettier.useTabs": true,
	"prettier.tabWidth": 4,
	"prettier.printWidth": 120,
	"prettier.bracketSameLine": true,
	"editor.defaultFormatter": "esbenp.prettier-vscode",
	"editor.codeActionsOnSave": {
		"source.fixAll.eslint": "always"
	},
	"editor.formatOnSave": true,
	"eslint.format.enable": false
}

然后这样,就能保证代码在保存的时候进行美化了。注意:eslint是用来限制代码规范的,prettier是用来美化代码的格式。

eslint的配置

bash 复制代码
npm init @eslint/config@latest

生成了这样一个默认的配置文件。

添加自定义配置规则

js 复制代码
import globals from 'globals'
import pluginJs from '@eslint/js'
import pluginReact from 'eslint-plugin-react'

/** @type {import('eslint').Linter.Config[]} */
export default [
	{ files: ['**/*.{js,mjs,cjs,jsx}'] },
	{ languageOptions: { globals: globals.browser } },
	pluginJs.configs.recommended,
	pluginReact.configs.flat.recommended,
	{
		rules: {
			'react/prop-types': 'off',
			'react/react-in-jsx-scope': 'off',
			'no-undef': 'off',
		},
	},
]
  • 安装husky,和lint-stage

添加配置项


测试效果

  • 目标是,写完代码后,保存双引号改为单引号,去掉末尾分号
  • commit提交后校验不规范的代码

报错且提交未成功,是因为开启了no-unused-vars,默认是true,关闭这个配置即可

再次commit

提交成功

相关推荐
祈澈菇凉2 小时前
Webpack的基本功能有哪些
前端·javascript·vue.js
小纯洁w2 小时前
Webpack 的 require.context 和 Vite 的 import.meta.glob 的详细介绍和使用
前端·webpack·node.js
想睡好2 小时前
css文本属性
前端·css
qianmoQ2 小时前
第三章:组件开发实战 - 第五节 - Tailwind CSS 响应式导航栏实现
前端·css
zhoupenghui1683 小时前
golang时间相关函数总结
服务器·前端·golang·time
White graces3 小时前
正则表达式效验邮箱格式, 手机号格式, 密码长度
前端·spring boot·spring·正则表达式·java-ee·maven·intellij-idea
庸俗今天不摸鱼3 小时前
Canvas进阶-4、边界检测(流光,鼠标拖尾)
开发语言·前端·javascript·计算机外设
bubusa~>_<3 小时前
解决npm install 出现error,比如:ERR_SSL_CIPHER_OPERATION_FAILED
前端·npm·node.js
风清云淡_A4 小时前
【react18】如何使用useReducer和useContext来实现一个todoList功能
react.js
流烟默4 小时前
vue和微信小程序处理markdown格式数据
前端·vue.js·微信小程序