sudo-suhas / lint-staged-multi-pkg Goto Github PK

Thank you for creating this repo! It helped me a lot!

You documented everything very well, I only have one question: why is lerna not run in parallel? Is it because this might mess up the logs?

Perhaps it would be nice to add the reasoning to the README.md?

I just clone the repo, change the eslintrc: no-console: off -> no-console: error.

then

$ npx lerna bootstrap
$ git add .
$ git commit -m "test"

the result is:

husky > pre-commit (node v8.17.0)
lerna notice cli v3.13.1
lerna info Executing command in 2 packages: "yarn run precommit"
say-bye: yarn run v1.22.1
say-bye: $ lint-staged
say-bye: Running tasks for lib/.js [started]
say-bye: Running tasks for lib/.js [skipped]
say-bye: → No staged files match lib/.js
say-bye: Done in 0.46s.
say-hi: yarn run v1.22.1
say-hi: $ lint-staged
say-hi: Running tasks for src/.js [started]
say-hi: Running tasks for src/.js [skipped]
say-hi: → No staged files match src/.js
say-hi: Done in 0.43s.
lerna success run Ran npm script 'precommit' in 2 packages in 1.3s:
lerna success - say-bye
lerna success - say-hi
[test 7ade78b] test
2 files changed, 2 insertions(+), 2 deletions(-)

I tried under win10/osx/ubuntu-18.04, they ware same.

What should the new package.json look like for root and each package?

Is this still the same for root package.json or should it be changed? Should everything be removed from the package package.json files since it's now handled by root instead?

  "husky": {
    "hooks": {
      "pre-commit": [
        "lerna run --concurrency 1 --stream precommit"
      ]
    }
  },

Basically, I want the following to occur for all packages:

  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "npm run lint:fix",
      "git add"
    ],
    "{*.{json,md}}": [
      "prettier --write",
      "git add"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": [
        "npm run type-check && lint-staged"
      ]
    }
  },

Hi @sudo-suhas ,

Thank you for creating such a great example. I am new to eslint and trying to lint my code using lint-staged package with pre-commit hook. Frontend project is react+ typescript, common is nodejs project and backend is NestJS project. My project structure is as below:

|-- .gitignore
|-- package.json
|-- frontend
|   |- .eslintrc.yml
|   |- .package.json
|   |   |-- src
|   |   |   --app.tsx
|   |   |   --index.ts
|-- backend
|   |- .eslintrc.yml
|   |- .package.json
|   |   |-- src
|   |   |   --app.tsx
|   |   |   --index.ts
|-- common
|   |- .eslintrc.yml
|   |- .package.json
|   |   |-- src
|   |   |   --app.tsx
|   |   |   --index.ts

My root package.json is as below:

"devDependencies": {
    "eslint": "~6.6.0",
    "husky": "~3.0.7",
    "lint-staged": "~9.4.0"
 },
"husky": {
    "hooks": {
      "pre-commit": "lint-staged",
    }
  },
  "lint-staged": {
    "common/**/*.{ts,tsx}": [
      "eslint --fix",
      "git add"
    ],
    "backend/**/*.{ts,tsx}": [
      "eslint --fix",
      "git add"
    ],
    "frontend/**/*.{ts,tsx}": [
      "eslint --fix",
      "git add"
    ]
  }

But, when I try to commit my staged files having linter errors, I am getting an error as below:

husky > pre-commit (node v12.18.0)
  ↓ Stashing changes... [skipped]
    → No partially staged files found...
  ❯ Running tasks...
    ↓ Running tasks for common/**/*.{ts,tsx} [skipped]
      → No staged files match common/**/*.{ts,tsx}
    ↓ Running tasks for backend/**/*.{ts,tsx} [skipped]
      → No staged files match server/**/*.{ts,tsx}
    ❯ Running tasks for frontend/**/*.{ts,tsx}
      ✖ eslint --fix
        git add

✖ eslint --fix found some errors. Please fix them and try committing again.

Oops! Something went wrong! :(

ESLint: 6.6.0.

ESLint couldn't find the plugin "eslint-plugin-react".

(The package "eslint-plugin-react" was not found when loaded as a Node module from the directory "/Projects/demoproject.)

It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

npm install eslint-plugin-react@latest --save-dev

The plugin "eslint-plugin-react" was referenced from the config file in "frontend/.eslintrc.js".

If you still can't figure out the problem, please stop by https://gitter.im/eslint/eslint to chat with the team.
husky > pre-commit hook failed (add --no-verify to bypass)

What am I doing wrong here?

I wonder how to best execute lint-staged on files outside of the packages? E.g. for running prettier on the root package.json. I guess it would be best to put the lint-staged config to the root package.json and use exclude glob patterns to exclude the lerna packages folder?

I checked out the description and installed husky, lint-staged, prettier, stylelint in project root, and configured hooks in .lintstagedrc.yml, however they didn't work.

My dir structure:

|-- .git
|-- .gitignore
|-- .lintstagedrc.yml
|-- .prettierrc
|-- node_modules
|-- package.json
|-- yarn.lock
|
|-- my-project-1
|
`-- my-project- 2
    |-- package.json
    |-- src
    |   |-- a
    |   |     |-- index.ts
    |   |     `-- index.less
    |   `-- b
    |          `-- index.ts
    `-- yarn.lock

.lintstagedrc.yml

linters:
  my-project-2/**/*.{ts,tsx,json}:
    - prettier --config ./.prettierrc --write
  my-project-2/**/*.{css,less}:
    - stylelint --fix

I tried to add husky configs in package.json and it still didn't solve the problem:

{
   "husky": {
      "hooks": {
        "pre-commit": "lint-staged"
      }
   },
   ...
}

I wonder if I missed something, or we should only install these dependencies and configure .lintstagedrc in project root without some extra works?

Great example repo! I think it would also be useful to document how adding eslint and prettier would be added to this as well.

For example, you likely have one .prettierrc file because you want your JS code to read the same throughout, but you could have multiple .eslintrc files for each project based on different settings.

Here's another option to use lint-staged at the project root, but still calling linters at package-level. This respects the linter and formatter configs/ignore files of each package.

const package = require('./package.json');
const { workspaces } = package; // or manually define workspaces as ['package-a', 'package-b']
const pattern = '**/*.{js,jsx,ts,tsx}';
const linter = 'node_modules/.bin/eslint --fix';

const rules = Object.fromEntries(workspaces.map(workspace => [`${workspace}/${pattern}`, `./${workspace}/${linter}`]))

module.exports = {
  // results into...
  // 'package-a/**/*.{js,jsx,ts,tsx}': 'package-a/node_modules/.bin/eslint --fix',
  // 'package-b/**/*.{js,jsx,ts,tsx}': 'package-b/node_modules/.bin/eslint --fix'
  ...rules
}

What do you think?

root folder

"lerna": "3.11.0",
"husky": "^1.3.1"

lerna.json

"packages": [
    "pack1",
    "pack2"
  ],

pack 1 and pack2 have this in package.json in scripts

"precommit": "lint-staged"

With .lintstagedrc.yml

linters:
  "src/main/js/**/*.js":
    - "eslint src/main/js --fix"       
    - "prettier --print-width 120 --tab-width 4 --trailing-comma none --write src/main/js/**/*.js"                    
    - "git add"

After commit nothing. I mean no any messages/output

It works only from terminal.
I mean i need run
git add -A
npm run -s precommit

But if i do normat flow for commit - nothing

Can this example be updated having in mind the latest version of husky? t would be very helpful.

Hi,
I have project with react and express but it is not wrapped using lerna.
project structure:

project
├── client/
│   ├── src/
│   ├── package.json
│   ├── index.js
│   └── utils.js
├── cli.js
├── src/
├── index.js
├── config.js
└── package.json

So outside folder contains all express related files and client folder has create-react-react(typescript) project. I have separate eslint config for both. express eslint is in root and react's eslint is in client folder.

my scripts in base package.json:

"lint": "eslint .",
"lint:fix": "eslint . --fix",
"client:lint": "cd client && npm run lint",
"client:lint:fix": "cd client && npm run lint:fix",

my husky and lint-staged config:

"lint-staged": {
    "./**/*": [
      "npm run lint:fix"
    ],
    "./client/**/*.{js,jsx,ts,tsx}": [
      "npm run client:lint:fix"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },

what I need is,

1. if file is from base express directory then it should run first task on it for linting and then add
2. and if file is from client folder then it should use client lint command to fix

so in my configuration, it is working fine for express files but sometimes it is failing in client related files.
it says,

Prevented an empty git commit!

Because even if my react files have changes and linting errors it is not committing those files after running the lint fixes.

Can anyone please help me with the correct lint-staged config

while committing to this branch it is giving errors in .eslintignore etc file which are ignored like following, so I pushed it with --no-verify flag

Thank you

I'm trying to follow the instructions and I'm not using lerna and to "Manually call precommit in each package".

I'm following the instructions in section "Manually call precommit in each package", where I have a .lintstagedrc.yml in each project's own folder. lint-staged and husky has been installed at the project root. I've got husky setup with npm-run-all and husky is working with the precommit hook.

However, my hook doesn't seem to get called when I stage my files.

I think I'm missing some more configuration. Can you please provide more details on your instructions for the section "Manually call precommit in each package"?

Thank you very much!

Hi,

It seems that with the proposed structure precommit is run in each package even those that don't have staged changes. Any idea on how to improve this?