Decorators Experimental Syntax Error

[mtpultz]

Your Environment

• Prettier version: 2.3.1
• node version [12.x.x, 14.x.x]: 14.17.6
• package manager [npm@7, pnpm@6, yarn@2]: yarn@2
• IDE [VScode, Webstorm, CLI]: VSCode

Describe the bug

Installing the Prettier plugin using yarn (yarn add -D @trivago/prettier-plugin-sort-imports) formatting of the document starts throwing an error due to experimental syntax due to the use of decorators in Angular:

["ERROR" - 8:50:25 PM] Error formatting document.
["ERROR" - 8:50:25 PM] This experimental syntax requires enabling one of the following parser plugin(s): 'decorators-legacy, decorators' (32:0)

To Reproduce

1. Create an Nx workspace with an Angular application
2. Install sort imports yarn add -D @trivago/prettier-plugin-sort-imports
3. Add config to .prettierrc
4. Create a component
5. Attempt to format a document and watch the VSCode output

Expected behavior

A plugin that supports a variety of different libraries and frameworks should provide the plugin dev dependencies required for use especially when using TypeScript which doesn't require Babel for transpiling.

Screenshots, code sample, etc

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

{
  "singleQuote": true,
  "bracketSameLine": true,
  "importOrder": [
    "^@angular/(.*)$",
    "^rxjs/(.*)$",
    "<THIRD_PARTY_MODULES>",
    "^@bcgov/(.*)$",
    "^@core/(.*)$",
    "^@shared/(.*)$",
    "^[./]"
  ],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true
}

Error log

["INFO" - 8:50:25 PM] File Info:
{
  "ignored": false,
  "inferredParser": "typescript"
}
["INFO" - 8:50:25 PM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 8:50:25 PM] Prettier Options:
{
  "filepath": "/Users/.../**.component.ts",
  "parser": "typescript",
  "useTabs": false,
  "tabWidth": 2,
  "singleQuote": true,
  "bracketSameLine": true,
  "attributeGroups": [
    "$ANGULAR_STRUCTURAL_DIRECTIVE",
    "^(id|name)$",
    "^class$",
    "$DEFAULT",
    "^aria-",
    "$ANGULAR_INPUT",
    "$ANGULAR_TWO_WAY_BINDING",
    "$ANGULAR_OUTPUT"
  ],
  "importOrder": [
    "^@angular/(.*)$",
    "^rxjs/(.*)$",
    "<THIRD_PARTY_MODULES>",
    "^@gov/(.*)$",
    "^@core/(.*)$",
    "^@shared/(.*)$",
    "^[./]"
  ],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true
}
["ERROR" - 8:50:25 PM] Error formatting document.
["ERROR" - 8:50:25 PM] This experimental syntax requires enabling one of the following parser plugin(s): 'decorators-legacy, decorators' (32:0)

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

• I'm willing to fix this bug 🥇

[ratierd]

Hello @mtpultz.

I had the same issue and I think you just need to add "importOrderParserPlugins": ["typescript", "decorators-legacy"], in your prettier config file.

See here for more details

[byara]

As @ratierd pointed out, you just need to add importOrderParserPlugins option in your rc file. I'll close the issue, but feel free to re-open if the issue still persists.

[nameer]

If anyone still scratching their head over tsx files, adding jsx to the list did it for me: importOrderParserPlugins: ["typescript", "jsx", "decorators"].

[joey-ma]

If anyone still scratching their head over tsx files, adding jsx to the list did it for me: importOrderParserPlugins: ["typescript", "jsx", "decorators"].

unfortunately, it was still producing errors with my @tailwind directives. I had to exclude the styles/globals.css from the files to lint.

[Sko007]

If I use a normal Component it works but if I use "router-view" in the app.vue with the vue facing decorator and a vite app. Then the error with Decorators Experimental Syntax pops up again.

https://stackoverflow.com/questions/72743336/vite-vue3-throws-internal-server-error-experimental-syntax-missing-parser-plu