SyntaxError: This experimental syntax requires enabling one of the following parser plugin(s): decorators-legacy, decorators.

はじめに

prettierの設定をして実行したところ、タイトル通りの以下のエラーがでました。

 SyntaxError: This experimental syntax requires enabling one of the following parser plugin(s): "decorators-legacy", "decorators".

.prettierrc

importの並び替えを行いたかったため、prettier-plugin-sort-importsを入れています。

{
  "printWidth": 100,
  "singleQuote": true,
  "useTabs": false,
  "tabWidth": 2,
  "semi": true,
  "bracketSpacing": true,
  "bracketSameLine": false,
  "importOrder": [
    "^@angular/(.*)$",
    "^primeng/(.*)$",
    "<THIRD_PARTY_MODULES>",
    "^@global/(.*)$",
    "^[./]"
  ],
  "importOrderSeparation": true,
  "importOrderParserPlugins": ["typescript", "decorators-legacy"],
  "importOrderSortSpecifiers": true
}

Note

関係あるかわかりませんが、tsconfigに以下のようにパスのエイリアスを入れています。

"paths": {
  "@global/*": ["./app/global/*"]
}

解決方法

.prettierrc に以下の一文を追加します。

{
  "importOrderParserPlugins": ["typescript", "decorators-legacy"],
}

解説

エラーにある通り、decorators-legacy を importOrderParserPlugins に追加します。
ただ、これだけだと以下のような構文由来のエラーが出ます。

• SyntaxError: Missing semicolon.
• SyntaxError: Unexpected token, expected "{"
• SyntaxError: Missing initializer in const declaration.

意味が分かりませんね。
そこでもう一度ドキュメントを見てみると、

default value: ["typescript", "jsx"]

なるほど。TypeScriptが足りなかったのですね。
ReactやNext.jsで開発している方はjsxも追加したほうがよさそうです！

おわりに

prettierはhuskyと組み合わせるとむっちゃいい感じになります。
私もhuskyと合わせて使っていたので、この問題に直面したとき最初huskyを疑いました。関係なかったですが。
同じようにhuskyを疑った方のためにここで言及しておきます。
以上です。終わりだよ～(o・∇・o)