nobu blog

プログラミングやゲームの話など。

*



VS Codeでprettierの自動フォーマット保存が効かなくなっていた時の対応

   

概要

半年ぶりくらいにVS Code上でnode.jsのコードを書こうと思っていたのですが、Ctrl+Sで保存してもprettierのコードフォーマットがされなくなっていた際の対応です。
何もフォーマッタの初期設定等をしなくてもVSCodeでjsファイルを開くだけでよしなにやってくれるので便利だったのですが。。。

スポンサーリンク

対応

下記の GitHubのIssueで問題を発見。
https://github.com/microsoft/vscode/issues/108447

setting.jsonのeditor.defaultFormatterにesbenp.prettier-vscodeを設定したら利くようになりました。

prettier設定

久しぶりに触ると忘れてしまうので、デフォルトの設定から変更したい場合にはルートに
.prettierrc.json
ファイルを置いて設定を記述する。

スポンサーリンク

そのほか(eslintなど)

一通り書かれていて、下記が参考になる。

VSCodeのprettierとnode_modulesのprettierに関して

npmやyarnでprettierを対象のソース内のpackage.jsonにインストールしておかなくても、VSCodeの拡張機能だけで使用可能。
インストールした場合には、拡張機能側ではなくインストールされた方を使う模様。
インストールしない場合にはVSCodeの設定に依存するので複数人で開発する方が良いかもしれない。

eslintと併用する

eslintは拡張機能を入れるだけではダメで個別にインストールする。
併用するならばprettierも入れる。
npm install -D eslint prettier
でインストールしておく。(package.jsonがまだないならば先にnpm init -yしておく)

pretitierと併用するためのパッケージをインストールする。
npm install -D eslint-config-prettier eslint-plugin-prettier

setting.jsonに下記を追加する。
eslint側でフォーマッタが起動するのでjsのみeditor.formatOnSaveでpretitierが実行されないようにfalseにしておく。

.eslintrc.jsonを作成して下記のように作成する。
(extends以外はお好みで。)

スポンサーリンク

 - Javascript, Visual Studio Code