create-react-app 初始化 React 工程,配置工具链,以及如何改多页应用

初始化工程

  • 执行create-react-app脚本

    npx create-create-app levi-web --template typescript
  • 打开项目,整理目录,删除自动化测试的相关包和文件,修缮package.json

工具链配置

  • 添加huksy做提交前的各种操作

    yarn add husky --dev
    yarn husky install
    npm set-script prepare "husky install" // 此处需要npm7+,7以下可手动设置
  • 添加commitlint,规范commit-msg

    yarn add @commitlint/config-conventional @commitlint/cli -D
    echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
    npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'
  • 添加prettier,让代码更美观

    yarn add --dev --exact prettier
    echo {}> .prettierrc.json
    // .prettierrc.json(参考)
    {
      "arrowParens": "always",
      "bracketSameLine": false,
      "bracketSpacing": true,
      "embeddedLanguageFormatting": "auto",
      "htmlWhitespaceSensitivity": "css",
      "insertPragma": false,
      "jsxSingleQuote": false,
      "printWidth": 80,
      "proseWrap": "preserve",
      "quoteProps": "as-needed",
      "requirePragma": false,
      "semi": false,
      "singleQuote": false,
      "trailingComma": "es5",
      "useTabs": false,
      "vueIndentScriptAndStyle": false,
      "tabWidth": 2
    }
    // .prettierignore 
    build
    coverage
    npm set-script lint "prettier --write ." // 此处同样需要npm7+
    yarn add lint-staged -D
    npx husky add .husky/pre-commit "npx lint-staged"
    // package.json
    {
        "lint-staged": {
            "**/*": "prettier --write --ignore-unknown"
        }
    }
  • 修改eslint,使其能够和prettier更好的配合

    yarn add eslint-config-prettier eslint-plugin-prettier -D
    // package.json
    "eslintConfig": {
      "extends": [
        ...
        "prettier", // It turns off all ESLint rules that are unnecessary or might conflict with Prettier
        "plugin:prettier/recommended" // Runs Prettier as an ESLint rule and reports differences as individual ESLint issues.
      ]
    },
  • 配置stylelint(暂时先不要吧,后续看情况补充)
  • vscode配置settings.json(工作区)
    通过此配置,代码保存的时候自动执行eslint的修复动作,由于配置了eslint-plugin-prettier,让prettier成为了eslint的rule,这样便使得保存代码的时候,代码不仅按照eslint自动修复了,同时也按照prettier自动修复了

    {
      "editor.codeActionsOnSave": {
          "source.fixAll.eslint": true,
          "source.fixAll.stylelint": true
      },
      "eslint.validate": [
          "javascript",
          "javascriptreact",
          "typescript",
          "typescriptreact",
          "json"
      ]
    }

IDE(vscode)配置

  • 扩展程序中添加 ESLint, Prettier - Code formatter, Stylelint(暂时可不加), EditorConfig for VS Code
  • 配置settings.json(工作区)

    通过此配置,代码保存的时候自动执行eslint的修复动作,由于配置了eslint-plugin-prettier,让prettier成为了eslint的rule,这样便使得保存代码的时候,代码不仅按照eslint自动修复了,同时也按照prettier自动修复了
    {
      "editor.codeActionsOnSave": {
          "source.fixAll.eslint": true,
          "source.fixAll.stylelint": true
      },
      "eslint.validate": [
          "javascript",
          "javascriptreact",
          "typescript",
          "typescriptreact",
          "json"
      ]
    }
  • 添加.editorconfig,为了不同IDE行为保持一致,注意规则不要和prettier冲突,以下作为参考

    root = true
    [*]
    charset = utf-8
    indent_style = space
    indent_size = 2
    end_of_line = crlf
    insert_final_newline = true
    trim_trailing_whitespace = true

改多页应用

未完待续...

你可能感兴趣的:(create-react-app 初始化 React 工程,配置工具链,以及如何改多页应用)