Monorepo可复用代码格式化工程配置包

工具

步骤 1: 创建配置包

  1. 初始化新项目：
1
pnpm init

注意：因使用 monorepo 环境为了避免将根目录打包发布，需要将 package.json 中有关包的信息都删除一下。

  1. 创建配置文件： 在项目根目录下创建以下配置文件：

  2. 文件结构目录：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
yan-lint-config/
|--packages
|--|--eslint
|--|--|--index.js
|--|--|--LICENSE
|--|--|--package.json
|--|--|--README.md
|----prettier
|--|--|--index.js
|--|--|--LICENSE
|--|--|--package.json
|--|--|--README.md
|----stylelint
|--|--|--index.js
|--|--|--LICENSE
|--|--|--package.json
|--|--|--README.md
|--.gitignore
|--package.json
|--pnpm-workspace.yaml
|--README.md

  1. package.json

    1
    2
    3
    4
    //注意根目录下的package.json不要存放任何与包相关的字段，防止monorepo环境下将根目录也打包进去
    {
      "workspaces": ["packages/**"]
    }

步骤 2: 编写可扩展的配置

  • ESLint: 使用 "extends" 字段允许其他项目通过引用此包来继承其基本规则。例如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// packages/eslint/index.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: ["eslint:recommended", "plugin:vue/vue3-essential"],
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["vue"],
  rules: {
    "vue/html-self-closing": "off",
    "vue/multi-word-component-names": "off",
    "vue/max-attributes-per-line": "off",
    "vue/singleline-html-element-content-newline": "off",
  },
  globals: {
    defineExpose: "readonly",
    defineOptions: "readonly",
  },
};
  • stylelint: 使用 "extends" 字段允许其他项目通过引用此包来继承其基本规则。例如：
1
2
3
4
5
6
7
8
9
10
// packages/stylelint/index.js
module.exports = {
  extends: ["stylelint-config-standard", "stylelint-config-rational-order"],
  rules: {
    "block-no-empty": true,
    "rule-empty-line-before": "never",
    "unit-allowed-list": ["px", "vw", "vh", "%"],
  },
  plugins: ["stylelint-order", "stylelint-config-rational-order/plugin"],
};
  • prettier: prettier 的使用与 eslint 和 stylelint 的使用方式有稍许差别并不支持 extends。例如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// packages/prettier/index.js
module.exports = {
  printWidth: 120,
  tabWidth: 2, // 指定每个缩进级别的空格数
  useTabs: false, // 用tab替代space缩进
  semi: false, // 在语句末尾打印分号
  trailingComma: "none", // 多行时尽可能打印尾随逗号
  singleQuote: false, // 使用单引号而不是双引号
  bracketSpacing: true, // 在对象文字中打印括号之间的空格
  jsxBracketSameLine: false,
  endOfLine: "auto",
  arrowParens: "avoid", // 在单个箭头函数参数周围包括括号。
  singleAttributePerLine: false, // 属性单行显示
  htmlWhitespaceSensitivity: "ignore",
};

步骤 3: 发布到 npm

  1. 打包: 确保配置文件被包含在发布的 npm 包内。通常情况下，.gitignore 和 .npmignore 不应忽略这些配置文件。如果使用的是 JavaScript 配置文件（如 .eslintrc.js），请确保它们是 CommonJS 模块（即使用 module.exports）以便在 Node.js 环境中正确加载。
  2. 编写 README: 提供详细的文档说明如何在项目中安装和使用这个配置包，包括必要的依赖安装（如 eslint, prettier, stylelint 及其相关插件）以及如何在项目的配置文件中引用您的包。
  3. 测试与验证: 在几个不同的项目中试用您的配置包，确保它能够正常工作且满足预期效果。
  4. 发布: 登录 npm 账户，然后运行 npm publish 或 yarn publish 将配置包发布到 npm 注册表。记得选择合适的版本号遵循 Semantic Versioning (SemVer)。
  5. 注意事项：
    • 发布作用域包，先在 npm 上创建组织，选择 Unlimited public packages
    • 将所有子包命名方式更改为@namespace/xxx 格式
    • 注意根目录 package.json 不要包含任何与包发布相关的信息，否则会将根目录也当成包发布
    • 发布包时使用如下命令避免将根目录也发布：pnpm publish –recursive packages/*

步骤 4: 在其他项目中引用与使用

一旦配置包发布成功，其他项目就可以通过 npm 安装并引用它：

1
npm install --save-dev @namespace/xxx

然后，在目标项目的相应配置文件中引用您的包：

  • ESLint:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // .eslintrc.cjs
    module.exports = {
      extends: [
        // 引入您的配置包
        "@namespace/eslint-config",
        // 可能还有其他扩展或自定义规则
      ],
      // ...
    };

  • Prettier: 如果您的配置包仅包含 Prettier 配置文件，用户可以直接使用；如果还包含 ESLint 规则，则可能需要额外处理。通常情况下，Prettier 的配置相对独立，无需显式“继承”。

    1
    2
    3
    4
    //package.json
    {
      "prettier": "@namespace/prettier-config"
    }

  • Stylelint:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // .stylelintrc.js
    module.exports = {
      extends: [
        // 引入您的配置包
        "@namespace/stylelint-config",
        // 可能还有其他扩展或自定义规则
      ],
      // ...
    };

若拙沪漂前端攻城狮

醉后不知天在水，满船清梦压星河。