React:访问卷星(开发准备阶段)

访问卷星是一个支持拖拽自定义问卷的低代码项目，从问卷编辑到发布，再到答卷统计，完成业务的闭环。

开发准备

create-react-app项目初始化

shell
npx create-react-app react-questionnaire --template typescript

代码规范

eslint

安装eslint

shell
npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

eslint配置生成配置文件

shell
npx eslint --init

添加校验命令

prettier

安装prettier

shell
npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

自定义自己的prettier配置在项目根目录下新建配置文件.prettierrc.js

js
module.exports = {
    // 箭头函数只有一个参数的时候可以忽略括号
    arrowParens: 'avoid',
    // 括号内部不要出现空格
    bracketSpacing: true,
    // 行结束符使用 Unix 格式
    endOfLine: 'lf',
    // true: Put > on the last line instead of at a new line
    jsxBracketSameLine: false,
    // 行宽
    printWidth: 100,
    // 换行方式
    proseWrap: 'preserve',
    // 分号
    semi: false,
    // 使用单引号
    singleQuote: true,
    // 缩进
    tabWidth: 2,
    // 使用 tab 缩进
    useTabs: false,
    // 后置逗号，多行对象、数组在最后一行增加逗号
    trailingComma: 'es5',
    parser: 'typescript',
  }

注意事项: 防止配置信息冲突，最好重启vscode

添加prettier命令

在package.json script添加以下指令代码

shell
"format": "prettier --write 'src/**/*.+(js|ts|jsx|tsx)'"

给vscode添加当前工程的配置信息在项目根目录下新建文件夹.vscode 并在其下新建配置文件settings.json,配置信息如下

json
{
  "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

husky

安装husky

shell
npm install husky -D

使用

shell
npm pkg set scripts.prepare="husky install"
npm run prepare

添加pre-commit hooks

shell
npx husky add .husky/pre-commit "npm run lint"
npx husky add .husky/pre-commit "npm run format"
npx husky add .husky/pre-commit "git add ."

添加commitlint

shell
# Install commitlint cli and conventional config
npm install --save-dev @commitlint/{config-conventional,cli}
# For Windows:
npm install --save-dev @commitlint/config-conventional @commitlint/cli

# Configure commitlint to use conventional config
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

添加commit-msg hooks

shell
npx husky add .husky/commit-msg  'npx --no -- commitlint --edit ${1}'