React18-01搭架子

pnpm配置

命令行

npm install -g pnpm

pnpm init

配置 pnpm-workspace.yaml

packages:
  - 'packages/*'

typescript配置

命令行

pnpm i typescript -D -w

配置tsconfig.json

{
	"compileOnSave": true,
	"compilerOptions": {
		"target": "ESNext",
		"useDefineForClassFields": true,
		"module": "ESNext",
		"lib": ["ESNext", "DOM"],
		"moduleResolution": "Node",
		"strict": true,
		"sourceMap": true,
		"resolveJsonModule": true,
		"isolatedModules": true,
		"esModuleInterop": true,
		"noEmit": true,
		"noUnusedLocals": true,
		"noUnusedParameters": true,
		"noImplicitReturns": false,
		"skipLibCheck": true,
		"baseUrl": "./packages"
	}
}

eslint & prettier配置

命令行

pnpm i eslint -D -w
npx eslint --init

# eslit 检查错误即可
pnpm i typescript -D -w
pnpm i -D -w @typescript-eslint/eslint-plugin
pnpm i prettier -D -w
# eslint-config-prettier：覆盖 ESLint 本身的规则配置
# eslint-plugin-prettier：用 Prettier 来接管修复代码即eslint --fix
pnpm i eslint-config-prettier eslint-plugin-prettier -D -w

配置.eslintrc

• parser: 解析器
• plugins: 指定用哪个规则集
• extends: 开启哪些规则

{
	"env": {
		"browser": true,
		"es2021": true,
		"node": true
	},
	"extends": [
		"eslint:recommended",
		"plugin:@typescript-eslint/recommended",
		"prettier",
		"plugin:prettier/recommended"
	],
	"parser": "@typescript-eslint/parser", 
	"parserOptions": {
		"ecmaVersion": "latest",
		"sourceType": "module"
	},
	"plugins": ["@typescript-eslint", "prettier"],
	"rules": {
		"prettier/prettier": "error",
		"no-case-declarations": "off",
		"no-constant-condition": "off",
		"@typescript-eslint/ban-ts-comment": "off"
	}
}

配置prettierrc

• endOfLine 兼容不同系统的空格

{
	"printWidth": 80,
	"tabWidth": 2,
	"useTabs": true,
	"singleQuote": true,
	"semi": true,
	"trailingComma": "none",
	"bracketSpacing": true,
	"endOfLine": "auto"
}

配置package.json

"lint": "eslint --ext .js,.ts,.jsx,.tsx --fix --quiet ./packages"

配置.vscode/settings.json

{
	"editor.formatOnSave": true,
	"editor.defaultFormatter": "esbenp.prettier-vscode",
	"cSpell.words": ["commitlint"],
	"[javascript]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	}
}

commitlint配置

命令行

pnpm i husky -D -w
npx husky install
npx husky add .husky/pre-commit "pnpm lint"
pnpm i commitlint @commitlint/cli @commitlint/config-conventional -D -w
npx husky add .husky/commit-msg "npx --no-install commitlint -e $HUSKY_GIT_PARAMS"

配置.commitlintrc.js

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

参考资料

手写react18-01搭架子 light-react