VSCodeでEslintの設定でコード整形する方法

はじめに

初めまして。エンジニアのkeita_Maxです。

ESLintとPrittierを使ってコード整形とか静的解析とかをしていたのですが、ESLintに書いてある設定をPrittierを使用しないでVSCodeで自動整形したいと思って調べたました。

結論

以下のようにsettings.jsonに以下を追加するとできました。

settings.json

    "editor.formatOnSave": true,
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": "explicit"
    }

ファイルを保存したときに、自動で記載した設定どおりに自動整形されます。

importの順番やダブルクォーテーションを使用しない、などの設定ができてCtrl+Sを押すだけできれいになります。

解説

"editor.formatOnSave": true,

↑ファイルを保存したときに自動で整形する設定です。

"editor.defaultFormatter": "dbaeumer.vscode-eslint",

↑デフォルトのフォーマッターを設定しています。今回はESLintを設定しています。

"editor.codeActionsOnSave"

↑ファイル保存時にコードのアクションを設定する項目のようです。

コードアクション (拡張機能がコードへの指摘をユーザーに示すための機構) を保存時に実行する設定です。
(引用：https://qiita.com/mysticatea/items/3f306470e8262e50bb70#:~:text=%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%E3%80%82-,editor.codeActionsOnSave,%E5%80%8B%E3%81%9A%E3%81%A4%E9%81%A9%E7%94%A8%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82)

"source.fixAll.eslint": "explicit"

↑保存されたときにアクションを実行するように設定しています。
※昔はtrueを設定していたらしいのですが"explicit"に変更になったようです。

さいごに

簡単に設定できるのと、Prittierの設定も書かなくてよくなるのが個人的に楽かなと思いました。

やり方が違ったり、もっといいやり方があるというご指摘がある方はコメントしていただけると幸いです。

最後まで読んでいただきありがとうございました。

参考