配置化eslint

书接上回，使用了turbo接管项目，从官方的example里初始化生活一个项目后，查看了文件结构

其中的eslint-config-custom很引人注意，然后检查项目内部模块引用的部分

• 检查eslint-config-custom
  • package.json 中的name为eslint-config-custom, main为index.js
  • index.js

    • packages/eslint-config.custom/index.js

      // packages/eslint-config.custom/index.js
      module.exports = {
        extends: ["next", "turbo", "prettier"],
        rules: {
          "@next/next/no-html-link-for-pages": "off",
        },
        parserOptions: {
          babelOptions: {
            presets: [require.resolve("next/babel")],
          },
        },
      };
      

• 调用方的配置

  • apps/docs/.eslintrc.js

    module.exports = {
      root: true,
      extends: ["custom"],
    };
    

Q: custom 这个名字是哪里来的

官方文档的位置是在

• **EXTEND ESLINT > Ways to Extend ESLint > Shareable Configs > Share Configuration**

The module name must take one of the following forms:

• Begin with eslint-config-, such as eslint-config-myconfig.
• Be an npm scoped module. To create a scoped module, name or prefix the module with @scope/eslint-config, such as @scope/eslint-config or @scope/eslint-config-myconfig.

结论就是

• 对于eslint-config-myconfig 类型， extends的值可以为"eslint-config-myconfig" 或"myconfig"
• 对于scoped下的模块,
  • "@scope/eslint-config" 对应的extends值为"@scope" 或"@scope/eslint-config"
  • "@scope/eslint-config-myconfig" 对应的值为"@scope/myconfig" 或"@scope/eslint-config-myconfig"