Vue-cli: Parsing error from prettier for brand new project

[awerlang]

Version

4.5.7

Reproduction link

https://github.com/awerlang/sourdough/commit/77221be57c5919d70b63a1ad487d50bce47dd980

Environment info

Environment Info:

  System:
    OS: Linux 5.8 openSUSE Leap 15.2
    CPU: (8) x64 Intel(R) Core(TM) i7-7700 CPU @ 3.60GHz
  Binaries:
    Node: 12.18.2 - /usr/bin/node
    Yarn: Not Found
    npm: 6.14.5 - /usr/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @vue/cli-overlay:  4.5.7 
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.7 
    @vue/cli-plugin-pwa: ~4.5.0 => 4.5.7 
    @vue/cli-plugin-router:  4.5.7 
    @vue/cli-plugin-typescript: ~4.5.0 => 4.5.7 
    @vue/cli-plugin-unit-jest: ~4.5.0 => 4.5.7 
    @vue/cli-plugin-vuex:  4.5.7 
    @vue/cli-service: ~4.5.0 => 4.5.7 
    @vue/cli-shared-utils:  4.5.7 
    @vue/compiler-core:  3.0.0 
    @vue/compiler-dom:  3.0.0 
    @vue/compiler-sfc: ^3.0.0 => 3.0.0 
    @vue/compiler-ssr:  3.0.0 
    @vue/component-compiler-utils:  3.2.0 
    @vue/eslint-config-prettier: ^6.0.0 => 6.0.0 
    @vue/eslint-config-typescript: ^5.0.2 => 5.1.0 
    @vue/preload-webpack-plugin:  1.1.2 
    @vue/reactivity:  3.0.0 
    @vue/runtime-core:  3.0.0 
    @vue/runtime-dom:  3.0.0 
    @vue/shared:  3.0.0 
    @vue/test-utils: ^2.0.0-0 => 2.0.0-beta.6 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^7.0.0-0 => 7.0.1 
    jest-serializer-vue:  2.0.2 
    typescript: ~3.9.3 => 3.9.7 
    vue: ^3.0.0 => 3.0.0 
    vue-eslint-parser:  7.1.0 
    vue-hot-reload-api:  2.3.4 
    vue-jest: ^5.0.0-0 => 5.0.0-alpha.4 (3.0.7)
    vue-loader:  15.9.3 (16.0.0-beta.8)
    vue-style-loader:  4.1.2 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: 4.5.6

Steps to reproduce

1) Create a new project selecting TypeScript and Prettier.
2) Run: npm run lint

What is expected?

Should be a no-op, at least formatting without any failures.

What is actually happening?

warning: Parsing error: '=' expected (prettier/prettier) at src/shims-vue.d.ts:2:16:
  1 | declare module "*.vue" {
> 2 |   import type { DefineComponent } from "vue";
    |                ^
  3 |   const component: DefineComponent;
  4 |   export default component;
  5 | }

---

Removing the type keyword satisfies prettier.
Prettier should support import type already, which may have to be fixed somewhere.

Found a discussion around the import type: https://github.com/vuejs/vue-cli/pull/5903/files#r495727376

[sodatea]

The default template still generates projects with prettier v1. Should be able to parse this syntax once it's upgraded to prettier v2. Thanks for the report!

[yesworld]

faced the same problem... temporary solution, upgrade the prettier to "^2.2.0".

[ghidello]

I updated prettier to the latest version and now if I run npm run lint the method chain in main.ts is being collapsed to a one liner. Have you noticed the same behavior?

[yesworld]

This is normal behavior, depends on the settings for the line length limitation.