monorepo Yarn workspaces - shared esLint and Prettier configs

user_9674900 0
Viewed 3547

How someone could share esLint/prettier config across Yarn workspaces(no NPM, Lerna and etc).

I try to keep things pretty high level but I have tried to create a separate package for esLint config and consume it in project-packages(by installing it and extending it), however I ran into two issues:

  • eslint command not found: do I have to install the eslint to each project-package that consumes the dependencies of the eslint-config package?
    • I assume by installing eslint-config into book/package.json, eslint should be installed. I am not sure why I get eslint command not found.
  • Just to debug, I installed eslint inside book/package.json project-package and it doesn't seem to have the understanding of the environments that are set in eslint-config. for example: "Jest": { "testEnvrionment": "Node" } is being ignored in each project.
fictional-project
├── config-packages
│   ├── eslint-config
│   │   └── package.json
│   └── settings
│       └── package.json
├── package.json
├── project-packages
│   └── book
│       ├── book-function-as-a-service.js
│       └── package.json
└── src
    └── index.js
monorepo prettier yarnpkg eslint node.js
1 Answers

You do indeed need eslint installed in the package which is using your shared config. It may work without it in some instances but you should be explicit with yarn so you can ensure the binary will always be present/symlinked. I am not certain about why eslint is not picking up your jest environment settings. Are you defining your eslint config in your package.json? I have a similar setup in my monorepo (Yarn v3.x). It may be that the your config package needs to be explicitly exporting the config in a module. Hopefully this helps you, assuming you haven't figured it out already.

.
├── libs
│   └── eslint-config-react
│       ├── index.js
│       └── package.json
│
└── packages
    └── some-package
        ├── .eslintrc.js
        └── package.json

./libs/eslint-config-react

The index.js is a typical eslint config and the package.json looks like this:

{
    "name": "@my-workspace/eslint-config-react",
    "main": "index.js",
    "dependencies": {
        "eslint": "7.32.0",
        "eslint-config-next": "11.1.3",
        "eslint-config-prettier": "8.3.0",
        "next": "11.1.3",
        "typescript": "4.4.4"
    }
}

./packages/some-package

package.json

{
    "name": "some-package",
    "scripts": {
        "lint": "eslint .",
    },
    "devDependencies": {
        "@my-workspace/eslint-config-react": "workspace:*",
        "eslint": "7.32.0",
    }
}

.eslintrc.js

module.exports = {
    extends: ['@my-workspace/eslint-config-react'],
};
user_56026650
Related