Contents
スポンサーリンク
概要
半年ぶりくらいに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を設定したら利くようになりました。
|
1 2 3 4 |
{ "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", } |
prettier設定
久しぶりに触ると忘れてしまうので、デフォルトの設定から変更したい場合にはルートに
.prettierrc.json
ファイルを置いて設定を記述する。
|
1 2 3 4 5 |
{ "bracketSpacing": true, "semi": true, "singleQuote": true } |
スポンサーリンク
スポンサーリンク
そのほか(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にしておく。
|
1 2 3 4 5 6 7 8 |
"editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "[javascript]": { "editor.formatOnSave": false }, |
.eslintrc.jsonを作成して下記のように作成する。
(extends以外はお好みで。)
|
1 2 3 4 5 6 7 8 9 |
{ "env": { "es6": true }, "parserOptions": { "ecmaVersion": 2017 }, "extends": ["plugin:prettier/recommended"] } |
スポンサーリンク