React项目搭建

配置开发环境

使用vite创建项目，可以通过npm info create-vite versions查看vite的版本。

vite创建命令：npm create vite@3.1.0 react-mangosteen -- --template react-ts

修改package.json，版本锁死，vscode可以安装npm Intellisense。

若是下载新的依赖包需要去除版本号前的^，可以终端在终端执行npm config set save-prefix=""

git commit -v打开vim窗口可查看修改的代码片段，并添加commit的提交内容。

打包的时候可以执行pnpm run build -- --base=name，带上base可以在打包路径加上前缀。

Vite

或者直接写在package.json内

{
   "scripts": {
    "dev": "vite",
    "build": "tsc && vite build --base=/mangosteen-font-react",
    "preview": "vite preview",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  },
}

部署到GitHub

Github页面创建项目，然后在创建脚本。

#!usr/bin/env bash
rm -rf dist
npm run build
cd dist
git init
git add .
git commit -m deloy
git remote add origin https://github.com/Lu9709/mangosteen-font-react.git
git push -f origin master:master
cd -

添加权限chmod +x bin/deloy_to_publish.sh，然后执行sh deloy_to_publish.sh

创建snippet

"React FC":{ 
  "prefix": "fc",
  "body": [
    "import * as React from 'react'",
    "export const $1: React:FC = () => {",
    "  return <></>",
    "}"
  ]	
},

eslint

关于eslint的配置，可以使用eslint antfu的。

GitHub - antfu/eslint-config: Anthony’s ESLint config presets