K note.dev

All Posts

いつのまにかeslint-plugin-prettierが推奨されないものになってた

Posted
Tags
いつのまにかeslint-plugin-prettierが推奨されないものになってた

はじめに

VSCodeのsettings.jsonを見直している中でフォーマッタの設定についてEslint、Prettierのドキュメントを見ていたらPrettierの公式ドキュメントで↓のページを見つけた。

Integrating with Linters#Notes

When searching for both Prettier and your linter on the Internet you’ll probably find more related projects. These are generally not recommended, but can be useful in certain circumstances.

First, we have plugins that let you run Prettier as if it was a linter rule:

  • eslint-plugin-prettier
  • tslint-plugin-prettier
  • stylelint-prettier

全文は上記のリンクを確認してほしいのですが、ようは今までESLintとPrettierを一緒に使う場合、PrettierをESLintとして使えるようにするプラグインがあって、そのプラグインを使って両者を連携するやり方がいたるところで紹介されていたのが、今は推奨されませんよと記載されています。

理由としては以下が挙げられています。

  • エディター上で赤い破線が多く表れて煩わしい（フォーマッターを導入しているのに逆に意識することになってしまう）
  • Prettierを実行するよりも遅い
  • プラグインという余計なレイヤーがあることでそこで何かしらの問題が発生する可能性がある

ESLintとPrettierについて

ESLintは静的解析ツールです。プラスしてフォーマット機能も有しています。
Prettierはフォーマッターです。こちらはフォーマットオンリーです。

現在はESLintで静的解析を行い、ESLintのフォーマットは無効にしつつ、Prettierでフォーマットを行うというのがメジャーかと思います。

両者を連携させるために、以下の２通りの方法があります。

  • ESLintでPrettierも実行させるようにする（eslint-plugin-prettier）
  • ESLint、Prettierをそれぞれ実行する

※両方ともESLintでPrettierと競合するルールはオフにすることが前提です

そして今はPrettierのドキュメントを見ると「ESLintでPrettierを実行させる」やり方が推奨されないものになっていました。
でもネットでESLint、Prettierについて検索するとほとんど上のeslint-plugin-prettierを使うやり方ばかりでてきます。私も今までずっとそのやり方でESLintとPrettierを使っていました。

ただ、推奨されないとあるので、今回VSCodeの設定見直しと合わせてESLint、Prettierの連携方法も推奨される方に変えてみました。

ESLint/Prettier連携（今まで）

公式で推奨されていなかった方法（eslint-plugin-prettierを使う方法）ついては過去に書いていますのでそちらを参照ください。

GridsomeにESLint、Prettierを導入する

ESLint/Prettier連携（推奨版）

このブログの開発に使用しているESLintとPrettierの構成を推奨される方法に変更していきます。
（変更というかESLint、Prettier両方外した状態でイチから入れてみたいと思います）

導入パッケージ

yarn add -D eslint eslint-config-prettier eslint-plugin-gridsome eslint-plugin-vue babel-eslint prettier
  • eslint（eslint本体）
  • eslint-config-prettier（Prettierと競合するルールをオフにする）
  • eslint-plugin-gridsome（Vue SFCのカスタムブロック(GraphQL)lint対応）
  • eslint-plugin-vue（Vue公式ESLintプラグイン）
  • babel-eslint（非標準のJavaScript構文にlintを対応させる）
  • prettier（prettier本体）

eslint-plugin-prettierは入れません。

ESLint、Prettier構成

ESLintの構成ファイルは以下のようになります。

.eslintrc.json 
{
  "root": true,
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "parser": "babel-eslint",
    "sourceType": "module"
  },
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:vue/recommended",
    "plugin:gridsome/recommended",
    "prettier",
    "prettier/vue"
  ],
  "plugins": ["vue"],
  "rules": {}
}

extendsに適用するルールセットを記載します。先頭から適用されるため書く順番に注意が必要です。

eslint→ eslint-plugin-vue → eslint-plugin-gridsome の順番でルールを適用し、さらにprettier → prettier/vue でprettierと競合するESLintルールをオフにするように適用します。

Prettierの構成ファイルは以下（お好みで）

.prettierrc 
{
  "semi": true,
  "arrowParens": "always",
  "singleQuote": false,
  "trailingComma": "none"
}

VSCode設定

VSCodeを使う際にファイル保存時に静的解析・フォーマットが有効になるよう設定をします。
VSCode拡張機能のESLintとPrettierを入れる必要があります。

settings.json 
{
  /* Linter and Formatter */
  // linter
  "eslint.packageManager": "yarn", // ESLintライブラリ解決時に使うパッケージマネージャ
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true, // eslint
    "source.fixAll.stylelint": true // Stylelint
  },
  // formatter
  "editor.defaultFormatter": "esbenp.prettier-vscode", // デフォルトフォーマッターをPrettier
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.formatOnType": true,
  // Prettier対象外言語
  "prettier.disableLanguages": ["markdown"]
}

settings.jsonのリンター、フォーマッターの箇所だけ抜粋。
editor.codeActionsOnSaveのsource.fixAll.eslintをtrueにして保存時にESLintが実行されるようにします。format系の設定もすべて有効にします。

これで保存時にESLint、Prettierがそれぞれ実行されます。Prettierと競合するESLintルールは前述したとおり、.eslintrc.jsonでオフにするようしているため、それぞれが実行されても問題は発生しません。

※ ちなみにVSCodeのESLintはパッケージの解決にプロジェクトローカル → グローバルの優先順で検索して見つかったものが使用されます。同様にPrettierはプロジェクトローカル → グローバル → 拡張機能バンドルPrettierの順で使われます。

今までのESLintでPrettierも実行する方法の場合、VSCodeの設定でjsやvueファイルだけフォーマッタOFFにしたり、あまり素直な設定ではなかったのですがこちらのやり方はリンター・フォーマッターともにONにするだけでOKでわかりやすくなります。

おわりに

今までなんとなく入れて動いてるからいいやと思っていた節があったのですが、ちゃんとESLint、Prettierの公式ドキュメントを読んでみたら意外と間違った設定をしていたみたいで、公式ドキュメントはちゃんと読む必要があるなーと反省。。

※ 参考リンク
ESLint
ESlint(VSCode拡張)
Prettier
Prettier(VSCode拡張)

© 2022 K note.dev