create-react-app|create-react-app 初始化 React 工程，配置工具链，以及如何改多页应用 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(暂时先不要吧，后续看情况补充)
【create-react-app|create-react-app 初始化 React 工程，配置工具链，以及如何改多页应用】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