Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

list-staged taking more than 1/4 of day to just check few files in windows #1297

Open
syadav711 opened this issue May 12, 2023 · 6 comments
Open

list-staged taking more than 1/4 of day to just check few files in windows #1297

syadav711 opened this issue May 12, 2023 · 6 comments

Comments

@syadav711
Copy link

Description

I have configured lint-staged.config.js

Configuration 1

module.exports = {
  '*.{ts,tsx,css}': ['prettier . --write'],
  '*.{ts,tsx}': ['next lint . --cache --fix --ext .tsx --ext .ts', () => 'yarn ts']
};

Configuration 2

module.exports = {
  'src/**/*.{ts,tsx,css}': ['prettier . --write'],
  'src/**/*.{ts,tsx}': ['next lint . --cache --fix --ext .tsx --ext .ts', () => 'yarn ts']
};
expand to view package.json contents 
{
  "name": "confidential",
  "private": true,
  "description": "confidential",
  "homepage": "confidential",
  "repository": {
    "type": "git",
    "url": "confidential"
  },
  "moduleDirectories": [
    "node_modules",
    "src"
  ],
  "author": "confidential",
  "keywords": [
    "react",
    "next",
    "nextjs",
    "typescript",
    "jest",
    "template",
    "starter",
    "css-modules",
    "eslint",
    "prettier",
    "husky",
    "commit-lint"
  ],
  "browserslist": [
    ">0.2%",
    "not dead",
    "not IE 11"
  ],
  "engines": {
    "node": ">=14",
    "yarn": ">=1.22.5"
  },
  "nyc": {
    "excludeAfterRemap": true,
    "include": "src/**/*.tsx",
    "instrumentation": {
      "exclude": [
        "src/pages",
        "src/**/*.styles.tsx",
        "src/contexts",
        "src/services",
        "**/*/*.styles.tsx",
        "src/utils"
      ]
    },
    "lines": {
      "global": 80
    },
    "statements": {
      "global": 80
    },
    "functions": {
      "global": 0
    },
    "branches": {
      "global": 0
    }
  },
  "scripts": {
    "start": "cross-env NODE_OPTIONS=\"--max-http-header-size=81000 -r @newrelic/next\" next start",
    "test": "cross-env APP_ENV=test nyc --clean jest --coverage",
    "test:watch": "cross-env APP_ENV=test jest --watchAll",
    "test:ci": "cross-env NODE_ENV=test TARGET_ENV=test yarn test:cov",
    "test:update": "jest --updateSnapshot",
    "postinstall": "husky install",
    "ts": "tsc",
    "storybook": "storybook dev",
    "build-storybook": "storybook build",
    "debug:dev": "cross-env TARGET_ENV=development NODE_OPTIONS=\"--max-http-header-size=81000 -r @newrelic/next\" next dev",
    "debug:qa": "cross-env TARGET_ENV=qa APP_ENV=qa NODE_OPTIONS=\"--max-http-header-size=81000 -r @newrelic/next\" next dev",
    "debug:prod": "cross-env TARGET_ENV=production NODE_OPTIONS=\"--max-http-header-size=81000 -r @newrelic/next\" next dev",
    "debug:local": "cross-env TARGET_ENV=local  NODE_OPTIONS=\"--max-http-header-size=81000 -r @newrelic/next\" next dev",
    "build:local": "cross-env TARGET_ENV=local next build",
    "build:dev": "cross-env TARGET_ENV=development next build",
    "build:qa": "cross-env TARGET_ENV=qa next build",
    "build:prod": "cross-env TARGET_ENV=production next build",
    "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc.json",
    "lint": "eslint . -c ./.eslintrc.json",
    "lint:fix": "eslint . --fix -c ./.eslintrc.json",
    "test:cov": "yarn test && nyc report --check-coverage --reporter=lcov --lines 40"
  },
  "dependencies": {
    "@apollo/client": "^3.7.1",
    "@emotion/cache": "^11.10.3",
    "@emotion/react": "^11.10.4",
    "@emotion/server": "^11.10.0",
    "@emotion/styled": "^11.10.4",
    "@fontsource/noto-sans-thai": "^4.5.10",
    "@googlemaps/react-wrapper": "^1.1.35",
    "@googlemaps/typescript-guards": "^2.0.3",
    "@heroicons/react": "^1.0.6",
    "@mui/icons-material": "^5.10.3",
    "@mui/material": "^5.10.5",
    "@mui/styles": "^5.10.7",
    "@newrelic/next": "^0.4.0",
    "@next/bundle-analyzer": "^13.1.6",
    "@segment/analytics-next": "^1.43.0",
    "@sentry/nextjs": "^7.38.0",
    "amazon-cognito-identity-js": "^5.2.11",
    "apollo-link-timeout": "^4.0.0",
    "aws-amplify": "^4.3.37",
    "aws-sdk": "^2.1231.0",
    "babel-plugin-superjson-next": "^0.4.4",
    "class-validator": "^0.14.0",
    "classnames": "^2.3.1",
    "currency-symbol-map": "^5.1.0",
    "dayjs": "^1.11.6",
    "dotenv": "^16.0.3",
    "env-cmd": "^10.1.0",
    "fast-equals": "^4.0.3",
    "firebase": "^9.14.0",
    "formik": "^2.2.9",
    "graphql": "^16.6.0",
    "i18next": "^21.9.1",
    "install": "^0.13.0",
    "isomorphic-dompurify": "^0.23.0",
    "js-cookie": "^3.0.1",
    "lodash": "^4.17.21",
    "lodash-es": "4.17.20",
    "mui-one-time-password-input": "^1.0.3",
    "newrelic": "^9.10.2",
    "next": "^12.2.0",
    "next-i18next": "^12.0.0",
    "nextjs-progressbar": "^0.0.16",
    "npm": "^8.19.2",
    "nyc": "^15.1.0",
    "react": "^18.2.0",
    "react-circle-chart": "^1.0.4",
    "react-content-loader": "^6.2.0",
    "react-device-detect": "^2.2.2",
    "react-dom": "^18.2.0",
    "react-html-parser": "^2.0.2",
    "react-if": "^4.1.4",
    "react-imask": "^6.4.3",
    "react-responsive-carousel": "^3.2.23",
    "react-slick": "^0.29.0",
    "react-toastify": "^9.0.8",
    "react-virtuoso": "^2.18.0",
    "schema-dts": "^1.1.2",
    "sharp": "^0.31.2",
    "slick-carousel": "^1.8.1",
    "slugify": "^1.6.5",
    "superjson": "^1.11.0",
    "uuid": "^9.0.0",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@babel/core": "^7.19.0",
    "@commitlint/cli": "^17.0.3",
    "@commitlint/config-conventional": "^17.0.3",
    "@storybook/addon-actions": "^7.0.8",
    "@storybook/addon-essentials": "^7.0.8",
    "@storybook/addon-interactions": "^7.0.8",
    "@storybook/addon-links": "^7.0.8",
    "@storybook/nextjs": "^7.0.8",
    "@storybook/react": "^7.0.8",
    "@storybook/testing-library": "^0.1.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.2.1",
    "@types/dompurify": "^2.3.4",
    "@types/google.maps": "^3.50.4",
    "@types/jest": "^29.5.0",
    "@types/js-cookie": "^3.0.2",
    "@types/lodash-es": "4.17.7",
    "@types/node": "17.0.29",
    "@types/react": "18.0.14",
    "@types/react-html-parser": "^2.0.2",
    "@types/react-slick": "^0.23.10",
    "@types/react-test-renderer": "^18.0.0",
    "@types/uuid": "^8.3.4",
    "@typescript-eslint/eslint-plugin": "^5.37.0",
    "@typescript-eslint/parser": "^5.37.0",
    "autoprefixer": "^10.4.8",
    "babel-jest": "^29.5.0",
    "babel-loader": "^8.2.5",
    "babel-plugin-istanbul": "^6.1.1",
    "babel-plugin-styled-components": "^2.0.7",
    "compression-webpack-plugin": "^10.0.0",
    "env-cmd": "^10.1.0",
    "eslint": "^8.38.0",
    "eslint-config-next": "^12.2.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-import-resolver-typescript": "^3.5.1",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jest": "^27.2.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-storybook": "^0.6.12",
    "eslint-plugin-testing-library": "^5.5.1",
    "eslint-plugin-unused-imports": "^2.0.0",
    "husky": "^7.0.4",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^29.5.0",
    "jest-environment-jsdom": "^28.1.1",
    "lint-staged": "^13.0.3",
    "postcss": "^8.4.16",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-preset-env": "^7.8.1",
    "prettier": "^2.7.1",
    "react-test-renderer": "^18.2.0",
    "storybook": "^7.0.8",
    "ts-jest": "^29.1.0",
    "tsconfig-paths-webpack-plugin": "^4.0.0",
    "type-fest": "^2.19.0",
    "typescript": "^4.7.4"
  }
}

Notes

  • Configuration 1 works fine in mac it take 1 to 2 minutes(max) and shows the result
  • Configuration 1 and Configuration 2 both taking more than 3 hours to get completed and show result

Debug Logs

expand to view 
yarn run v1.22.19
$ "C:\D drive\dmy\node_modules\.bin\lint-staged"
✔ Preparing lint-staged...
❯ Running tasks for staged files...
  ❯ lint-staged.config.js — 15 files
    ✔ src/**/*.{ts,tsx,css} — 13 files
    ❯ src/**/*.{ts,tsx} — 13 files
      ⠹ next lint . --cache --fix --ext .tsx --ext .ts
      ◼ yarn ts
◼ Applying modifications from tasks...
◼ Cleaning up temporary files...

Environment

  • OS: Windows 10 Enterprise - 21H2
  • Node.js: 16.16.0
  • lint-staged:"^13.0.3"
@iiroj
Copy link
Member

iiroj commented May 12, 2023

Hey,

looks like you have eg. prettier . in your config. The dot means to run prettier on all files, basically. The point of lint-staged is to pass the list of staged files to your command, but now you are linting all files, for every staged files.

can you try removing the . from your commands and see if it helps?

@syadav711
Copy link
Author

removing . from prettier making first step to get run fast, but second step is still taking time, any fix for that ?

@iiroj
Copy link
Member

iiroj commented May 12, 2023

There's a dot in the other command as well: next lint .

@syadav711
Copy link
Author

but when i remove that, it throws me error
Couldn't find a pages directory.

image

@plbstl
Copy link

plbstl commented Jun 24, 2023

You can change Configuration 2 to:

const lintCommand = (filenames) =>
  `next lint --cache --fix --file ${filenames.map((f) => path.relative(process.cwd(), f)).join(' --file ')}`

module.exports = {
  'src/**/*.{ts,tsx,css}': ['prettier --write'],
  'src/**/*.{ts,tsx}': [lintCommand, () => 'yarn ts'],
}

Since prettier and eslint are both making changes to typescript files at the same time, there can be race conditions. A better config may be:

const lintCommand = (filenames) =>
  `next lint --cache --fix --file ${filenames.map((f) => path.relative(process.cwd(), f)).join(' --file ')}`

module.exports = {
  'src/**/*.{ts,tsx}': ['prettier --write', lintCommand, () => 'yarn ts'],
  'src/**/*.{css}': ['prettier --write'],
}

@okonet
Copy link
Collaborator

okonet commented Jun 24, 2023

https://nextjs.org/docs/app/building-your-application/configuring/eslint#lint-staged

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@okonet @iiroj @syadav711 @plbstl