eslint v8 support (and the removal of eslint-formatter-codeframe used by default by CLI v5 beta.5)

[cexbrayat]

Version

5.0.0-beta.5

Reproduction link

github.com

Environment info

  System:
    OS: macOS 11.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
  Binaries:
    Node: 14.17.6 - ~/.volta/tools/image/node/14.17.6/bin/node
    Yarn: 1.22.10 - ~/.volta/tools/image/yarn/1.22.10/bin/yarn
    npm: 6.14.14 - ~/.volta/tools/image/npm/6.14.14/bin/npm
  Browsers:
    Chrome: 94.0.4606.81
    Edge: Not Found
    Firefox: 92.0.1
    Safari: 15.0
  npmPackages:
    @vue/cli-overlay:  5.0.0-beta.5
    @vue/cli-plugin-eslint: ~5.0.0-beta.5 => 5.0.0-beta.5
    @vue/cli-plugin-router:  5.0.0-beta.5
    @vue/cli-plugin-typescript: ~5.0.0-beta.5 => 5.0.0-beta.5
    @vue/cli-plugin-vuex:  5.0.0-beta.5
    @vue/cli-service: ~5.0.0-beta.5 => 5.0.0-beta.5
    @vue/cli-shared-utils:  5.0.0-beta.5
    @vue/compiler-core:  3.2.20
    @vue/compiler-dom:  3.2.20
    @vue/compiler-sfc: ^3.2.6 => 3.2.20
    @vue/compiler-ssr:  3.2.20
    @vue/component-compiler-utils:  3.2.2
    @vue/eslint-config-prettier: ^6.0.0 => 6.0.0
    @vue/eslint-config-typescript: ^7.0.0 => 7.0.0
    @vue/reactivity:  3.2.20
    @vue/ref-transform:  3.2.20
    @vue/runtime-core:  3.2.20
    @vue/runtime-dom:  3.2.20
    @vue/server-renderer:  3.2.20
    @vue/shared:  3.2.20
    @vue/web-component-wrapper:  1.3.0
    eslint-plugin-vue: ^7.19.1 => 7.19.1
    typescript: ~4.1.5 => 4.1.6
    vue: ^3.2.6 => 3.2.20
    vue-eslint-parser:  7.11.0
    vue-hot-reload-api:  2.3.4
    vue-loader:  16.8.1 (15.9.8)
    vue-style-loader:  4.1.3
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

npx @vue/cli@next create eslint-v8 --inlinePreset '{"useConfigFiles": true,"plugins": {"@vue/cli-plugin-typescript": {},"@vue/cli-plugin-eslint": {"config": "prettier","lintOn": ["save"]}},"vueVersion":"3"}'

cd eslint-v8
# update eslint to 8.0.0 and typescript-eslint to 5.0.0 or clone https://github.com/cexbrayat/eslint-v8 directly
npm i
npm run lint

What is expected?

The linting command succeeds

What is actually happening?

The linting command throws:

 Error: The codeframe formatter is no longer part of core ESLint. Install it manually with `npm install -D eslint-formatter-codeframe`
Error: The codeframe formatter is no longer part of core ESLint. Install it manually with `npm install -D eslint-formatter-codeframe`
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15)
    at Function.Module._load (internal/modules/cjs/loader.js:745:27)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at CLIEngine.getFormatter (/Users/ced-pro/Code/test/cli-tests/eslint-v8/node_modules/eslint/lib/cli-engine/cli-engine.js:1040:24)
    at ESLint.loadFormatter (/Users/ced-pro/Code/test/cli-tests/eslint-v8/node_modules/eslint/lib/eslint/eslint.js:634:37)
    at lint (/Users/ced-pro/Code/test/cli-tests/eslint-v8/node_modules/@vue/cli-plugin-eslint/lint.js:127:34)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async /Users/ced-pro/Code/test/cli-tests/eslint-v8/node_modules/@vue/cli-plugin-eslint/index.js:81:7
error Command failed with exit code 1.

---

With the work recently done, eslint v8 nearly works out of the box, except for the codeframe formatter issue, as it has been removed from eslint v8 (see https://eslint.org/docs/8.0.0/user-guide/migrating-to-8.0.0#removed-formatters).

Installing the missing dependency fixes the issue.

Maybe the CLI should install directly? I can work on a PR to bump eslint to v8 and typescript-eslint to v5, and add the missing dependency. Or maybe the default formatter should change to a built-in one? https://eslint.org/docs/user-guide/formatters/

[haoqunjiang]

Let's just use the built-in one. I don't know why codeframe was chosen as the default formatter. And the new eslint-formatter-codeframe is unmaintained (https://github.com/fregante/eslint-formatter-codeframe/issues/2) so it may not be a good replacement.

[cexbrayat]

👍 Which one should we use? https://eslint.org/docs/user-guide/formatters/

[haoqunjiang]

ESLint's default stylish formatter looks good to me.

[cexbrayat]

Sounds good. If that's OK with you, I'll open PRs to:

• use stylish as the default formatter
• bump eslint to v8 and typescript-eslint to v5

[haoqunjiang]

Yeah, thanks for the help!

In the case of typescript-eslint, I think you also need a PR to https://github.com/vuejs/eslint-config-typescript/blob/master/package.json

[cexbrayat]

Let's start with that then! Please see https://github.com/vuejs/eslint-config-typescript/pull/34 to update eslint-config-typescript to eslint v8

[cexbrayat]

As a seconde step: PR to switch to stylish formatter https://github.com/vuejs/vue-cli/pull/6748

[cexbrayat]

Third and last step: PR to update new projects to eslint v8 #6749

Note that some plugins are not yet officially compatible with eslint v8, but it looks like it works according to the tests added.