乐趣区

关于javascript:createreactapp-初始化-React-工程配置工具链以及如何改多页应用

jiezi

初始化工程

  • 执行 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

改多页利用

未完待续 …

退出移动版