IDEAで保存時にESLintとPrettierを実行してファイルを自動整形する

Intellij IDEAでファイル保存時に、ESLintとPrettierを自動実行してファイルを自動的に整形するようにしました。
ESLintは可能であればAuto fix (--fix) します。

はじめに

前提知識を扱ったブログの過去記事について

上記3つの知識については、このブログの過去記事でも紹介しています。
よろしければあわせてご覧下さい。

自動保存機能は最近実装された機能であるため、下記以上のバージョンでお試しください。

項目	バージョン
IntelliJ IDEA	2020.1.1
Prettierプラグイン	201.7223.99

Language & Frameworks > JavaScript > Code Quality Tools > ESLint の設定を変更します。

Run eslint --fix on saveが有効なら、Auto fix可能な項目はファイルが自動的に修正されます。

はじめにPrettierプラグインをインストールします。

Language & Frameworks > JavaScript > Prettierの設定を変更します。

デフォルトでは以下の拡張子が対象です。

他の拡張子も対象にする場合はRun on save for filesの内容を変更してください。
たとえば、vueファイルを対象に加える場合は以下のようにします。

{**/*,*}.{js,ts,jsx,tsx,vue}

IntelliJ IDEAでIdeaVimプラグインを使っている方に注意です。

IdeaVimから:w<CR>で保存した場合、ファイルの自動修正は行われません。

回避策は3つあります。

せっかく公式対応されたので、File Watchersプラグインを使わずに順応したいですね。

:wコマンドを使う他のリスク

IdeaVimの:wコマンドは別の機能でも同様の問題が発生するようです。

IDEAを使うときは、この機会に:wから卒業したほうがいいかもしれません。

IDEAでVimの力を引き出したい方へ

先日以下の記事を書きましたので、よろしければご覧下さい。

ファイル保存時にESLint(--fix)とPrettierを自動実行する方法を紹介しました。

必ず修正するLintエラーやフォーマットに気を遣うのはリソースの無駄です。
脳のリソースは設計や実装などに使っていきたいですね😉