React18 + Vite + TS + Eslint + Husky 从0到1搭建项目_react18全家桶搭建项目

项目创建

npm create vite@latest
1

 cd vite-react
  npm install
  npm run dev
1
2
3

执行完以上命令

目录结构

启动后界面展示

代码规范

添加Eslint

npm i eslint -D
npx eslint --init

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

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

终端执行:

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

添加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 的冲突
1
2
3
4
5
6
7
8
9
10
11
12

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
1
2
3
4
5
6

husky 使用

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

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,
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169

3.2 配置settings.json