抽离eslint+stylelint+prettier+ts+lint-staged+release-it的配置(二)

124 阅读2分钟

接上一篇文章 使用turborepo搭建企业级monorepo项目(开篇) - 掘金 (juejin.cn)

在传统的项目结构中,每次初始化一个新项目都可能显得相当繁琐,尤其是在处理各种格式化和配置文件时。通常,我们需要花费大量时间仅仅在复制和粘贴一堆依赖项。为了解决这个问题,我们可以考虑将这些通用配置提炼出来,并将它们存放在一个专门的文件夹中。这样做不仅可以简化新项目的初始化过程,还有助于统一管理依赖项和它们的升级。

例如,我们可以创建一个名为 config 的文件夹,用于存放我们的相关配置文件。这个文件夹需要在我们的 pnpm-workspace 文件中。随着公司业务的稳定和成熟,我们甚至可以考虑将这些配置包提炼到公司自己的 npm 上,这样在启动新项目时,就无需再安装大量依赖,同时也能更好地管理依赖的升级。

pnpm-workspace.yaml 文件中,我们可以这样配置:

yamlCopy code
packages:
  - "apps/*"
  - "packages/*"
  - "config/*"

通过这种方式,我们可以大大简化项目的初始化和维护过程,使其更加高效和一致。

配置文件夹示例


这样的结构不仅优化了项目的管理,还为团队成员提供了一个清晰、统一的配置参考,有助于提高整体的开发效率和项目的可维护性。

eslint-config

image.png 分成了几个文件 其中base是最基础的ts配置,base-ts添加了 @typescript-eslint/recommended-requiring-type-checking这个包,静态检查能力更强了。但是报错提示也就更多了 strict主要是本项目config这些内部工具使用。另外添加了airbnb的规范,不喜欢的可以删掉

prettier-config

可以给每个子项目添加单独的.prettierrc.js也可以在项目根目录下配置一份统一的。

lint-staged-config

react或nest

module.exports = {
  '*.{js,jsx,ts,tsx}': ['prettier --write', 'eslint --fix'],
  // '*.{ts,tsx}': ['tsc --noEmit --skipLibCheck'],
  '{!(package)*.json,*.code-snippets,.!(browserslist)*rc}': ['prettier --write--parser json'],
  'package.json': ['prettier --write'],
  '*.{scss,less,styl,html}': ['prettier --write', 'stylelint --fix'],
  '*.md': ['prettier --write'],
}

vue

module.exports = {
  // '*.{js,jsx,ts,tsx}': ['prettier --write', 'eslint --fix', 'vue-tsc --noEmit --skipLibCheck'],
  '*.{js,jsx,ts,tsx}': ['prettier --write', 'eslint --fix'],
  '{!(package)*.json,*.code-snippets,.!(browserslist)*rc}': ['prettier --write--parser json'],
  'package.json': ['prettier --write'],
  '*.vue': ['prettier --write', 'eslint --fix', 'stylelint --fix'],
  '*.{scss,less,styl,html}': ['prettier --write', 'stylelint --fix'],
  '*.md': ['prettier --write'],
}

为了区分vue和其他ts项目单独做了区分

release-it

const version = '${version}'
const packageName = process.env.npm_package_name
console.log(packageName, 'packageName')
const scope = packageName?.split('/')[1]
/**
 * @see https://medium.com/valtech-ch/monorepo-semantic-releases-db114811efa5   https://github.com/release-it/release-it
 * @type {{github: {release: boolean, releaseName: string}, git: {commitMessage: string, requireCommits: boolean, commitsPath: string, tagName: string, requireCommitsFail: boolean, push: boolean}, plugins: {"@release-it/conventional-changelog": {path: string, preset: string, infile: string, gitRawCommitsOpts: {path: string}}}, npm: {publish: boolean, versionArgs: string[]}, gitlab: {release: boolean, releaseName: string}, hooks: {"before:git:release": string[]}}}
 */
module.exports = {
  plugins: {
    '@release-it/conventional-changelog': {
      preset: 'angular',
      infile: 'CHANGELOG.md', //用于 conventional-changelog.infile 设置自定义文件。默认为 "CHANGELOG.md"
      path: '.',
      gitRawCommitsOpts: {
        path: '.',
      },
    },
  },
  git: {
    push: true, //用于 git.push 设置是否应推送到远程。默认为 true
    tagName: `${packageName}-v${version}`, //用于 git.tagName 设置自定义标签名称。默认为 "${version}"
    commitsPath: '.', //用于 git.commitsPath 设置自定义路径。默认为 "."
    commitMessage: `feat(${scope}): released version v${version} [no ci]`, //用于 git.commitMessage 设置自定义提交消息。默认为 "chore(release): ${version}"
    requireCommits: true, //用于 git.requireCommits 设置是否需要提交。默认为 true
    requireCommitsFail: false, //用于 git.requireCommitsFail 设置是否应在没有提交时失败。默认为 false
  },
  npm: {
    publish: true,
    versionArgs: ['--workspaces false'], //用于 npm.versionArgs 设置自定义参数。默认为 ["--force"]
  },
  github: {
    release: true, //用于 github.release 设置是否应发布到 GitHub。默认为 false
    releaseName: `${packageName}-v${version}`,
  },
  gitlab: {
    release: false,
    releaseName: `${packageName}-v${version}`,
  },
  hooks: {
    'before:git:release': ['mvm-update', 'git add --all'],
  },
}

需要注意的是如果公司的是gitlub自建的项目gitlab这个选项的release设置为false就行了。其他的都设置为false

示例

badlym/liuchengjin-monorepo (github.com)

参考资料

vbenjs/vue-vben-admin: A modern vue admin. It is based on Vue3, vite and TypeScript. It's fast! (github.com)

medium.com/valtech-ch/…

github.com/release-it/…