Error formatting using VSCode when using vue-property-decorator in Vue file.

[richex-cn]

Your Environment

• Prettier version: 2.7.1
• node version 18.17.0
• package manager: pnpm@8
• IDE: VScode with Prettier extension v10.1.0

Describe the bug

Error formatting using VSCode when using vue-property-decorator in Vue file.

To Reproduce

1. Open test.vue.
2. Run VSCode command Format Document With
3. Select Prettier - Code formatter
4. See VSCode OUTPUT panel.

<!-- test.vue -->
<template lang="pug">
div
  div(:class='$style.inputWrap')
    div(:class='$style.inputLabel') NAME
    input(
      v-model='name',
      type='text',
      :class='$style.input',
      :placeholder='testPlaceholder',
      ref='name')/

  div(:class='$style.inputWrap')
    div(:class='$style.inputLabel') PHONE
    input(
      v-model='phone',
      type='number',
      :class='$style.input',
      :placeholder='testPlaceholder',
      ref='phone')/
</template>

<script lang="ts">
import { Vue, Component ,Prop} from 'vue-property-decorator'

@Component
export default class TestVue extends Vue {
  @Prop(String) theme!: string

  name=''
  phone=''
  testPlaceholder = ''
}
</script>

<style module>
.input {
  display: block;
}
</style>

Expected behavior

Format normal.

Screenshots, code sample, etc

Configuration File (cat .prettierrc, prettier.config.js, .prettier.js)

// .prettierrc.cjs
/** @type {import('prettier').Options} */
module.exports = {
  importOrder: ['^@/(.*)$', '^[./]'],
  importOrderSeparation: true,
  importOrderParserPlugins: ['classProperties', 'decorators-legacy'],
  plugins: [
    require.resolve('@prettier/plugin-pug'),
    require('@trivago/prettier-plugin-sort-imports'),
  ],
}

Error log

["ERROR" - 10:20:33 AM] Error formatting document.
["ERROR" - 10:20:33 AM] Unexpected token (6:21)
   1 | <template lang="pug">
   2 | div
   3 |   div(:class='$style.inputWrap')
   4 |     div(:class='$style.inputLabel') NAME
   5 |     input(
   6 |       v-model='name',
   7 |       type='text',
   8 |       :class='$style.input',
   9 |       :placeholder='testPlaceholder',
  10 |       ref='name')/
  11 |
  12 |   div(:class='$style.inputWrap')
  13 |     div(:class='$style.inputLabel') PHONE
  14 |     input(
  15 |       v-model='phone',
  16 |       type='number',
  17 |       :class='$style.input',
  18 |       :placeholder='testPlaceholder',
  19 |       ref='phone')/
  20 | </template>
  21 |
  22 | <script lang="ts">
  23 | import { Vue, Component ,Prop} from 'vue-property-decorator'
  24 |
  25 | @Component
  26 | export default class LpForm extends Vue {
  27 |   @Prop(String) theme!: string
  28 |
  29 |   name=''
  30 |   phone=''
  31 |   testPlaceholder = ''
  32 | }
  33 | </script>
  34 |
  35 | <style module>
  36 | .input {
  37 |   display: block;
  38 | }
  39 | </style>
  40 |
SyntaxError: Unexpected token (6:21)
   1 | <template lang="pug">
   2 | div
   3 |   div(:class='$style.inputWrap')
   4 |     div(:class='$style.inputLabel') NAME
   5 |     input(
   6 |       v-model='name',
   7 |       type='text',
   8 |       :class='$style.input',
   9 |       :placeholder='testPlaceholder',
  10 |       ref='name')/
  11 |
  12 |   div(:class='$style.inputWrap')
  13 |     div(:class='$style.inputLabel') PHONE
  14 |     input(
  15 |       v-model='phone',
  16 |       type='number',
  17 |       :class='$style.input',
  18 |       :placeholder='testPlaceholder',
  19 |       ref='phone')/
  20 | </template>
  21 |
  22 | <script lang="ts">
  23 | import { Vue, Component ,Prop} from 'vue-property-decorator'
  24 |
  25 | @Component
  26 | export default class LpForm extends Vue {
  27 |   @Prop(String) theme!: string
  28 |
  29 |   name=''
  30 |   phone=''
  31 |   testPlaceholder = ''
  32 | }
  33 | </script>
  34 |
  35 | <style module>
  36 | .input {
  37 |   display: block;
  38 | }
  39 | </style>
  40 |
    at instantiate (C:\path\to\node_modules\.pnpm\@babel+parser@7.18.9\node_modules\@babel\parser\lib\index.js:72:32)
    at constructor (C:\path\to\node_modules\.pnpm\@babel+parser@7.18.9\node_modules\@babel\parser\lib\index.js:359:12)
    at Parser.raise (C:\path\to\node_modules\.pnpm\@babel+parser@7.18.9\node_modules\@babel\parser\lib\index.js:3339:19)
    at Parser.unexpected (C:\path\to\node_modules\.pnpm\@babel+parser@7.18.9\node_modules\@babel\parser\lib\index.js:3377:16)
    at Parser.parseClassMemberWithIsStatic (C:\path\to\node_modules\.pnpm\@babel+parser@7.18.9\node_modules\@babel\parser\lib\index.js:15716:12)
    at Parser.parseClassMember (C:\path\to\node_modules\.pnpm\@babel+parser@7.18.9\node_modules\@babel\parser\lib\index.js:15583:10)
    at C:\path\to\node_modules\.pnpm\@babel+parser@7.18.9\node_modules\@babel\parser\lib\index.js:15523:14
    at Parser.withSmartMixTopicForbiddingContext (C:\path\to\node_modules\.pnpm\@babel+parser@7.18.9\node_modules\@babel\parser\lib\index.js:14323:14)
    at Parser.parseClassBody (C:\path\to\node_modules\.pnpm\@babel+parser@7.18.9\node_modules\@babel\parser\lib\index.js:15498:10)
    at Parser.parseClass (C:\path\to\node_modules\.pnpm\@babel+parser@7.18.9\node_modules\@babel\parser\lib\index.js:15472:22)
    at Parser.parseExportDefaultExpression (C:\path\to\node_modules\.pnpm\@babel+parser@7.18.9\node_modules\@babel\parser\lib\index.js:15997:19)
    at Parser.parseExport (C:\path\to\node_modules\.pnpm\@babel+parser@7.18.9\node_modules\@babel\parser\lib\index.js:15905:31)
    at Parser.parseStatementContent (C:\path\to\node_modules\.pnpm\@babel+parser@7.18.9\node_modules\@babel\parser\lib\index.js:14759:27)
    at Parser.parseStatement (C:\path\to\node_modules\.pnpm\@babel+parser@7.18.9\node_modules\@babel\parser\lib\index.js:14643:17)
    at Parser.parseBlockOrModuleBlockBody (C:\path\to\node_modules\.pnpm\@babel+parser@7.18.9\node_modules\@babel\parser\lib\index.js:15286:25)
    at Parser.parseBlockBody (C:\path\to\node_modules\.pnpm\@babel+parser@7.18.9\node_modules\@babel\parser\lib\index.js:15277:10)
    at Parser.parseProgram (C:\path\to\node_modules\.pnpm\@babel+parser@7.18.9\node_modules\@babel\parser\lib\index.js:14561:10)
    at Parser.parseTopLevel (C:\path\to\node_modules\.pnpm\@babel+parser@7.18.9\node_modules\@babel\parser\lib\index.js:14548:25)
    at Parser.parse (C:\path\to\node_modules\.pnpm\@babel+parser@7.18.9\node_modules\@babel\parser\lib\index.js:16556:10)
    at Object.parse (C:\path\to\node_modules\.pnpm\@babel+parser@7.18.9\node_modules\@babel\parser\lib\index.js:16608:38)
    at Object.preprocessor (C:\path\to\node_modules\.pnpm\@trivago+prettier-plugin-sort-imports@4.0.0_@vue+compiler-sfc@3.3.4_prettier@2.7.1\node_modules\@trivago\prettier-plugin-sort-imports\lib\src\preprocessors\preprocessor.js:15:24)
    at Object.vuePreprocessor [as preprocess] (C:\path\to\node_modules\.pnpm\@trivago+prettier-plugin-sort-imports@4.0.0_@vue+compiler-sfc@3.3.4_prettier@2.7.1\node_modules\@trivago\prettier-plugin-sort-imports\lib\src\preprocessors\vue-preprocessor.js:10:56)
    at Object.parse (C:\path\to\node_modules\.pnpm\prettier@2.7.1\node_modules\prettier\index.js:7330:25)
    at coreFormat (C:\path\to\node_modules\.pnpm\prettier@2.7.1\node_modules\prettier\index.js:8645:18)
    at formatWithCursor2 (C:\path\to\node_modules\.pnpm\prettier@2.7.1\node_modules\prettier\index.js:8837:18)
    at C:\path\to\node_modules\.pnpm\prettier@2.7.1\node_modules\prettier\index.js:37229:12
    at Object.format (C:\path\to\node_modules\.pnpm\prettier@2.7.1\node_modules\prettier\index.js:37243:12)
    at t.PrettierMainThreadInstance.format (c:\Users\Richex\.vscode\extensions\esbenp.prettier-vscode-10.1.0\dist\extension.js:1:18023)
    at t.default.format (c:\Users\Richex\.vscode\extensions\esbenp.prettier-vscode-10.1.0\dist\extension.js:1:16114)
    at async t.PrettierEditProvider.provideEdits (c:\Users\Richex\.vscode\extensions\esbenp.prettier-vscode-10.1.0\dist\extension.js:1:12672)
    at async U.provideDocumentFormattingEdits (c:\tools\VSCode\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:104:44948)
["INFO" - 10:20:33 AM] Formatting completed in 27ms.

Contribute to @trivago/prettier-plugin-sort-imports

• [ ] I'm willing to fix this bug 🥇

[richex-cn]

It seems like I overlooked the typescript plugin:

/** @type {import('prettier').Options} */
module.exports = {
  plugins: [
    require.resolve('@prettier/plugin-pug'),
    require.resolve('@trivago/prettier-plugin-sort-imports'),
  ],

  importOrder: ['^@/config(.*)$', '^@/util(.*)$', '^@/common(.*)$', '^@/(.*)$', '^[./]'],
  importOrderSeparation: true,
  importOrderParserPlugins: ['typescript', '["decorators", { "decoratorsBeforeExport": true }]'],
}

It's working normally now.