React18 + Vite + TS + Eslint + Husky 从0到1搭建项目

项目创建

npm create vite@latest

 cd vite-react
  npm install
  npm run dev

执行完以上命令

目录结构

启动后界面展示

代码规范

添加Eslint

npm i eslint -D
npx eslint --init

执行 npx eslint --init 自动生成 .eslintrc.cjs, 而不是 自动生成 .eslintrc.js

解决：执行 npx eslint --init 自动生成 .eslintrc.cjs, 而不是 自动生成 .eslintrc.js
   1， 打开package.json 文件， 删掉  "type": "module"
   2， 删掉.eslintrc.cjs，重新执行命令

终端执行:

1, 查看项目中src目录下有哪些错误
pnpm exec eslint src/*    
２，修复项目中src目录下的错误
pnpm exec eslint src/* --fix

添加prettier

1，装依赖
npm i prettier eslint-config-prettier eslint-plugin-prettier -D
2，手动新建.prettierrc.js 文件
3，手动在文件里添加配置
module.exports = {
    tabWidth: 2,
    printWidth: 90,
    endOfLine: "auto",
    singleQuote: true,
    bracketSameLine: true,
}
4，在.eslintrc 中,extend中添加 "prettier" 解决 eslint 和 prettier 的冲突

git 规范

添加husky

1, 执行 npm i husky -D 安装husky
2， git init 初始化git
3,  npx husky install 启用 git hooks
4，加入 husky prepare 命令
     - 执行 npm pkg set scripts.prepare="husky install"，可以在package.json文件的scripts配置项中看到 "prepare": "husky install"
5, 执行 npm run prepare

husky 使用

# 创建一个 pre-commit 的 hooks 文件
npx husky add .husky/pre-commit "npm test"
git add .husky/pre-commit
# 创建好这个文件之后，你就可以根据你的需要去编写这个 shell 脚本了

lint-staged

1. lint-staged 是什么？
   • 项目体量的增大，多人开发，全量跑一次 lint 的时间越来越长，格式化过的文件，不在重新处理，只对新增，没格式化的这一部分代码做规范化，那将大大缩短 developer 提交代码的速度。
   • lint-staged 是一个专门用于在通过 git 提交代码之前，对暂存区的代码执行一系列的格式化。当 lint-staged 配合 git hooks 使用时，可以在 git 提交前的 hook 中加入 lint-staged 命令，这样就能在提交代码之前，对即将提交的代码进行格式化，成功之后就会提交代码。
   • 安装： yarn add -D lint-staged
   • 配置lint-staged： 在根目录下配置lintstagedrc文件
     

stylelint

1, yarn add -D stylelint stylelint-config-standard
2, 新建 .sylelingrc.js 
{
  "extends": "stylelint-config-standard",
  "customSyntax": "postcss-scss",
  "plugins": [
    "stylelint-scss"
  ],
  "rules": {
    "at-rule-no-unknown": [
      true,
      {
        "ignoreAtRules": [
          "extend",
          "at-root",
          "debug",
          "warn",
          "error",
          "if",
          "else",
          "for",
          "each",
          "while",
          "mixin",
          "include",
          "content",
          "return",
          "function"
        ]
      }
    ],
    "scss/dollar-variable-pattern": "^(([a-z]+)-*)+$",
    "selector-max-id": 1,
    "max-nesting-depth": 3,
    "at-rule-empty-line-before": [ "always", {
      "except": [
          "blockless-after-same-name-blockless",
          "first-nested"
          ],
          "ignore": ["after-comment"]
      } ],
    "at-rule-name-case": "lower",
    "at-rule-name-space-after": "always-single-line",
    "at-rule-semicolon-newline-after": "always",
    "block-closing-brace-empty-line-before": "never",
    "block-closing-brace-newline-after": "always",
    "block-closing-brace-newline-before": "always-multi-line",
    "block-closing-brace-space-before": "always-single-line",
    "block-no-empty": true,
    "block-opening-brace-newline-after": "always-multi-line",
    "block-opening-brace-space-after": "always-single-line",
    "block-opening-brace-space-before": "always",
    "color-function-notation": "legacy",
    "color-hex-case": "lower",
    "color-hex-length": "short",
    "color-no-invalid-hex": true,
    "comment-empty-line-before": [ "always", {
        "except": ["first-nested"],
        "ignore": ["stylelint-commands"]
    } ],
    "comment-no-empty": true,
    "comment-whitespace-inside": "always",
    "custom-property-empty-line-before": [ "always", {
          "except": [
            "after-custom-property",
            "first-nested"
          ],
        "ignore": [
            "after-comment",
            "inside-single-line-block"
        ]
    } ],
    "declaration-bang-space-after": "never",
    "declaration-bang-space-before": "always",
    "declaration-block-no-duplicate-properties": [ true, {
        "ignore": ["consecutive-duplicates-with-different-values"]
    } ],
    "declaration-block-no-redundant-longhand-properties": true,
    "declaration-block-no-shorthand-property-overrides": true,
    "declaration-block-semicolon-newline-after": "always-multi-line",
    "declaration-block-semicolon-space-after": "always-single-line",
    "declaration-block-semicolon-space-before": "never",
    "declaration-block-single-line-max-declarations": 1,
    "declaration-block-trailing-semicolon": "always",
    "declaration-colon-newline-after": "always-multi-line",
    "declaration-colon-space-after": "always-single-line",
    "declaration-colon-space-before": "never",
    "declaration-empty-line-before": [ "always", {
        "except": [
            "after-declaration",
            "first-nested"
        ],
        "ignore": [
            "after-comment",
            "inside-single-line-block"
        ]
    } ],
    "function-calc-no-unspaced-operator": true,
    "function-comma-newline-after": "always-multi-line",
    "function-comma-space-after": "always-single-line",
    "function-comma-space-before": "never",
    "function-linear-gradient-no-nonstandard-direction": true,
    "function-max-empty-lines": 0,
    "function-name-case": "lower",
    "function-parentheses-newline-inside": "always-multi-line",
    "function-parentheses-space-inside": "never-single-line",
    "function-whitespace-after": "always",
    "indentation": 2,
    "keyframe-declaration-no-important": true,
    "length-zero-no-unit": true,
    "max-empty-lines": 1,
    "media-feature-colon-space-after": "always",
    "media-feature-colon-space-before": "never",
    "media-feature-name-case": "lower",
    "media-feature-name-no-unknown": true,
    "media-feature-parentheses-space-inside": "never",
    "media-feature-range-operator-space-after": "always",
    "media-feature-range-operator-space-before": "always",
    "media-query-list-comma-newline-after": "always-multi-line",
    "media-query-list-comma-space-after": "always-single-line",
    "media-query-list-comma-space-before": "never",
    "no-empty-source": true,
    "no-eol-whitespace": true,
    "no-extra-semicolons": true,
    "no-descending-specificity": null,
    "no-invalid-double-slash-comments": true,
    "no-missing-end-of-source-newline": true,
    "number-leading-zero": "never",
    "number-no-trailing-zeros": true,
    "property-case": "lower",
    "property-no-unknown": true,
    "selector-attribute-brackets-space-inside": "never",
    "selector-attribute-operator-space-after": "never",
    "selector-attribute-operator-space-before": "never",
    "selector-combinator-space-after": "always",
    "selector-combinator-space-before": "always",
    "selector-descendant-combinator-no-non-space": true,
    "selector-list-comma-newline-after": "always",
    "selector-list-comma-space-before": "never",
    "selector-max-empty-lines": 0,
    "selector-pseudo-class-case": "lower",
    "selector-pseudo-class-no-unknown": [ true, { "ignorePseudoClasses": ["global", "local"] }],
    "selector-pseudo-class-parentheses-space-inside": "never",
    "selector-pseudo-element-case": "lower",
    "selector-pseudo-element-colon-notation": "single",
    "selector-pseudo-element-no-unknown": true,
    "selector-type-case": "lower",
    "selector-type-no-unknown": true,
    "shorthand-property-no-redundant-values": true,
    "string-no-newline": true,
    "string-quotes": "single",
    "unit-case": "lower",
    "unit-no-unknown": true,
    "value-list-comma-newline-after": "always-multi-line",
    "value-list-comma-space-after": "always-single-line",
    "value-list-comma-space-before": "never",
    "value-list-max-empty-lines": 0,
    "function-no-unknown": [true, { "ignoreFunctions": "calc-fontsize" }]
  }
}
3, vscode 配置
   3.1 安装stylelint 插件
   3.2  配置settings.json
   3.3 添加配置项
        "editor.codeActionsOnSave": {
        "source.fixAll": true,
        "source.fixAll.stylelint": true,
    }

3.2 配置settings.json