🦷
VScodeでPrettierを導入した際の忘備録
はじめに
VScodeでコード整形を自動化するためにPrettierを導入したところ、期待通りに動作しない問題が発生しました。
その際解決するまでに試したことの忘備録です。
やったこと
こちらの記事を参考にPrettierを導入。
Prettierのインストール
VScodeの拡張機能
「Prettier - Code formatter」をインストール。
参考記事の通り、設定から
-
Format On Saveを有効にする -
Default FormatterをPrettierに設定する
が、ここでエラー発生。
Format On Saveを有効にしようとすると、
ユーザー設定に書き込めません。ユーザー設定を開いて、ファイル内のエラー/警告を修正してからもう一度お試しください
というアラートが表示される。
JSON設定
言われた通りユーザー設定を開いて、settings.jsonを確認してみる。
{
"editor.acceptSuggestionOnEnter": "off",
"window.zoomLevel": 1,
"editor.tabSize": 2,
"html.autoClosingTags": false
"pasteImage.path": "${currentFileDir}/./imgs"
}
触った覚えはないが、"html.autoClosingTags": false後ろのカンマ抜けで
構文エラーになっている様子。
{
"editor.acceptSuggestionOnEnter": "off",
"window.zoomLevel": 1,
"editor.tabSize": 2,
"html.autoClosingTags": false,
"pasteImage.path": "${currentFileDir}/./imgs"
}
修正。
が、再びエラー。
/Users/nanana/Desktop/test/node_modules/prettier
["ERROR" - 15:06:11] Failed to load module. If you have prettier or plugins referenced in package.json, ensure you have run `npm install`
["ERROR" - 15:06:11] Cannot find Prettier package.json
Error: Cannot find Prettier package.json
at t.ModuleResolver.loadPrettierVersionFromPackageJson (/Users/nanana/.vscode/extensions/esbenp.prettier-vscode-10.1.0/dist/extension.js:1:4058)
at t.ModuleResolver.getPrettierInstance (/Users/hanaokayouko/.vscode/extensions/esbenp.prettier-vscode-
...
Prettierのパッケージが見つからないと言われる。
ので、Prettierパッケージをインストールしてみる。
プロジェクトディレクトリにて以下のコマンドを実行。
npm install -D prettier
その後、VSCordを再起動したがエラー消えず。
setting.jsonへの追加項目
上記の記事を参考に、setting.jsonに以下を記述。
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
これで、Prettierの設定が完了し、Format On Saveが正常に動作しました。
Discussion