husky+stylelint+eslint+commitlint

一个项目涉及两个及以上的人员同时开发时，就应该进行项目规范设置。开发人员统一代码格式和提交规范。另外，代码提交前进行最基本的语法校验，是一个健康的项目最基本的功能。

node  16.20.2
prettier 3.3.3
node-sass 8.0.0
sass-loader 10.0.2

```js

```js

1. 统一开发人员的编辑器风格

1. 安装VSCode插件

2. 添加.editorconfig文件

在编辑器右侧项目目录中右键，点击“Generate.editorconfig”

可以根据代码习惯，设置功能，该文件中的设置优先级会高于vscode中的设置。

# EditorConfig is awesome: https://EditorConfig.org
# top-most EditorConfig file
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = crlf
charset = utf-8
trim_trailing_whitespace = false
insert_final_newline = false

2. 统一代码格式化

1.安装vscode插件

2. 安装依赖包

npm install prettier@3.3.3
// 如果node版本是14， 则安装prettier@2.8.8

3. 配置文件

// .prettierrc.js

module.exports = {
    // 箭头函数参数周围加上括号
    "arrowParens": "always",
    // 大括号与代码在同一行
    "bracketSameLine": true,
    // 大括号内部不加空格
    "bracketSpacing": false,
    // 分号结尾
    "semi": true,
    // 不使用实验性三元表达式
    "experimentalTernaries": false,
    // 使用单引号
    "singleQuote": true,
    // JSX属性值使用单引号
    "jsxSingleQuote": true,
    // 保留引号样式
    "quoteProps": "preserve",
    // 尾随逗号保留
    "trailingComma": "all",
    // 不强制单个属性换行
    "singleAttributePerLine": false,
    // HTML空格敏感性为css
    "htmlWhitespaceSensitivity": "css",
    // Vue脚本和样式不缩进
    "vueIndentScriptAndStyle": false,
    // 文本不换行
    "proseWrap": "never",
    // 不插入格式化标记
    "insertPragma": false,
    // 打印宽度为80个字符
    "printWidth": 80,
    // 不要求格式化标记
    "requirePragma": false,
    // 使用Tab缩进
    // "useTabs": false,
    // 嵌入语言格式自动
    "embeddedLanguageFormatting": "auto",
    // Tab宽度为4个空格
    // "tabWidth": 4
  }

4.vscode设置保存自动格式化

新建.vscode文件夹，下添加settings.json

{
	// =======================下面是配置prettier格式化的setting===================
	// 指定哪些文件不参与搜索
	"search.exclude": {
	  "**/node_modules": true,
	  "dist": true,
	  "build": true,
	  "yarn.lock": true
	},
	// 保存自动格式化
	"editor.formatOnSave": true,
	"[javascript]": {
	  "editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[javascriptreact]": {
	  "editor.defaultFormatter": "esbenp.prettier-vscode"
	},
  }

3. 代码静态检查ESlint

1.安装依赖包

npm install eslint lint-staged husky
npx husky-init

2. pre-commit

将.husky/pre-commit 中内容修改如下：

npx lint-staged

3. 配置文件.eslintrc.js

package.json中增加配置

"lint-staged": {
        "*.{ts,tsx,js,jsx}": [
            "prettier --write",
            "eslint --config .eslintrc.js"
        ]
    }

// .eslintrc.js
module.exports = {
    'extends': ['eslint:recommended', 'plugin:react/recommended'],
    'parserOptions': {
        'ecmaFeatures': {
            'jsx': true,
        },
        'ecmaVersion': 12,
        'sourceType': 'module',
    },
    'plugins': ['react', 'react-hooks'],
    'rules': {
        //空行不能够超过2行
        'no-multiple-empty-lines': [1, {'max': 2}],
        //变量未引用的警告
        'no-unused-vars': 'warn',
        //prop-types
        'react/prop-types': [0],
        //声明名称
        'react/display-name': [0],
        'no-undef': 'error',
        'no-useless-escape': 'error',
        'import/no-extraneous-dependencies': [0], // 禁止使用无关的包
        'semi': ['error', 'always'], //写分号
        'react-hooks/rules-of-hooks': 'error', // 检查 Hook 的规则
        'react-hooks/exhaustive-deps': 'warn', // 检查 effect 的依赖
    },
};

4. 安装依赖

 npm install eslint-plugin-react@latest --save-dev --force
 npm install eslint-plugin-react-hooks@latest --save-dev --force

4.增加忽略文件

.eslintignore
.prettierignore