eslint-plugin-prettier is very slow

[juzi214032]

What version of eslint are you using?
v7.2.0
What version of prettier are you using?
v2.0.5
What version of eslint-plugin-prettier are you using?
v3.1.3
Please paste any applicable config files that you're using (e.g. .prettierrc or .eslintrc files)

{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:promise/recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": [
    "import",
    "promise"
  ],
  "env": {
    "node": true,
    "es2017": true,
    "browser": true,
    "commonjs": true
  },
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "globals": {
    "Component": true,
    "Page": true,
    "wx": true,
    "App": true
  },
  "ignorePatterns": [
    "dist/*",
    "examples/dist/*",
    "src/common/async-validator/*",
    "examples/pages/filter/components/wemark"
  ],
  "rules": {
    "space-before-function-paren": "off",
    "indent": ["error", 2,{
      "SwitchCase":1
    }],
    "quotes": [
      "error", "single", {
        "allowTemplateLiterals": false
      }
    ],
    "semi": ["error"],
    "no-console": [
      "warn", {
        "allow": ["info", "warn", "error"]
      }
    ],
    "no-undef": "error",
    "no-useless-escape": "off",
    "eqeqeq": ["error", "always"],
    "promise/always-return": "off"
  }
}

{
  "singleQuote": true,
  "trailingComma": "none",
  "arrowParens": "avoid",
  "quoteProps": "preserve",
  "printWidth": 120
}

What source code are you linting?
JavaScript、JSON、LESS
What did you expect to happen?
less time
What actually happened?
It takes a long time

[BPScott]

That is indeed a long time compared to your other files.

• Does it take that long if you run prettier over those files instead of going through eslint? I'm wondering if this is an issue with prettier itself rather than the eslint plugin.
• What happens if you run eslint with the --debug flag? Are there any particular files that take longer than expected time to process? I wonder if there are any files that prettier finds tough to parse - I've saw that before if you accidentally try and run large files through prettier.

[varemenos]

I was reading a tweet regarding this today and thought I should give it a try, I was surprised to see the results (this is a React Native, Typescript codebase).

TIMING=1 npm run lint:

Rule                              | Time (ms) | Relative
:---------------------------------|----------:|--------:
prettier/prettier                 |  1333.671 |    91.6%
react/no-string-refs              |    46.890 |     3.2%
@typescript-eslint/no-unused-vars |     7.696 |     0.5%
semi                              |     4.267 |     0.3%
react-native/no-inline-styles     |     4.207 |     0.3%
react-hooks/exhaustive-deps       |     3.590 |     0.2%
react-hooks/rules-of-hooks        |     3.248 |     0.2%
no-obj-calls                      |     2.784 |     0.2%
no-div-regex                      |     2.560 |     0.2%
no-undef-init                     |     2.220 |     0.2%

cat package.json | grep -E "eslint|prettier":

    "@react-native-community/eslint-config": "^2.0.0",
    "@typescript-eslint/eslint-plugin": "^3.2.0",
    "@typescript-eslint/parser": "^3.2.0",
    "eslint": "^7.1.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-react-hooks": "^4.0.4",
    "prettier": "^2.0.5",

cat .prettierrc.js:

module.exports = {
  bracketSpacing: true,
  jsxBracketSameLine: true,
  singleQuote: true,
  trailingComma: 'all',
  semi: false,
};

cat .eslintrc.js:

module.exports = {
  root: true,
  extends: [
    '@react-native-community',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended',
    'plugin:react-hooks/recommended',
  ],
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  rules: {
    semi: [2, 'never'],
  },
  overrides: [
    {
      files: ['**/*.test.js', '**/*.test.jsx', '**/*.test.ts', '**/*.test.tsx'],
      env: {
        jest: true,
      },
    },
  ],
}

I'm not accustomed with prettier cli's API so I don't know how to trigger the Timing=1 to compare the results, neither could I capture the output of eslint --debug's output in order to do anything meaningful with the results (they show up on the screen too fast and then are not piped to stdout npm run lint -- --debug > res.txt).

[BPScott]

neither could I capture the output of eslint --debug's output in order to do anything meaningful with the results

You'll want to redirect stderr in addition to stdout to capture the debugging information:
https://stackoverflow.com/questions/637827/redirect-stderr-and-stdout-in-bash

[janhesters]

Seeing the same thing:

Rule                              | Time (ms) | Relative
:---------------------------------|----------:|--------:
prettier/prettier                 | 11580.842 |    57.7%
import/namespace                  |  4941.682 |    24.6%
react/no-deprecated               |   465.174 |     2.3%
import/no-extraneous-dependencies |   450.004 |     2.2%
react/no-direct-mutation-state    |   312.252 |     1.6%
import/no-unresolved              |   237.725 |     1.2%
simple-import-sort/sort           |   185.009 |     0.9%
react/no-string-refs              |   181.877 |     0.9%
react/require-render-return       |   160.600 |     0.8%
no-unused-vars                    |   159.425 |     0.8%

package.json

{
   "eslint": "6.8.0",
    "eslint-config-prettier": "6.9.0",
    "eslint-import-resolver-babel-module": "5.1.1",
    "eslint-plugin-import": "2.19.1",
    "eslint-plugin-jsx-a11y": "6.2.3",
    "eslint-plugin-prettier": "3.1.2",
    "eslint-plugin-react": "7.17.0",
    "eslint-plugin-react-hooks": "2.3.0",
    "eslint-plugin-simple-import-sort": "5.0.0",
    "eslint-plugin-testcafe": "0.2.1",
    "prettier": "1.19.1",
}

.eslintrc.js

const typescriptEslintRecommendedRules = require('@typescript-eslint/eslint-plugin').configs.recommended.rules;

const config = {
"env": {
  "browser": true,
  "commonjs": true,
  "es6": true,
  "node": true
},
"extends": [
  "eslint:recommended",
  "plugin:react/recommended",
  "plugin:import/errors",
  "plugin:import/warnings",
  "plugin:jsx-a11y/recommended",
  "plugin:prettier/recommended"
],
"parser": "babel-eslint",
"parserOptions": {
  "ecmaFeatures": {
    "jsx": true
  },
  "ecmaVersion": 2019,
  "sourceType": "module"
},
"plugins": ["react-hooks", "simple-import-sort"],
"rules": {
  "import/order": "off",
  "jsx-a11y/label-has-associated-control": "off",
  "jsx-a11y/no-onchange": "off",
  "jsx-a11y/anchor-is-valid": [
    "error",
    {
      "components": ["Link"],
      "specialLink": ["hrefLeft", "hrefRight"],
      "aspects": ["invalidHref", "preferButton"]
    }
  ],
  "react/react-in-jsx-scope": "off",
  "react/display-name": "off",
  "react-hooks/rules-of-hooks": "error",
  "react-hooks/exhaustive-deps": "warn",
  "simple-import-sort/sort": "error",
  "import/no-extraneous-dependencies": ["error", { "devDependencies": false }]
},
"settings": {
  "react": {
    "version": "detect"
  },
  "import/resolver": {
    "babel-module": {},
    "node": {
      "extensions": [".js", ".jsx", ".ts", ".tsx"]
    }
  }
},
"overrides": []
};

config.overrides.push({
files: ["**/*.ts", "**/*.tsx"],
parser: "@typescript-eslint/parser",
parserOptions: {
  ecmaFeatures: {
    jsx: true
  },
  ecmaVersion: 2019,
  sourceType: 'module',
  project: './tsconfig.json',
},
extends: config.extends.concat(["plugin:@typescript-eslint/recommended"]),
plugins: config.plugins.concat(['@typescript-eslint']),
rules: Object.assign({}, config.rules, typescriptEslintRecommendedRules, {
  "@typescript-eslint/no-this-alias": "warn",
  "@typescript-eslint/camelcase": "warn",
  "@typescript-eslint/no-explicit-any": "off",
  "@typescript-eslint/explicit-function-return-type": "off",
  "@typescript-eslint/no-unused-vars": "off",
  "@typescript-eslint/no-use-before-define": "off",
  "@typescript-eslint/camelcase": "off",
  "@typescript-eslint/no-empty-function": "off",
  "for-direction": "off",
  "no-useless-escape": "off",
  "react/prop-types": "off",
})
});

// Allow test files to import devDependencies
config.overrides.push({
files: ["**/*.test.js", "**/*.test.ts", "**/*.test.tsx", "functional-tests/**/*.js"],
rules: {
  "import/no-extraneous-dependencies": ["error", { "devDependencies": true }]
}
});

config.overrides.push({
"files": ["functional-tests/**/*.js"],
"plugins": [
  "testcafe"
],
"extends": "plugin:testcafe/recommended"
});

module.exports = config;

[smddzcy]

Same issue here. It's fast when we run Prettier via the VSCode plugin esbenp.prettier-vscode, but it's extremely slow when we run it with ESLint.

Rule                              | Time (ms) | Relative
:---------------------------------|----------:|--------:
prettier/prettier                 |  8142.741 |    45.4%
import/no-named-as-default        |  2217.457 |    12.4%
import/no-extraneous-dependencies |  1190.158 |     6.6%
import/named                      |   712.467 |     4.0%
import/no-unresolved              |   405.091 |     2.3%
react/sort-comp                   |   303.724 |     1.7%
react/no-deprecated               |   278.299 |     1.6%
react/jsx-no-bind                 |   240.232 |     1.3%
import/no-duplicates              |   240.053 |     1.3%
import/order                      |   227.723 |     1.3%

Dependencies:

"devDependencies": {
    "@calm/eslint-plugin-react-intl": "^1.4.1",
    "@umijs/fabric": "^2.1.1",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.3.1",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-sort-keys-fix": "^1.1.1",
    "fs-readdir-recursive": "^1.1.0",
    "husky": "^4.2.5",
    "jest": "^26.1.0",
    "jest-expect-message": "^1.0.2",
    "lerna": "^3.22.1",
    "lint-staged": "^10.2.11",
    "prettier": "^2.0.4",
    "pretty-quick": "^2.0.1",
    "stylelint": "^13.6.1",
    "stylelint-prettier": "^1.1.2"
  },

ESLint config:

const OFF = 0;
const WARNING = 1;
const ERROR = 2;

module.exports = {
  extends: [require.resolve('@umijs/fabric/dist/eslint')],
  plugins: ['prettier', 'import', 'jest'],

  globals: {
    REACT_APP_ENV: true,
  },

  env: {
    node: true,
    browser: true,
  },

  rules: {
    '@typescript-eslint/no-unused-vars': [
      'error',
      { varsIgnorePattern: '^_', argsIgnorePattern: '^_' },
    ],
    '@typescript-eslint/naming-convention': OFF,
    'import/no-extraneous-dependencies': WARNING,
    'jsx-a11y/label-has-associated-control': OFF,
    'jsx-a11y/label-has-for': OFF,
    'jsx-a11y/media-has-caption': OFF,
    'no-loop-func': OFF,
    'no-nested-ternary': OFF,
    'no-param-reassign': OFF,
    'no-plusplus': OFF,
    'no-return-assign': OFF,
    'no-underscore-dangle': OFF,
    'no-unused-expressions': OFF,
    'no-unused-vars': ['error', { varsIgnorePattern: '^_', argsIgnorePattern: '^_' }],
    'max-classes-per-file': OFF,
    'global-require': OFF,
    'prettier/prettier': ERROR,
    'react/jsx-filename-extension': OFF,
    'react/prop-types': OFF,
    'react/require-default-props': OFF,
  },

  root: true,
};

[JonasBa]

Seeing the same thing here

Eslint config:

module.exports = {
  parser: '@typescript-eslint/parser', // Specifies the ESLint parser
  env: {
    browser: true,
    jest: false,
  },
  parserOptions: {
    ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
    sourceType: 'module', // Allows for the use of imports
    ecmaFeatures: {
      jsx: true, // Allows for the parsing of JSX
    },
  },
  settings: {
    react: {
      version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
    },
  },
  extends: [
    'plugin:react-hooks/recommended',
    'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
    'plugin:@typescript-eslint/recommended', // Uses the recommended rules from @typescript-eslint/eslint-plugin
    'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
    'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslin
  ],
  rules: {
    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
    'react/prop-types': 0,
    'react/display-name': 0,
    'react/no-unescaped-entities': 0,
    'arrow-parens': ['error', 'as-needed'],
    '@typescript-eslint/ban-ts-comment': [0, 'allow-with-description'],
  },
  ignorePatterns: ['scripts', 'config', 'node_modules'],
}

[juzi214032]

@BPScott Can this problem be solved?

[JonasBa]

This looks related to the issue opened in prettier-eslint-cli repo

[firebluetom2]

Seeing similar

[luksari]

Same here, prettier takes a lot of time, which results in really bad developer experience

Rule	Time (ms)	Relative
prettier/prettier	4426.921	84.0%
import/order	412.818	7.8%
react/no-direct-mutation-state	91.420	1.7%
@typescript-eslint/no-unused-vars	71.658	1.4%
react/no-typos	39.917	0.8%
react/require-render-return	33.776	0.6%
no-empty-character-class	11.034	0.2%
react-hooks/exhaustive-deps	10.065	0.2%
no-restricted-globals	9.641	0.2%
react-hooks/rules-of-hooks	8.002	0.2%
lint success

[JohannesLamberts]

Same here

Rule                                  | Time (ms) | Relative
:-------------------------------------|----------:|--------:
prettier/prettier                     | 29282.228 |    82.8%
compat/compat                         |   849.040 |     2.4%
import/no-unresolved                  |   704.407 |     2.0%
...

[theodesp]

Same here

Rule                              | Time (ms) | Relative
:---------------------------------|----------:|--------:
prettier/prettier                 | 25445.485 |    44.7%
import/no-cycle                   | 12162.685 |    21.4%
import/extensions                 |  2531.717 |     4.4%
import/no-unresolved              |  2133.016 |     3.7%
import/no-extraneous-dependencies |  1431.038 |     2.5%
...

[hannadrehman]

same here

Rule	Time (ms)	Relative
prettier/prettier	91360.401	70.1%
import/no-cycle	10669.895	8.2%
import/no-duplicates	3134.220	2.4%
import/default	2746.444	2.1%
import/named	2690.323	2.1%
import/no-unresolved	1206.509	0.9%
react/no-deprecated	1000.266	0.8%
react/jsx-no-bind	890.601	0.7%
no-unused-vars	878.121	0.7%
no-redeclare	737.186	0.6%
Rule	Time (ms)	Relative

[yekver]

any updates on this?

[juzi214032]

@yekver no, I give up