pnpm的menorepo项目配置eslint和prettier

1、使用eslint脚手架安装相关依赖并生成对应配置文件

pnpm dlx @eslint/create-config

自动安装了以下几个插件

生成的配置文件如下所示，和csdn其他教程里面不一样，这是因为eslint升级成9.xx版本了

需要node版本20以上

eslint 9.x 升级或使用指南，eslint.config.js 配置，包含 react、typescript、prettier 等常用配置升级迁移 | kshao-blog-前端知识记录

遇到uni is notdefintd

如下配置globals

2、安装prettier

pnpm add eslint-plugin-prettier prettier eslint-config-prettier -D

项目下面新增prettier.config.js

// prettier.config.js
/**
 * @type {import('prettier').Config}
 * @see https://www.prettier.cn/docs/options.html
 */
export default {
  trailingComma: 'all',
  singleQuote: true,
  semi: false,
  printWidth: 80,
  arrowParens: 'always',
  proseWrap: 'always',
  endOfLine: 'lf',
  experimentalTernaries: false,
  tabWidth: 2,
  useTabs: false,
  quoteProps: 'consistent',
  jsxSingleQuote: false,
  bracketSpacing: true,
  bracketSameLine: false,
  jsxBracketSameLine: false,
  vueIndentScriptAndStyle: false,
  singleAttributePerLine: false,
}

注意vscode安装这个插件

2、配置husky

npx husky install

.husky/_/pre-commit

#!/usr/bin/env sh
echo "zhixing husky"
pnpm run fix

3、配置commit-lint

pnpm add -D commitizen @commitlint/config-conventional @commitlint/cli

packages.json里面增加

  "commitlint": {
    "extends": [
      "@commitlint/config-conventional"
    ],
    "rules": {
      "header-max-length": [
        2,
        "always",
        108
      ],
      "type-empty": [
        2,
        "never"
      ],
      "type-enum": [
        2,
        "always",
        [
          "feat",
          "fix",
          "init",
          "docs",
          "style",
          "refactor",
          "perf",
          "test",
          "revert",
          "build",
          "chore",
          "ci"
        ]
      ]
    }
  }

无需其他配置了，在commit时自动会触发commlitint

参考：2024年｜ESlint9+Prettier从0开始配置教程2024年，教你从0开始认识和配置ESlint。本文将从0开 - 掘金

使用 Vue 3 + Vite + TypeScript 配合 Prettier、ESLint 和 Husky 的详细指南 - 掘金