ESLint・Stylelint(Linter)とprettier(Formatter)の役割と実行方法について再考する

[KentaHizume]

概要

stylelint、eslintと、prettierでルールが衝突するのを解決するためにプラグインを入れておく必要があったが、
アップデートによりうまく分業がなされたため、もうプラグインを入れる必要がないという記述があるので、
内容を確認のうえ、実際の設定およびドキュメントに記載の設定方法を見直す。

http://127.0.0.1:8000/guidebooks/how-to-develop/vue-js/static-verification-and-format/

https://github.com/prettier/stylelint-prettier?tab=readme-ov-file#disabling-rules-that-may-conflict-with-prettier
https://zenn.dev/mayobimu/articles/f88ba1903b9e65
https://e-joint.jp/blog/2127

詳細

create-vueのテンプレートでは、
下記のようにeslintの実行とprettierの実行を別のコマンドに分離しており、
eslintの設定で、コードフォーマットのルールを無効にしている。

"lint": "eslint . --fix",
"format": "prettier --write src/"

import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
  skipFormatting,

Maia/MarisではStylelintを組み込んでおり、eslint&prettierと直列実行しているので、これも分離する。

"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore && stylelint **/*.{vue,css} --fix",

一方で、開発/CI時にはコミット前に忘れずにLinterとFormatterを実行すべきなので、
1コマンドで実行できるnpmスクリプトは登録しておきたい。

対応の結果として、下記のようなスクリプト構成になる想定。
別途CI用には自動修正しない設定のタスクが必要。

"lint":"run-s eslint stylelint format" 
"eslint": "eslint"
"stylelint": "stylelint"
"format": "prettier"

完了条件

• ESLint、StyleLint、prettierでそれぞれ別々に実行できること
• 開発環境では1コマンドでこれらの処理を直列に実行できること
• CIワークフローで、ESLint、Prettier、Stylelintによるチェックが行われていること
• ガイドの静的コード分析とフォーマットに変更が反映されていること

[KentaHizume]

stylelint v15に更新した際のissue

• StylelintとPrettierの設定を見直しガイドを修正する #483

[KentaHizume]

大方針としてcreate-vueに追従することを考えると、
create-vueの初期設定がどうなっているかを確認したほうがよさそう。
ESLint9系への対応時に変わっているかを確認する。

• ESLint 9のflat configに移行する #349