使用Yarn Workspaces时如何扩展ESLint配置？

问题背景 #

我用Yarn Workspaces管理仓库里的三个包：shared、app-1和app-2。shared包里有个.eslintrc.js配置：

module.exports = {
    root: true,
    env: {
        node: true,
        browser: true,
        es6: true,
    },
    // 其他规则
}

在app-1和app-2里试了两种方式扩展这个配置，都没用：
第一种写法：

module.exports = {
    extends: ["@superapp/shared/.eslintrc.js"],
};

第二种写法：

module.exports = {
    extends: ["@superapp/shared"],
};

我一度以为必须把shared包发布到npm才能让ESLint识别并扩展它的配置，但其实不用，按下面的方法就能解决。

具体解决步骤 #

1. 给shared包配置ESLint入口 #

打开shared包的package.json，添加eslintConfig字段，直接指向你的配置文件：

{
  "name": "@superapp/shared",
  // 其他已有的字段比如version、scripts等
  "eslintConfig": "./.eslintrc.js"
}

或者也可以把main字段改成指向.eslintrc.js，不过用eslintConfig更明确，不会影响包的其他用途。

2. 调整app包的extends配置 #

直接用包名扩展就行，Yarn Workspaces会自动帮你链接本地包，不用发布到npm：

module.exports = {
    extends: ["@superapp/shared"],
};

3. 备选方案：用相对路径扩展 #

如果不想改shared的package.json，也可以直接用相对路径指向shared的配置文件，比如在app-1的.eslintrc.js里写：

module.exports = {
    extends: ["../shared/.eslintrc.js"],
};

这种方式简单直接，但如果后续目录结构变动，就得跟着改路径，不如包名方式灵活。

注意点 #

• 确认shared包的package.json里的name确实是@superapp/shared，和app包extends里的名称完全一致，大小写都不能错。
• shared包配置里的root: true可能会有影响：ESLint会把它当成根配置，不再向上查找。如果想让app包在继承shared配置的基础上再加自己的规则，可以把shared里的root: true删掉；或者在app包的配置里也加root: true，这样会完全继承shared的配置，再叠加自己的规则。

内容的提问来源于stack exchange，提问作者howard wolowitz