02_ESlint+Prettier+Husky+Lint-staged+Stylelint+Commitlint

前言

前面已经安装了一些基础的三方包，像样式路由等。这个文章主要记录下自己给项目增加的一些规范性的内容。

ESlint

作用：ESlint主要的作用是检查代码规范的一个工具。

其实在vite创建React项目时就已经内置了ESlint，虽然不像创建 vue项目中那么全面，但是也是有了一个基础版本，这个就不多说了。

这块更多的是它和Prettier配合时需要调整一些内容。下面呢就是我的项目中.eslintrc.cjs的配置和一些配置的解释（这块我其实是懒得一个个去抽了，各位不要见怪！）。

配置：

.eslintrc.cjs

cjs 复制代码

module.exports = {
  root: true,//告诉 ESLint 这是配置的根，ESLint 将停止在父级目录中寻找配置文件。
  env: { browser: true, es2020: true },
  //指定代码的运行环境，这里配置了 browser: true（可以使用浏览器全局变量）和 es2020: true（启用 ES2020 语法支持）。
  extends: [
    'eslint:recommended',
    // 这是 ESLint 官方推荐的规则集，包含了一组核心规则，旨在捕获 JavaScript 中的常见问题，如未使用的变量、语法错误等。启用这个配置有助于提高代码质量和避免基本的错误。
    'plugin:@typescript-eslint/recommended',
    //这个配置来自 @typescript-eslint/eslint-plugin，它是一个 ESLint 插件，专为 TypeScript 设计。这个推荐规则集包含了一组针对 TypeScript 代码的规则，旨在捕获类型安全以外的常见问题，如命名约定、接口定义等。
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
    // 这也是来自 @typescript - eslint / eslint - plugin 的一个配置，但它包含了一组需要 TypeScript 类型检查器支持的规则。这意味着这些规则会使用 TypeScript 编译器的信息来进行更深入的代码分析，以捕获潜在的类型错误和其他类型相关的问题。这个配置提供了更严格的类型安全检查。
    'plugin:react-hooks/recommended',
    // 这个配置来自 eslint - plugin - react - hooks，它是专门为 React Hooks 设计的 ESLint 插件。这个推荐规则集包含了一组规则，用于确保您正确地使用 React Hooks，如规则 rules - of - hooks 和 exhaustive - deps，旨在帮助开发者避免在使用 Hooks 时遇到的常见问题。
    'plugin:prettier/recommended', //配置prettier和eslint的适配问题
    // 这个配置来自 eslint - plugin - prettier 和 eslint - config - prettier。它首先通过 eslint - plugin - prettier 将 Prettier 作为 ESLint 规则运行，这意味着任何 Prettier 可以修复的代码样式问题都会作为 ESLint 问题报告。其次，通过 eslint - config - prettier 关闭所有与 Prettier 冲突的 ESLint 规则，确保 ESLint 和 Prettier 之间的兼容性，让 Prettier 负责代码样式的问题，而 ESLint 负责代码质量的问题。
  ],
  parser: '@typescript-eslint/parser',
  // '@typescript-eslint/parser'：指定 ESLint 使用的解析器，这里使用的是 TypeScript ESLint 解析器，允许 ESLint 理解 TypeScript 语法。
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: true,
    tsconfigRootDir: __dirname,
    extraFileExtensions: ['.less'],
  },
  //配置解析器选项。ecmaVersion: 'latest' 表示使用最新的 ECMAScript 标准，sourceType: 'module' 表示代码使用 ES 模块，project: true 和 tsconfigRootDir: __dirname 配合使用，指示解析器使用项目的 tsconfig.json 文件，extraFileExtensions: ['.less'] 允许在解析时考虑 .less 文件。
  plugins: ['react-refresh', 'prettier'],
  rules: {
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto',
      },
    ],
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/no-unsafe-member-access': 'off', //禁止成员访问类型 any 为 的值。
    '@typescript-eslint/no-unsafe-return': 'off', //不允许从函数返回具有类型的 any 值。
    '@typescript-eslint/no-floating-promises': 'off',
    '@typescript-eslint/no-explicit-any': 'off', //禁止键入。 any
  },
};

Prettier

作用：Prettier是一个代码格式化工具，主要用于自动格式化代码以保持一致的风格，减少团队成员之间的风格争论。

执行： npm i prettier eslint-config-prettier eslint-plugin-prettier -D

作用：

eslint-config-prettier用于关闭与Prettier冲突的ESLint规则
eslint-plugin-prettier用于将Prettier作为ESLint规则运行并在发现格式错误时报告。

执行完成之后呢我们需要在.eslintrc.cjs文件中添加一些规则，让ESlint和Prettier配合起来（这个请看上面）。 Prettier有两个文件.prettierrc.cjs和.prettierignore 第一个文件是填写我们想要的规则，第二个文件的作用是让我们规避那些文件。

配置：

.prettierrc.cjs

cjs 复制代码

module.exports = {
  printWidth: 80, //单行长度
  tabWidth: 2, //缩进长度
  useTabs: false, //使用空格代替tab缩进
  semi: true, //句末使用分号
  singleQuote: true, //使用单引号
  quoteProps: 'as-needed', //仅在必需时为对象的key添加引号
  jsxSingleQuote: true, // jsx中使用单引号
  trailingComma: 'all', //多行时尽可能打印尾随逗号
  bracketSpacing: true, //在对象前后添加空格-eg: { foo: bar }
  // jsxBracketSameLine: true, //多属性html标签的'>'折行放置 //这个已经被删除 和eslint一起使用会出现 冲突
  arrowParens: 'always', //单参数箭头函数参数周围使用圆括号-eg: (x) => x
  requirePragma: false, //无需顶部注释即可格式化
  insertPragma: false, //在已被preitter格式化的文件顶部加上标注
  proseWrap: 'preserve', //不知道怎么翻译
  htmlWhitespaceSensitivity: 'ignore', //对HTML全局空白不敏感
  vueIndentScriptAndStyle: false, //不对vue中的script及style标签缩进
  endOfLine: 'auto', //结束行形式
  embeddedLanguageFormatting: 'auto', //对引用代码进行格式化
};

.prettierignore

cjs 复制代码

# 忽略需要格式化的文件
node_modules
.DS_Store
dist
dist-ssr
*.local
node_modules/*
**/*.html

然后还需要修改VS Code的配置文件，将编辑器的保存自动格式化的功能打开

.vscode/settings.json

json 复制代码

    {
        "editor.formatOnSave": true,
        "prettier.configPath": ".prettierrc.cjs",
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }

Stylelint

Stylelint是一个用于检测CSS代码中潜在问题和风格错误的工具。它可以帮助我们规避CSS上的一些错误和风格的统一。

执行：npm i stylelint stylelint-config-standard stylelint-less stylelint-prettier -D

作用：

stylelint-config-standard 提供了一组标准的Stylelint规则，用于检查和强制执行CSS代码的最佳实践和风格。
stylelint-less 为Less文件提供了特定的Stylelint规则，用于检查和强制执行Less代码的最佳实践和风格。
stylelint-prettier 帮助确保Stylelint和Prettier在项目中协同工作，避免它们之间的冲突，并确保代码风格的一致性

配置：

.stylelintrc.cjs

cjs 复制代码

module.exports = {
    "extends": ['stylelint-config-standard', 'stylelint-prettier/recommended'],
    "plugins": ["stylelint-less"],
    "rules": {
        "at-rule-no-unknown": null,
        "color-no-invalid-hex": true,
        "less/color-no-invalid-hex": true,
        "selector-class-pattern": null,
        "no-empty-source": null,
        'selector-pseudo-class-no-unknown': [
            true,
            {
                ignorePseudoClasses: ["global"],
            },
        ],
        // "selector-class-pattern": "false",
        // "no-empty-source": "off"
    }
}

半路总结

上面的这些内容，都是为了解决我们在开发过程中，规避容易出现错误和风格统一的工具。在使用过程中还需要我们通过VS Code的插件来为我们提供支持。下面是我使用的VS Code的插件

ESlint(ESlint)
Prettier(Prettier - Code formatter)
Stylelint(Stylelint)

另外再补充一些我们可以手动执行的scripts命令

package.json

js 复制代码

"scripts": {
    ...
    "lint:jsx": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "lint:format": "prettier --write .",
    "lint:style": "stylelint \"**/*.{less,css}\"",
   ...
  },

往下的内容主要是为了帮助我们在提交代码时自动去执行我们设定的规则。当我们的代码不符合预期的设置时给我们提示错误。

Husky + lint-staged

Husky

作用：用于在Git提交或其他Git钩子事件发生时运行预定义的脚本，例如在提交代码前运行代码检查或测试。我安装的是V9版本，在安装上和V8的命令还是有区别的，具体的可以看下官方文档 Release v9.0.1 · typicode/husky (github.com)

命令：

npx husky init

echo "npm test" > .husky/pre-commit

注意：window系统上 echo 建议使用 Git Bash Here 要不然会出现因为文件编码造成文件不能执行的问题。参照（juejin.cn/post/733235...

json 复制代码

"scripts": {
    ...
    "prepare": "husky"
  },

Lint-staged

作用：用于在Git暂存区中的文件上运行预定义的脚本，通常用于在提交代码前对暂存的文件运行代码检查或格式化工具。命令：npm i lint-staged -D

json 复制代码

   "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "src/**/*.{css,scss,less}": [
      "stylelint"
    ]
  },

还记得我们的.husky/pre-commit文件吗？现在我们需要将 npm test 替换为 npx lint-staged 现在我们就可以在git提交代码时进行测试，在终端会将样式和代码做一个检测。有错误就会提示出来。如下：

Commitlint

作用：用于规范化和验证提交消息的格式，以确保团队成员遵循统一的提交消息规范。

命令：

npm i @commitlint/cli @commitlint/config-conventional -D

echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.cjs

echo "npx --no -- commitlint --edit \$1" > .husky/commit-msg

格式：

js 复制代码

type(scope?): subject  #scope is optional; multiple scopes are supported (current delimiter options: "/", "\" and ",")

在具体使用中一般的格式为：

chore: run tests on travis ci
fix(server): send cors headers
feat(blog): add comment section

常用的type值

build
chore
ci
docs
feat
fix
perf
refactor
revert
style
test

总结

以上内容就是项目中添加的规范性的内容，写的有点乱，思绪不是好（还没从过年的喜悦中回归现实哈哈哈哈哈，后面用空再修改下。。。）具体的配置可以看github仓库里面的代码 react-vite-template。

关于一些ESlint和其他需要配置的内容也欢迎各位大佬给些指导意见，我对这些也不是很通透，都是看着文档一步步试出来的。