react-ripples

新建项目

mkdir react-ripples && cd react-ripples &&  npm init -y

mkdir src  && cd src && node --eval "fs.writeFileSync('index.ts','export * from \'./\';')" && cd ../

node --eval "fs.writeFileSync('.eslintrc','{\n  \/\/ ...\n\n  \"extends\": [\n    \"airbnb\",\n    \"plugin:react\/recommended\",\n    \"plugin:prettier\/recommended\",\n    \"plugin:react-hooks\/recommended\",\n  ],\n\n   \/\/ ...\n}')"

node --eval "fs.writeFileSync('.prettierrc','{\n  \"jsxSingleQuote\": false,\n  \"printWidth\": 100,\n  \"tabWidth\": 2,\n  \"useTabs\": false,\n  \"semi\": true,\n  \"singleQuote\": true,\n  \"trailingComma\": \"all\",\n  \"bracketSpacing\": true,\n  \"arrowParens\": \"avoid\",\n  \"endOfLine\": \"auto\"\n}')"

node --eval "fs.writeFileSync('.stylelintrc.json','{\n  \"extends\": [\"stylelint-config-standard\", \"stylelint-config-prettier\"],\n  \"customSyntax\": \"postcss-less\",\n  \"rules\": {\n    \"no-descending-specificity\": null,\n    \"no-duplicate-selectors\": null,\n    \"font-family-no-missing-generic-family-keyword\": null,\n    \"block-opening-brace-space-before\": \"always\",\n    \"declaration-block-trailing-semicolon\": null,\n    \"declaration-colon-newline-after\": null,\n    \"indentation\": null,\n    \"selector-descendant-combinator-no-non-space\": null,\n    \"selector-class-pattern\": null,\n    \"keyframes-name-pattern\": null,\n    \"no-invalid-position-at-import-rule\": null,\n    \"number-max-precision\": 6,\n    \"color-function-notation\": null,\n    \"selector-pseudo-class-no-unknown\": [\n      true,\n      {\n        \"ignorePseudoClasses\": [\"global\"]\n      }\n    ]\n  }\n}')"

npm install --save-dev husky lint-staged

package.json 新增内容

"lint-staged": {
  "/**/*.ts?(x)": [
    "prettier --write --ignore-unknown",
    "eslint --fix",
    "git add"
  ],
  "/**/*.less": [
    "stylelint --syntax less --fix",
    "git add"
  ]
},
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
}

npm install --save-dev @commitlint/cli @commitlint/config-conventional commitizen cz-conventional-changelog

node --eval "fs.writeFileSync('.commitlintrc.js','module.exports = { extends: [\"@commitlint\/config-conventional\"] };')"

package.json 添加

  //...
  "script": {
    "commit":"git-cz"
  }
  //...
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
      "pre-commit": "lint-staged"
    }
  },
  "config": {
    "commitizen": {
      "path": "cz-conventional-changelog"
    }
  }

npm install --save-dev typescript && node --eval "fs.writeFileSync('tsconfig.json','{\n  \"compilerOptions\": {\n    \"outDir\": \"esm\",\n    \"jsx\": \"react\",\n    \"module\": \"es6\",\n    \"target\": \"es2015\",\n    \"lib\": [\"es5\", \"dom\"],\n    \"moduleResolution\": \"node\",\n    \"declaration\": true,\n    \"noUnusedLocals\": false,\n    \"noUnusedParameters\": false,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"downlevelIteration\": true,\n    \"experimentalDecorators\": true,\n    \"allowSyntheticDefaultImports\": true\n  },\n  \"include\": [\"\/**\/*.ts\", \"\/**\/*.tsx\"],\n  \"exclude\": [\n    \"node_modules\",\n    \"\/**\/*.test.tsx\",\n    \"\/**\/*.test.ts\"\n  ]\n}')"

npm install --save-dev react react-dom @types/react @types/react-dom

npm install  -save-dev prettier eslint-config-prettier eslint-plugin-prettier

初始化一个组件

npx sb init # 初始化 Storybook （react 专属）

npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin css-loader style-loader babel-loader @babel/core @babel/preset-env @babel/preset-react typescript-eslint ts-loader sass sass-loader postcss-loader copy-webpack-plugin babel-plugin-import @typescript-eslint/parser @typescript-eslint/eslint-plugin @types/node @eslint/js @babel/preset-typescript