prettier-atom failed: CLIEngine is not a constructor (aka what about eslint v8+ support)

[M1CK431]

After upgrading eslint to v8+:

Eslint v8 is out since about 2 months now. Is there any plan to support it soon?

[robwise]

@M1CK431 are you using prettier-eslint with prettier-atom? This should already be working fine if you are not. If you are, the error you are getting is because prettier-eslint is not eslint 8 compatible (yet). See: prettier/prettier-eslint#656

I would highly recommend, however, that you drop using prettier-eslint in your projects and instead use https://github.com/prettier/eslint-config-prettier and https://github.com/prettier/eslint-plugin-prettier to just have eslint run your formatting.

[M1CK431]

Hi @robwise, sorry for my late reply.

Here is my dev dependencies (from package.json):

{
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0-rc.1",
    "@vue/cli-plugin-eslint": "~5.0.0-rc.1",
    "@vue/cli-plugin-router": "~5.0.0-rc.1",
    "@vue/cli-service": "~5.0.0-rc.1",
    "autoprefixer": "^10.4.0",
    "eslint": "^8.10.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.0.3",
    "naive-ui": "^2.21.4",
    "postcss": "^8.4.4",
    "prettier": "^2.4.1",
    "tailwindcss": "^3.0.0"
  }
}

As you can see, there isn't prettier-eslint installed and even I have check in my node-modules directory (just in case of indirect dependency) and I haven't found any prettier-eslint entry:

ls -l node_modules/prettier-eslint
ls: cannot access 'node_modules/prettier-eslint': No such file or directory

In addition, eslint-config-prettier and eslint-plugin-prettier are both already installed.

In Atom, I'm using prettier-atom v0.60.1 with the following settings:

EDIT: here is my .eslintrc.js

module.exports = {
  root: true,
  env: { node: true },
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  parserOptions: { parser: "@babel/eslint-parser" },
  rules: {
    "prettier/prettier": [
      "warn",
      { trailingComma: "none", arrowParens: "avoid" }
    ],
    "vue/multi-word-component-names": "off",
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
  }
};

Any idea? 🥺

[M1CK431]

up! @robwise 🙏 🙃

[dlindahl]

Sharing in case it helps. I created a brand new folder with nothing in it and ran npm init, pressing Enter to select all of the defaults.

I then added a prettier.config.js with the following:

module.exports = {
  arrowParens: 'always',
  semi: false,
  singleQuote: true,
  trailingComma: 'es5',
}

Making any modification that would trigger one of the formatting rules would cause prettier-atom to re-format the file as expected.

I then added a .eslintrc.js file with the following:

module.exports = {
  extends: []
}

Making simple formatting changes to this file caused prettier-atom to re-format the file as expected.

I then added eslint via npm add -D eslint which caused npm to install ESLint ^8.17.0.

I then attempted to make a formatting change to both of the above files and each time was presented with a prettier-atom failed: CLIEngine is not a constructor error:

Downgrading eslint to v7.32.0 and restarting Atom seems to "fix" the issue in that formatting is run as expecting along with no error message.

This is with prettier-atom v0.60.1 which appears to install eslint v5? 🤷

prettier-atom@0.60.1 ~/.atom/packages/prettier-atom
└─┬ @lewisl9029/prettier-eslint@9.0.1
  └── eslint@5.16.0 

[shellscape]

@robwise premature close. prettier-eslint was updated and this issue still occurs.

[Torniojaws]

Also getting this issue with eslint 8.11.0, prettier 2.2.1 and prettier-atom 0.60.1 and using TypeScript (in case it matters).

However, if I uncheck ESLint Integration in prettier-atom config, then it works and the prettier rules take effect normally.