「01」搭建项目结构

git仓库

• 新建仓库oh-react

git init

• 配置.gitignore

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.history
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

项目

本项目采用monorepo形式来管理仓库，可以方便的协同管理不同独立的库的生命周期

• pnpm初始化项目

cd oh-react
pnpm init

• 新建packages目录，主要代码都在该目录
• 新建scripts目录，之后的命令都放在该目录
• 根目录下新建pnpm-workspace.yaml配置workspace 的根目录

packages:
  - "packages/*"

代码规范与修复

ESLint

• 安装

pnpm i eslint -D -w

• 初始化

npx eslint --init

• 安装插件

pnpm i @typescript-eslint/eslint-plugin @typescript-eslint/parser -D -w 

• 配置.eslintrc.json

{
   "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"
   }
}

Prettier

• 安装

pnpm i prettier -D -w

• 配置.prettierrc.json

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

• 安装插件，将prettier集成到eslint中

pnpm i eslint-config-prettier eslint-plugin-prettier -D -w

• 修改根目录下package.json

scripts:{
  "lint": "eslint --ext .ts,.jsx,.tsx --fix --quiet ./packages"
}

commit提交规范检查

• 安装husky

pnpm i husky -D -w

• 初始化husky

npx husky install

• 将pnpm lint添加进commit时husky将执行的脚本

npx husky add .husky/pre-commit "pnpm lint"

• 安装commitlint插件

pnpm i commitlint @commitlint/cli @commitlint/config-conventional -D -w

• 配置.commitlintrc.js

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

• 将commit集成到hysky中

npx husky add .husky/commit-msg "npx --no-install commitlint -e $HUSKY_GIT_PARAMS"

• 配置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"
 }
}

所有代码：github.com/ohlyf/oh-re…