关于javascript:createreactapp-初始化-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

改多页利用

未完待续 …