【Prettierの導入】人によって修正内容が変わってしまう問題

何が起きたか

参考 : https://ics.media/entry/17030/

社内で、Prettierを導入した。
しかし、ローカルで実行すると、
何故かAさんのローカルでは発生しない修正がBさんのローカルでは発生するといったことが発生した。

確かめたこと

まずしたことは設定ファイルの確認。
ほどデフォルトのもの使っているため特に差分はなかった。

prettierrc

{
	"singleQuote": true,
	"printWidth": 100,
	"tabWidth": 2,
	"semi": true,
	"arrowParens": "always",
	"endOfLine": "lf",
	"useTabs": false,
	"quoteProps": "as-needed",
	"trailingComma": "none",
	"bracketSpacing": false,
	"vueIndentScriptAndStyle": true,
	"singleAttributePerLine": true
}

あとは、.prettierrcに入っていたりするんじゃね？と思ったがそうでもなさそう。

結局なんだったのか

結論、yarn　installで解決した。
依存関係（prettierを含む）のバージョンが異なっていた可能性があったが、yarn installを実行したことで、正しいバージョンの依存関係がインストールされ、結果としてprettierの挙動が一致したのだと考えられます。

おそらく弊社はdockerを使っているのだが、環境構築の際にyarn installを実行したタイミングが少し異なるためバージョンが違っていたのかもしれない。

補足: yarnとは

yarn installは、JavaScriptのプロジェクトで使用されるパッケージマネージャyarnのコマンドのことで、このコマンドは、プロジェクトで使用される依存関係（ライブラリーやモジュール）をインストールしてくれるものです。

yarn installが実行されると、プロジェクトのルートディレクトリにあるpackage.jsonというファイルを見て、必要なパッケージをインストールします。

また、yarnはyarn.lockというファイルを使用して、依存関係のバージョンを厳密に管理します。このファイルは、yarn installが実行されたときに自動的に生成され、依存関係の具体的なバージョン情報を含みます。このため、異なる環境間でも同じ依存関係のバージョンが使われ、コードの挙動が一致するようにします。