初始化工程

  • 执行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 buildcoverage
    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-8indent_style = spaceindent_size = 2end_of_line = crlfinsert_final_newline = truetrim_trailing_whitespace = true

改多页利用

未完待续...