React ts项目配置Eslint+StyleLint+prettier+husky+lint-staged规范

下载相关依赖

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier eslint-plugin-prettier stylelint stylelint-config-css-modules stylelint-config-standard stylelint-less stylelint-order  -D

版本号如下

{
    "@typescript-eslint/eslint-plugin": "^5.57.0",
    "@typescript-eslint/parser": "^5.57.0",
    "eslint": "^8.36.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.2",
    "prettier": "^2.8.7",
    "stylelint": "^14.6.1",
    "stylelint-config-css-modules": "^4.1.0",
    "stylelint-config-standard": "^25.0.0",
    "stylelint-less": "^1.0.6",
    "stylelint-order": "^5.0.0",
}

eslint: ESLint的核心代码
@typescript-eslint/parser：ESLint的解析器，用于解析typescript，从而检查和规范Typescript代码
@typescript-eslint/eslint-plugin：这是一个ESLint插件，包含了各类定义好的检测Typescript代码的规范
prettier：prettier插件的核心代码
eslint-config-prettier：解决ESLint中的样式规范和prettier中样式规范的冲突，以prettier的样式规范为准，使ESLint中的样式规范自动失效
eslint-plugin-prettier：将prettier作为ESLint规范来使用
stylelint：stylelint的核心代码
stylelint-config-css-modules：提供了一个预设的规则集合，用于帮助开发者检查或修复CSS模块化开发中的问题。使用该包的目的是为了提高代码的可维护性和一致性，避免样式命名冲突与重复，并且能够帮助开发者把握CSS模块化开发的最佳实践。
stylelint-config-standard：预设的Stylelint配置文件，其定义了一组约定俗成的代码规则和最佳实践，可以帮助开发者避免一些常见的CSS错误和问题，保持代码风格的统一性和可维护性
stylelint-less：对Less文件进行语法检查和规则校验。它能够识别Less中的变量、混合函数等特性，并提供了相应的规则校验
stylelint-order：用于样式表（CSS、Sass、Less等）中规则的排序和风格检查工具

配置相关文件

1、新建.eslintrc.js文件

module.exports = {
  parser: "@typescript-eslint/parser",
  extends: [
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "eslint-config-prettier",
    "plugin:prettier/recommended",//覆盖eslint
  ], //使用推荐的React代码检测规范
  plugins: ["@typescript-eslint"],
  env: {
    browser: true,
    node: true,
  },
  settings: {
    //自动发现React的版本，从而进行规范react代码
    react: {
      pragma: "React",
      version: "detect",
    },
  },
  parserOptions: {
    //指定ESLint可以解析JSX语法
    ecmaVersion: 2019,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
    },
  },
  rules: {},
};

2、新建.prettierrc.js文件

module.exports = {
  "printWidth": 120,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": false,
  "jsxBracketSameLine": true,
  "arrowParens": "avoid",
  "insertPragma": true,
  "tabWidth": 4,
  "useTabs": false  
};

3、新建.stylelintrc.js文件

module.exports = {
  processors: [],
  plugins: ['stylelint-order'],
  extends: ['stylelint-config-standard', 'stylelint-less', 'stylelint-config-css-modules'],
  rules: {
    'no-empty-source': true,
    'selector-class-pattern': null,
    'selector-id-pattern': null,
    'at-rule-no-unknown': null,
    'order/properties-order': [
      // 规则顺序
      'position',
      'top',
      'right',
      'bottom',
      'left',
      'z-index',
      'display',
      'float',
      'width',
      'height',
      'max-width',
      'max-height',
      'min-width',
      'min-height',
      'padding',
      'padding-top',
      'padding-right',
      'padding-bottom',
      'padding-left',
      'margin',
      'margin-top',
      'margin-right',
      'margin-bottom',
      'margin-left',
      'margin-collapse',
      'margin-top-collapse',
      'margin-right-collapse',
      'margin-bottom-collapse',
      'margin-left-collapse',
      'overflow',
      'overflow-x',
      'overflow-y',
      'clip',
      'clear',
      'font',
      'font-family',
      'font-size',
      'font-smoothing',
      'osx-font-smoothing',
      'font-style',
      'font-weight',
      'line-height',
      'letter-spacing',
      'word-spacing',
      'color',
      'text-align',
      'text-decoration',
      'text-indent',
      'text-overflow',
      'text-rendering',
      'text-size-adjust',
      'text-shadow',
      'text-transform',
      'word-break',
      'word-wrap',
      'white-space',
      'vertical-align',
      'list-style',
      'list-style-type',
      'list-style-position',
      'list-style-image',
      'pointer-events',
      'cursor',
      'background',
      'background-color',
      'border',
      'border-radius',
      'content',
      'outline',
      'outline-offset',
      'opacity',
      'filter',
      'visibility',
      'size',
      'transform',
    ],
  },
}

以上便可以在项目中启用Eslint+prettier+styleLint来规范项目代码，如果在项目需忽略指定文件的检查则可分别配置.eslintignore、.stylelintignore文件

另外我们往往需要在git提交前检查我们的代码是否符合规范，因此我们借助husky和lint-staged来创建hook

安装依赖

npm install husky lint-staged -D

版本号如下：

{
   "husky": "^8.0.3",
    "lint-staged": "^13.2.0",
}

在项目根目录执行husky install生成.husky目录

npx husky install

其他同事拉取项目时，他们可能会忘记执行上面的命令启用 git hook。但有一个命令他们是一定会执行的，就是执行 npm install 或 yarn 去安装依赖。
于是我们需要利用 npm script 的生命周期脚本，加上一个 prepare。prepare 会在 install 之后执行。

// package.json
{
  "scripts": {
   // ...
    "prepare": "husky install"
  }
}

创建hook

npx husky add .husky/pre-commit "npx --no-install lint-staged"

创建的脚本内容如下：

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx --no-install lint-staged

在package.json中新建内容如下：

// package.json
{
  "lint-staged": {
    "src/**/*.{ts,tsx}": [
      "eslint --max-warnings=0"
    ],
    "src/**/*.{css,less}": [
      "stylelint"
     ]
  }
}

至此，则 lint-staged 就设置完成，当再次使用 git commit 提交代码的时候，就会先执行代码检查、样式表检查之类的动作，并且是增量代码检查。

跳过 git hooks

如果我们想要跳过 commit 相关的hook，可以使用在脚本命令中加上 --no-verify 参数，如下所示：

git commit -m '跳过hook' --no-verify

如果我们使用vscode编辑器，可配置保存自动通过eslint格式化和styleLint代码
下载vscode插件 ESlint 、 prettier、styleLint 然后配置settings.json文件

{
    "editor.codeActionsOnSave": {
        "source.fixAll.stylelint": true,
        "source.fixAll.eslint": true 
    },
   "eslint.validate": [ //确定校验准则
        "javascript",
        "javascriptreact",
        "html",
        "vue",
        "typescript",
        "typescriptreact",
    ],
}

另外我们可以通过配置.editorconfig 定义项目中代码格式的一些规则

root = true

[*]
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
end_of_line = lf

[*.md]
trim_trailing_whitespace = false

思考：

1、.editorconfig 和 eslint 不会冲突，因为它们解决的问题不同。
.editorconfig 是一种跨编辑器的配置文件格式，用于定义代码风格、缩进、换行等基本格式规范，是在编辑器级别上管理代码风格的工具。
eslint 是一种 JavaScript 代码静态分析工具，用于检测代码中的潜在问题和错误，并推荐一些最佳实践，以提高代码质量。
虽然它们有一些相似之处，但 .editorconfig 和 eslint 都是解决不同的问题，并可以一起使用。通常情况下，.editorconfig 中的一些格式规范可以与 eslint 中的规则进行补充。
2、.editorconfig 和 Prettier 不会冲突，它们可以共存。.editorconfig 用于定义项目中代码格式的一些规则，例如缩进、tab 大小等。而 Prettier 则是一个代码格式化工具，它可以自动将代码格式化成符合规范的形式。
在使用 Prettier 的情况下，你可以在 .prettierrc (Prettier 配置文件) 中指定代码格式化的规则，然后在 .editorconfig 中定义项目中的其他代码格式规则。这两个工具可以一起使用，以保持代码风格的一致性。

问题

.editorconfig和prettier有规则冲突时如何处理

当.editorconfig和prettier之间出现规则冲突时，可以尝试以下方法：
禁用.editorconfig中与prettier冲突的规则：在editorconfig文件中将与prettier冲突的规则注释掉或删除，使editorconfig中的规则与prettier一致。
调整prettier配置：根据.editorconfig文件中的规则调整prettier的配置，以确保两者的规则一致。
使用eslint作为代码格式化工具：eslint可以与prettier配合使用，避免规则冲突的问题。可以在.eslintrc文件中设置代码格式化相关的规则，然后通过eslint进行代码格式化。
增加特定的prettier规则：可以在prettier配置中针对.editorconfig中的规则增加特定的配置项，以确保两者的规则一致。例如，在prettier配置中增加tabWidth选项来匹配.editorconfig中的缩进规则。
总之，处理.editorconfig和prettier的规则冲突需要根据具体情况进行调整，可以采取多种方法，以达到使两者规则一致的目的。