ちなみに写真は私ではないです。

このブログのソースコードはフロントに弱い人間(ちなみに私のこと)が書いてます。結果、jsの文末にセミコロンがついてたりついてなかったりしてしまってて。scssも同様です。残念。

そこで、prettier-eslintとprettier-stylelintを導入した。
しかし、フォーマット時にprettier-stylelintがエラーが出す。バージョンは0.4.2。

Error: Couldn't resolve parser "postcss"

こんなエラーメッセージ。

原因

原因は、依存しているパーサーの名前がpostcssからcssに変わったためらしい。このエラーは、prettierのバージョンが2.0.4から起きているみたい。

解消方法

prettierのgithub issueに有志が挙げてくれている。感謝。

prettier-stylelintは3年ほどノーメンテ状態。
今後のメンテも絶望的なのでパッチを当てて対応しましょうとのこと。

  1. プロジェクトのルートディレクトリにpatchesディレクトリを作る。
  2. 作ったディレクトリの中に下記ファイルを作る。(ファイル名はprettier-stylelint+0.4.2.patchです。+をわすれずに)
prettier-stylelint 0.4.2.patch
diff --git a/node_modules/prettier-stylelint/src/index.js b/node_modules/prettier-stylelint/src/index.js
index 124c00d..a6f12ec 100644
--- a/node_modules/prettier-stylelint/src/index.js
+++ b/node_modules/prettier-stylelint/src/index.js
@@ -60,7 +60,7 @@ resolveConfig.resolve = (stylelintConfig, prettierOptions = {}) => {
             prettierOptions.tabWidth = indentation;
         }
     }
-    prettierOptions.parser = 'postcss';
+    prettierOptions.parser = 'css';
     debug('prettier %O', prettierOptions);
     debug('linter %O', stylelintConfig);
  1. yarn add -D patch-package postinstall-postinstallを実行
  2. yarn run patch-package を実行(これでパッチが当たる)
  3. yarn install時に自動でパッチが当たるようpackage.jsonのscriptsに下記を追記
package.jsonの抜粋
  "scripts": {
    ...
    "postinstall": "patch-package"
  }

patch-packageというライブラリはいい感じにパッチを作ってくれる。 yarnで使うときはpostinstall-postinstallを入れると良いよ、とgithubのリポジトリに記載があったので入れた。どうやらyarn removeのときもうまく対処してくれるとのこと。

困っている方の参考になれば嬉しいです。
わからなけらばtwitterで叫んでもらえれば反応できるかも。

参考リンク

Couldn't resolve parser "postcss" when updated to v2.0.4
patch-package

Copyright 2020 shimu.dev